I'm using a bindable property like this in a class the inherits from Xamarin.Forms.ContentView:
public static readonly BindableProperty OverlayColorProperty = BindableProperty.Create(nameof(OverlayColor), typeof(Color), typeof(MyControl), Color.FromHex("#55000000"));
public Color OverlayColor
{
get => (Color)GetValue(OverlayColorProperty);
set => SetValue(OverlayColorProperty, value);
}
Furthermore I'm listening for changes to update an inner elements background color:
protected override void OnPropertyChanged(string propertyName)
{
base.OnPropertyChanged(propertyName);
switch (propertyName)
{
case nameof(OverlayColor):
GridBackground.BackgroundColor = OverlayColor;
break;
}
}
I just noticed that OnPropertyChanged does not get called with the default value. Just when I update it from another place, XAML or through code.
Is this exspected behavior?
If yes, why? What should I do instead? Define it also in XAML code?
Related
I'm creating an Xamarin.Forms MVVM App (only using Android) which needs certain buttons to be outlined red, whenever their text property holds a specific value. (Purpose: alert the user to press the button and select a value, which will change the Button Text Property and therefore remove the red outline)
To achieve this I've create the following documents:
A custom button CButton that extents the default Button:
public class CButton : Button
{
// this Hides the Default .Text-Property
public string Text
{
get => base.Text;
set
{
base.Text = value;
TextChangedEvent(this, new EventArgs());
}
}
// The Raised Event
protected virtual void TextChangedEvent(object sender, EventArgs e)
{
EventHandler<EventArgs> handler = TextChanged;
handler(sender, e);
}
public event EventHandler<EventArgs> TextChanged;
}
A custom behavior makes use of the raised TextChangedEvent
public class ButtonValBehavior : Behavior<CButton>
{
protected override void OnAttachedTo(CButton bindable)
{
bindable.TextChanged += HandleTextChanged;
base.OnAttachedTo(bindable);
}
void HandleTextChanged(object sender, EventArgs e)
{
string forbidden = "hh:mm|dd.mm.yyyy";
if (forbidden.Contains((sender as CButton).Text.ToLower()))
{
//Do when Button Text = "hh:mm" || "dd.mm.yyyy"
(sender as CButton).BorderColor = Color.Gray;
}
else
{
//Do whenever Button.Text is any other value
(sender as CButton).BorderColor = Color.FromHex("#d10f32");
}
}
protected override void OnDetachingFrom(CButton bindable)
{
bindable.TextChanged -= HandleTextChanged;
base.OnDetachingFrom(bindable);
}
}
The relevant parts of the ViewModel look the following:
public class VM_DIVI : VM_Base
{
public VM_DIVI(O_BasisProtokoll base)
{
Base = base;
}
private O_BasisProtokoll _base = null;
public O_BasisProtokoll Base
{
get => _base;
set
{
_base = value;
OnPropertyChanged();
}
}
Command _datePopCommand;
public Command DatePopCommand
{
get
{
return _datePopCommand ?? (_datePopCommand = new Command(param => ExecuteDatePopCommand(param)));
}
}
void ExecuteDatePopCommand(object param)
{
//launch popup
var p = new PP_DatePicker(param);
PopupNavigation.Instance.PushAsync(p);
}
}
The .xmal looks the following (b is the xmlns of the Namespace):
<b:CButton x:Name="BTN_ED_Datum"
Text="{Binding Base.ED_datum, Mode=TwoWay}"
Grid.Column="1"
Command="{Binding DatePopCommand}"
CommandParameter="{x:Reference BTN_ED_Datum}">
<b:CButton.Behaviors>
<b:ButtonValBehavior/>
</b:CButton.Behaviors>
</b:CButton>
This solution works fine whenever the input is caused by user interaction. However, when a Value is assigned during the initialization of the Page no red outline is created, in fact the TextChangedEvent isn't raised. By using breakpoints I noticed that during initialization the Text Property of CButton is never set, eventhough it actually will be in the view.
Despite fiddling around with my solution I cannot make this work on initialization. I tried to work around this issue by outlining every button by default in their constructor, however this will outline every button red, even when their text value doesn't require them to be.
How can I achieve my initial goal?
Many thanks in advance!
It's been a while but if I recall correctly what I ended up doing was:
Changing the new Text-Property of my custom Button to CText and
Making sure that I have Mode=TwoWay activated for any Element, that doesn't have it enabled by default. (Look up Binding modes on msdn for more)
making CText a bindable property of CButton
My custom button now looks the following:
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace EORG_Anton.Model
{
public class CButton : Button
{
public static readonly BindableProperty CTextProperty =
BindableProperty.Create(nameof(CText),
typeof(string),
typeof(CButton),
default(string),
BindingMode.TwoWay,
propertyChanged: OnTextChanged);
private static void OnTextChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (CButton)bindable;
var value = (string)newValue;
control.CText = value;
}
public string CText
{
get => base.Text;
set
{
base.Text = value;
TextChangedEvent(this, new EventArgs());
}
}
protected virtual void TextChangedEvent(object sender, EventArgs e)
{
EventHandler<EventArgs> handler = TextChanged;
handler(sender, e);
}
public event EventHandler<EventArgs> TextChanged;
}
}
Xamarin Forms Android Autosize Label TextCompat pre android 8 doesn't autosize text
I unfortunately do not have a high enough rep to comment on anyones post.
I was trying some things out and came across the post linked which got me very close to the solution after experimenting with other posts. I am also trying to autosize text within an app, but inside of an MVVM Master Detail project. If I enter values directly in the Droid renderer it works as expected, but that defeats the purpose when I have fonts of all sizes needed.
I have already made sure my return type is correct.
The code behind is initialized prior to the get value.
The fields are public.
There are no other issues by plugging in numeric values instead of bindable properties.
I am not receiving any values from the view. I would assume the view has not been created yet but the code behind has initialized. I am pretty sure I have done everything mostly right but I mostly deal with stock Xamarin so expanding functionality is still pretty new to me. All help is appreciated.
Custom Control (edit: changed default value from default(int) to an integer value to get rid of exception)
/// <summary>Auto scale label font size class.</summary>
public class AutoSizeLabel : Label
{
/// <summary>Minimum font size property.</summary>
public static readonly BindableProperty MinimumFontSizeProperty = BindableProperty.Create(
propertyName: nameof(MinimumFontSize),
returnType: typeof(int),
declaringType: typeof(AutoSizeLabel),
defaultValue: 17);
/// <summary>Maximum font size property.</summary>
public static readonly BindableProperty MaximumFontSizeProperty = BindableProperty.Create(
propertyName: nameof(MaximumFontSize),
returnType: typeof(int),
declaringType: typeof(AutoSizeLabel),
defaultValue: 24);
/// <summary>Gets or sets minimum font size.</summary>
public int MinimumFontSize
{
get
{
return (int)this.GetValue(MinimumFontSizeProperty);
}
set
{
this.SetValue(MinimumFontSizeProperty, value);
}
}
/// <summary>Gets or sets maximum font size.</summary>
public int MaximumFontSize
{
get
{
return (int)this.GetValue(MaximumFontSizeProperty);
}
set
{
this.SetValue(MaximumFontSizeProperty, value);
}
}
}
Droid Renderer
public class AutoSizeLabelRenderer : LabelRenderer
{
protected override bool ManageNativeControlLifetime => false;
protected override void Dispose(bool disposing)
{
Control.RemoveFromParent();
base.Dispose(disposing);
}
private AutoSizeLabel bindingValue = new AutoSizeLabel();
private AppCompatTextView appCompatTextView;
public AutoSizeLabelRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (e.NewElement == null || !(e.NewElement is AutoSizeLabel autoLabel) || Control == null) { return; }
//v8 and above supported natively, no need for the extra stuff below.
if (DeviceInfo.Version.Major >= 8)
{
Control?.SetAutoSizeTextTypeUniformWithConfiguration(bindingValue.MinimumFontSize, bindingValue.MaximumFontSize, 2, (int)ComplexUnitType.Sp);
return;
}
appCompatTextView = new AppCompatTextView(Context);
appCompatTextView.SetTextColor(Element.TextColor.ToAndroid());
appCompatTextView.SetMaxLines(1);
appCompatTextView.SetBindingContext(autoLabel.BindingContext);SetNativeControl(appCompatTextView);
TextViewCompat.SetAutoSizeTextTypeUniformWithConfiguration(Control, bindingValue.MinimumFontSize, bindingValue.MaximumFontSize, 2, (int)ComplexUnitType.Sp);
}
}
XAML Call
<renderer:AutoSizeLabel MinimumFontSize="17"
MaximumFontSize="24"
Style="{StaticResource SomeStyle}"
Text="{Binding SomeText}">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SomeCommand}"></TapGestureRecognizer>
</Label.GestureRecognizers>
</renderer:AutoSizeLabel>
This line is unnecessary.
private AutoSizeLabel bindingValue = new AutoSizeLabel();
Instead reference autoLabel. Alternatively I changed the check to
if (e.NewElement == null || Control == null) { return; }
and cast in the following line using
var autoSizeLabel = e.NewElement as AutoSizeLabel;
It appears the default binding trigger for an entry text is the TextChanged event. I want to defer updating the source until the blur event. In WPF there was the UpdateSourceTrigger parameter that could be set to modify the binding trigger, but there isn’t any documentation I’ve found on this in Xamarin.Form.
How can that be achieved in Xaramin.Forms with binding in XAML. For obvious reasons, I don’t want to manually handle it in the code behind.
This question is old but still actual. Especially for fields with decimal point...
First option to use Xamarin Community Toolkit EventToCommandBehavior (or similar implementations, like Prism). Then possible to bind "Unfocused" event to some command:
<Entry.Behaviors>
<xct:EventToCommandBehavior
EventName="Unfocused"
Command="{Binding MyCustomCommand}" />
</Entry.Behaviors>
Other option to add custom Entry component that handle this event, this option fits me better with numeric input with decimal point (float, double, decimal). This a little modified solution from MSDN forum Entry binding Decimal:
public class NumericEntry : Entry
{
#region Bindables
public static readonly BindableProperty NumericValueProperty = BindableProperty.Create(
"NumericValue",
typeof(decimal?),
typeof(NumericEntry),
null,
BindingMode.TwoWay,
coerceValue: (_, value) => (decimal?)value,
propertyChanged: (bindable, _, __) => SetDisplayFormat((NumericEntry)bindable)
);
public static readonly BindableProperty NumericValueFormatProperty = BindableProperty.Create(
"NumericValueFormat",
typeof(string),
typeof(NumericEntry),
"N0",
BindingMode.TwoWay,
propertyChanged: (bindable, _, __) => SetDisplayFormat((NumericEntry)bindable)
);
#endregion Bindables
#region Constructor
public NumericEntry()
{
Keyboard = Keyboard.Numeric;
Focused += OnFocused;
Unfocused += OnUnfocused;
}
#endregion Constructor
#region Events
private void OnFocused(object sender, FocusEventArgs e)
{
SetEditFormat(this);
}
private void OnUnfocused(object sender, FocusEventArgs e)
{
var numberFormant = CultureInfo.CurrentCulture.NumberFormat;
var _text = Text.Replace(".", numberFormant.NumberDecimalSeparator);
if (decimal.TryParse(_text, NumberStyles.Number, CultureInfo.CurrentCulture, out var numericValue))
{
var round = Convert.ToInt32(NumericValueFormat.Substring(1));
NumericValue = Math.Round(numericValue, round);
}
else
{
NumericValue = null;
}
SetDisplayFormat(this);
}
#endregion Events
#region Properties
public decimal? NumericValue
{
get => (decimal?)GetValue(NumericValueProperty);
set => SetValue(NumericValueProperty, value);
}
public string NumericValueFormat
{
get => (string)GetValue(NumericValueFormatProperty) ?? "N0";
set
{
var _value = string.IsNullOrWhiteSpace(value) ? "N0" : value;
SetValue(NumericValueFormatProperty, _value);
}
}
#endregion Properties
#region Methods
private static void SetDisplayFormat(NumericEntry textBox)
{
if (textBox.NumericValue.HasValue)
{
textBox.Text = textBox.NumericValue.Value.ToString(textBox.NumericValueFormat, CultureInfo.DefaultThreadCurrentCulture);
}
else
{
textBox.Text = string.Empty;
}
}
private static void SetEditFormat(NumericEntry textBox)
{
if (textBox.NumericValue.HasValue)
{
var numberFormant = CultureInfo.CurrentCulture.NumberFormat;
textBox.Text = textBox.NumericValue.Value.ToString(textBox.NumericValueFormat, CultureInfo.CurrentCulture).Replace(numberFormant.NumberGroupSeparator, string.Empty);
}
else
{
textBox.Text = string.Empty;
}
}
#endregion Methods
}
And use it like this:
// import our component
xmlns:ex="clr-namespace:BoganPos.Extensions"
//...
<ex:NumericEntry NumericValue="{Binding DecimalValue}" NumericValueFormat="F2" Placeholder="Placeholder"/>
Not sure if I formatted the question appropriately, please let me know if I did not. But I am trying to simply bind a background color to a value in my viewcell. I have this working, actually. The issue is when I update a value, I don't see the change in background color. The implementation is a bit complicated, but here's my code.
ViewCell (OnBindingContextChanged)
...
ShowReadOverlay.SetBinding(Xamarin.Forms.VisualElement.BackgroundColorProperty, new Xamarin.Forms.Binding(".", Xamarin.Forms.BindingMode.TwoWay, new XamarinMobile.Converters.GridCellBackgroundColorConverter(), null, null, null));
...
So essentially I just build my layout. I decided to only post the relevant code that sets the binding in my OnBindingContextChanged method. If anyone needs any other code I'd be glad to add it, just don't know if it's relevant. My ViewCell class is a simple class that just inherits ViewCell.
Here's my converter:
public class GridCellBackgroundColorConverter : Xamarin.Forms.IValueConverter
{
#region IValueConverter Members
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
try
{
var cell = (XamarinMobile.ViewModels.GridCellViewModel)value;
if(cell.HasRead)
{
//return with shadow
return Xamarin.Forms.Color.FromRgba(0,0,0,0.6);
} else
{
//return no shadow
return Xamarin.Forms.Color.FromRgba(0, 0, 0, 0.0);
}
} catch(System.Exception ex)
{
return null;
}
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
#endregion
}
Simple. It works. Now here's the tricky part. So the grid I'm describing, is a listview that contains cells of stories. A user will click on an image which will take them to a story page. When the user is in the story page, they can either go back to the grid to go to another story, or swipe left or right and they can get to another story that way. When a user goes to a story page from our grid, then the cell gets updated fine. BUT if a user swipes to another story NOT from the grid, that's where my issue is. In my story page I have logic that iterates through the grid cells, and finds the story you're currently on (the story you swiped to) and sees if it's in the grid, if it's in the grid, I update the cell's HasRead property. As such:
//find the cell in the grid (if exists)
ViewModels.GridCellViewModel cell = App.GridCells.Where(x => x.StoryId == App.Story.StoryId).FirstOrDefault();
if (cell != null)
{
cell.HasRead = true;
}
This works but... it doesn't trigger the value converter to change the property. What am I doing wrong? How can I get it so that I can update a property, and have it trigger my value converter?
My guess is that you're converter isn't triggering because you've technically bound to the viewcell itself, not the HasRead property. When you set HasRead, it will (assuming it's implementing INotifyPropertyChanged) fire a PropertyChangedEvent which would trigger the binding and call the value converter. However, since your binding is pointing to the viewcell itself, it will only trigger when that changes and ignore property changes elsewhere on that object.
A possible solution is to change the binding to point to HasRead (instead of '.'), and update your converter to expect the boolean directly rather than taking in a viewcell. This would be a better practice for a converter regardless.
That said, this is not really following the mvvm pattern that is generally recommended for xamarin forms apps. My suggestion would be to have a viewmodel that has a property that holds your story models (wrapped in their own StoryViewModels if you need logic there) and make sure the VM and Model classes implement INotifyPropertyChanged. Make the VM the datacontext for the page, bind the list to your listview source and your listview itemtemplate contents will bind to each individual story. Each story can have a HasRead property that binds to the background color via your updated converter.
Like this:
<ContentPage
x:Class="Stack_Stories.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Stack_Stories">
<ContentPage.BindingContext>
<local:StoriesViewModel x:Name="VM" />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<local:StoryReadBackgroundColorConverter x:Key="HasReadColor" />
</ResourceDictionary>
</ContentPage.Resources>
<ListView ItemsSource="{Binding Stories}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="StoryGrid" BackgroundColor="{Binding HasRead, Converter={StaticResource HasReadColor}}">
<Button Command="{Binding ToggleReadCommand}" Text="{Binding Name}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
public class StoryViewModel : INotifyPropertyChanged
{
private string _name = "";
public string Name
{
get { return _name; }
set { _name = value; OnPropertyChanged(); }
}
private bool _hasRead = false;
public bool HasRead
{
get { return _hasRead; }
set { _hasRead = value; OnPropertyChanged(); }
}
private Command _toggleRead;
public Command ToggleReadCommand
{
get
{
return _toggleRead
?? (_toggleRead = new Command(() => HasRead = !HasRead));
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class StoriesViewModel : INotifyPropertyChanged
{
public StoriesViewModel()
{
// add sample stories
Stories.Add(new StoryViewModel { Name = "First Story" });
Stories.Add(new StoryViewModel { Name = "Second Story", HasRead=true });
}
private ObservableCollection<StoryViewModel> _stories = new ObservableCollection<StoryViewModel>();
public ObservableCollection<StoryViewModel> Stories
{
get { return _stories; }
set { _stories = value; OnPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class StoryReadBackgroundColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (!(value is bool)) return null;
return (bool)value ? Color.FromRgba(0, 0, 0, 0.6) : Color.FromRgba(0, 0, 0, 0.0);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Here is my custom control.It inherits [Height] property from WebControl class.I want to access it in constructor for calculating other properties.But its value is always 0.Any idea?
public class MyControl : WebControl, IScriptControl
{
public MyControl()
{
AnotherProperty = Calculate(Height);
.......
}
my aspx
<hp:MyControl Height = "31px" .... />
Markup values are not available in your control's constructor but they are available from within your control's OnInit event.
protected override void OnInit(EventArgs e)
{
// has value even before the base OnInit() method in called
var height = base.Height;
base.OnInit(e);
}
As #andleer said markup has not been read yet in control's constructor, therefore any property values that are specified in markup are not available in constructor. Calculate another property on demand when it is about to be used and make sure that you not use before OnInit:
private int fAnotherPropertyCalculated = false;
private int fAnotherProperty;
public int AnotherProperty
{
get
{
if (!fAnotherPropertyCalculated)
{
fAnotherProperty = Calculate(Height);
fAnotherPropertyCalculated = true;
}
return fAnotherProperty;
}
}