I'm implementing MVVM and trying to save a value from my Xaml page's Switch. I would like to have this value stored into the Application's properties. Currently, saving the value where I am triggers OnPropertyChanged again, and the value is never updated.
I have a BaseViewModel class:
public class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected void SetValue<T>(ref T backingField, T value, [CallerMemberName] string propertyName = null)
{
if (EqualityComparer<T>.Default.Equals(backingField, value))
return;
backingField = value;
OnPropertyChanged(propertyName);
}
}
In my ViewModel:
private bool _sizeToggled;
public bool SizeToggled
{
get { return _sizeToggled; }
set
{
SetValue(ref _sizeToggled, value);
OnPropertyChanged(nameof(SizeToggled));
SaveValue();
}
}
private void SaveValue(){
Application.Current.Properties["SizeToggled"] = SizeToggled;
}
And my Xaml code:
<StackLayout Orientation="Horizontal" Padding="10,0,0,0">
<Label Text="Size:" FontAttributes="Bold"/>
<Switch IsToggled="{Binding SizeToggled}"
HorizontalOptions="EndAndExpand"/>
</StackLayout>
How can I implement my SaveValue() Method so that the Application's Properties will be stored/updated when the value is updated?
have you checked that the vm is really your datacontext?
It appears that there's an issue when saving multiple Application Properties at the same time.
Separating the properties out of the save method and
developer.xamarin.com/guides/xamarin-forms/… try to add this Application.Current.SavePropertiesAsync() – Cole Xia
Forcing the save solved the problem.
Related
I implemented language changing trough AppResources.resx files, I have 2 of these: AppResources.resx and AppResources.fr.resx. Switching the language with the following code:
private void Language_switch(object sender, EventArgs e)
{
var lang_switch = Lang.Text;
if (lang_switch == "FR")
{
CultureInfo language = new CultureInfo("fr");
Thread.CurrentThread.CurrentUICulture = language;
AppResources.Culture = language;
}
else
{
CultureInfo language = new CultureInfo("");
Thread.CurrentThread.CurrentUICulture = language;
AppResources.Culture = language;
}
Application.Current.MainPage = new NavigationPage(new PointsPage());
}
The language switches fine but whenever I do, the app turns dark and the AppShell seems to break, it only shows the top bar with toolbar items i made (in what seems to be the standard xamarin color) and showing what seems to be it trying to show the navigation at the bottom, but this only looks like a bar but doesn't seem to have navigation on it and doesn't have any of the labels for navigation.
The content on the page also seems to overlap with this bar going over it if I scroll down. If I press the switch button again it does still switch languages but stay in this dark mode. I don't have any of the dark color set in my app and don't have a dark mode implemented.
It also seems to be doing this on every single page I do it on. How can i stop this from happening so it uses the layout i have made for my app and doesn't turn dark?
Edit: I found out that problem isn't in the language switch. When I go to another page just using
Application.Current.MainPage = new NavigationPage(new PointsPage());
and removing the the language switch code it still does the weird thing where it changes colors. From what it looks like to me is that the page gets put on top without the AppShell moving to be on top of that. Is there a way to reload the AppShell?
Edit2: I managed to fix it. As I suspected the AppShell wasn't reloading and wasn't being put on top of the reloaded page. I added
Application.Current.MainPage = new AppShell();
underneath the page reload and now everything is working
When you use the .resx file to make the localization, create the resx file with the matched file name, when you change the system language, reopen the app would show the matched resource your set in .resx.
For more details about it, you could refer to the MS docs. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/text?pivots=windows
Code sample: https://github.com/xamarin/xamarin-forms-samples/tree/main/UsingResxLocalization
If you want to change it at runtime, you could use ResourceManager. It provides convenient access to culture-specific resources at runtime.
I make a simple example for your reference.
MainPage: String1, Settings are the key in .resx file.
<StackLayout>
<Label Text="{Binding Resources[String1]}"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Button Text="{Binding Resources[Settings]}"
HorizontalOptions="Center"
Clicked="Button_Clicked" />
</StackLayout>
Code behind:
public MainPage()
{
InitializeComponent();
this.BindingContext = new MainPageViewModel();
}
private void Button_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new SettingsPage());
}
SettingsPage:
<StackLayout>
<Label Text="{Binding Resources[PickLng]}" />
<Picker ItemsSource="{Binding Languages}" SelectedItem="{Binding SelectedLanguage, Mode=TwoWay}" />
</StackLayout>
Code behind:
public SettingsPage()
{
InitializeComponent();
BindingContext = new SettingsViewModel();
}
ViewModel:
public class CultureChangedMessage
{
public CultureInfo NewCultureInfo { get; private set; }
public CultureChangedMessage(string lngName)
: this(new CultureInfo(lngName))
{ }
public CultureChangedMessage(CultureInfo newCultureInfo)
{
NewCultureInfo = newCultureInfo;
}
}
public class LocalizedResources : INotifyPropertyChanged
{
const string DEFAULT_LANGUAGE = "en";
readonly ResourceManager ResourceManager;
CultureInfo CurrentCultureInfo;
public string this[string key]
{
get
{
return ResourceManager.GetString(key, CurrentCultureInfo);
}
}
public LocalizedResources(Type resource, string language = null)
: this(resource, new CultureInfo(language ?? DEFAULT_LANGUAGE))
{ }
public LocalizedResources(Type resource, CultureInfo cultureInfo)
{
CurrentCultureInfo = cultureInfo;
ResourceManager = new ResourceManager(resource);
MessagingCenter.Subscribe<object, CultureChangedMessage>(this,
string.Empty, OnCultureChanged);
}
private void OnCultureChanged(object s, CultureChangedMessage ccm)
{
CurrentCultureInfo = ccm.NewCultureInfo;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Item"));
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class ViewModelBase : INotifyPropertyChanged
{
public LocalizedResources Resources
{
get;
private set;
}
public ViewModelBase()
{
Resources = new LocalizedResources(typeof(AppResources), App.CurrentLanguage);
}
public void OnPropertyChanged([CallerMemberName] string property = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class MainPageViewModel : ViewModelBase
{ }
public class SettingsViewModel : ViewModelBase
{
public List<string> Languages { get; set; } = new List<string>()
{
"EN",
"FR"
};
private string _SelectedLanguage;
public string SelectedLanguage
{
get { return _SelectedLanguage; }
set
{
_SelectedLanguage = value;
SetLanguage();
}
}
public SettingsViewModel()
{
_SelectedLanguage = App.CurrentLanguage;
}
private void SetLanguage()
{
App.CurrentLanguage = SelectedLanguage;
MessagingCenter.Send<object, CultureChangedMessage>(this,
string.Empty, new CultureChangedMessage(SelectedLanguage));
}
}
In a Xamarin app I’m trying to bind a textcolor with a property in Message model.
public class Message : INotifyPropertyChanged
{
public string text { get; set; }
public Color color { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
}
The task is, when I click on a label in a collectionview the text should change to Gray.
I can change the color in the ObservableCollection:
this.messages = new ObservableCollection();
(that’s works, and if I delete an entry in the ObservableCollection the screen updates)
But when I change the color in the message model, the screen doesn’t update.
I use MVVMhelpers, and I would like to use that to solve the problem, if possible.
best regards..
You could change the item color to gray when you click the item to triger the SelectionChanged event of CollectionView.
Xaml:
<CollectionView ItemsSource="{Binding messages}" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding text}" TextColor="{Binding color}"></Label>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Code behind:
public partial class Page2 : ContentPage
{
public ObservableCollection<Message> messages { get; set; }
public Page2()
{
InitializeComponent();
messages = new ObservableCollection<Message>()
{
new Message(){ text="A", color="Red"},
new Message(){ text="B", color="Red"},
new Message(){ text="C", color="Red"},
};
this.BindingContext = this;
}
private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var previousItem = e.PreviousSelection.FirstOrDefault() as Message;
var currentItem = e.CurrentSelection.FirstOrDefault() as Message;
currentItem.color = "Gray";
if (previousItem!=null)
{
previousItem.color = "Red";
}
}
}
public class Message : INotifyPropertyChanged
{
private string _text;
public string text
{
get
{
return _text;
}
set
{
_text = value;
OnPropertyChanged("text");
}
}
private string _color;
public string color
{
get
{
return _color;
}
set
{
_color = value;
OnPropertyChanged("color");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
super, great thanks.
I should also add
<DataTemplate x:DataType="{x:Type Models:Message}">
I am new with Xamarin.Forms, I have a listview with an item source.
The ItemSource of the ListView is an ObserverableCollection
Unfortuntaley, when I remove an item from the ItemSource, the ItemDisapperaing event is not trigged. Yes, the list item is removed from the UI in the Android device.
However I implemented the ItemAppearing and that works fine! It triggered.
Adding item working scenario:
The ShopCart.Instance.AddItem(randomItem) called.
ShopItemListView.ItemsSource is refreshed with the newly added item.
TotalAmount's Text is updated with the right amount.
So the ShopItem_NewItemAdded function is called!
Clearing items from Shopcart scenario (not working)
ShopCart.Instance.Clear() called.
ShopItemListView.ItemShource will be empty! The items not on the UI!
But the TotalAmount's text does not changed to 0.0! It still has the previous value.
It seems on the UI element the TotalAmount is not refreshed! In Debug I see after the Clear the ShopItemListView.ItemsSource list is empty.
So the ShopItem_ItemRemoved function is not called!
Here the Xaml.cs
public ShopView()
{
InitializeComponent();
BindingContext = new ShopViewModel();
ShopItemListView.ItemsSource = Shop.Instance.ShopItems;
// This is triggered, it works
ShopItemListView.ItemAppearing += ShopItem_NewItemAdded;
// This event is not triggered, it does not work
ShopItemListView.ItemDisappearing += ShopItem_ItemRemoved;
}
// This event is not triggered, it does not work
private void ShopItem_ItemRemoved(object sender, ItemVisibilityEventArgs e)
{
// If I put a breakpoint here the debugger never comes into this method
TotalAmount.Text = Shop.Instance.ShopItems.Sum(si => si.Price).ToString();
if (Shop.Instance.ShopItems.Count == 0) {
ShopInformation.IsVisible = false;
}
}
// This is triggered, it works.
private void ShopItem_NewItemAdded(object sender, ItemVisibilityEventArgs e)
{
TotalAmount.Text = Shop.Instance.ShopItems.Sum(si => si.Price).ToString();
ShopInformation.IsVisible = true;
}
Here is the shopcart singleton instance
public sealed class ShopCart : INotifyPropertyChanged
{
private static readonly ShopCart _instance = new ShopCart();
private ShopCart()
{
ShopItems = new ObservableCollection<ShopCartItem>();
}
public static ShopCart Instance
{
get
{
return _instance;
}
}
public ObservableCollection<ShopCartItem> ShopItems { get; set; }
public void AddItem(ShopCartItem ShopCartItem)
{
ShopItems.Add(ShopCartItem);
OnPropertyChanged("ShopItems");
}
public void Clear()
{
ShopItems.Clear();
OnPropertyChanged("ShopItems");
}
#region INotifyPropertyChanged Implementation
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
The ShopCart implement the INotifyPropertyChanged interface. But it seems the UI element is not notified.
How can I refresh the TotalAmount Label on the UI after I removed every shop items from the shop cart?
Maybe you mistake the usage of the ItemDisappearing. This method is for virtualization usage only. It is not guaranteed to fire for all visible items when the List is removed from the screen.
It means if you have a list of 100 items, but you can only see 10 at a time because of the size of the cells once you scroll down and a new cell comes into view, and the top cell scrolls off the screen the ItemDisappearing event will fire.
If you just want to show the listView's ItemsSource(in your case ShopItems's Count) count on the screen. You can use Binding and Converter:
Create a converter firstly:
public class ArrayToCountConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
ObservableCollection<ShopCartItem> collection = value as ObservableCollection<ShopCartItem>;
return "There are" + collection.Count + "items";
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then use it like:
<ContentPage.Resources>
<ResourceDictionary>
<local:ArrayToCountConverter x:Key="ArrayToCountConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<Label Text="{Binding ShopItems, Converter={StaticResource ArrayToCountConverter}}"/>
Also you need to set the BindingContext:
public ShopCart shopCart = ShopCart.Instance;
public MainPage()
{
InitializeComponent();
this.BindingContext = shopCart;
MyListView.ItemsSource = shopCart.ShopItems;
}
In this way when you add or clear the ShopItems in the ViewModel, the label will show the count.
I think I got a threading problem in my UWP app.
I want to do a very simple thing:
a UI with 2 numeric fields;
if a numeric value is typed in field1, I want field2 to be set with a ratio of field1 (example: field2 = ratio * field1).
I am using x:Bind and TextChanging events. For unknown reasons, I wasn't able in the XAML to "call" the TextChanging event without having an exception at startup. Therefore, I am using the Loaded event.
Here's my model class, simply called MyModel:
public class MyModel : INotifyPropertyChanged
{
private readonly uint r1 = 3;
private uint _field1;
public uint Field1
{
get { return this._field1; }
set
{
this.Set(ref this._field1, value);
if (value == 0)
{
Field2 = 0;
}
else
{
Field2 = value * r1;
}
}
}
private uint _field2;
public uint Field2
{
get { return this._field2; }
set
{
this.Set(ref this._field2, value);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisedPropertyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected bool Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
if (Equals(storage, value))
{
return false;
}
else
{
storage = value;
this.RaisedPropertyChanged(propertyName);
return true;
}
}
}
My ViewModel:
public class MyModelViewModel : INotifyPropertyChanged
{
public MyModel MyModel { get; set; }
public MyModelViewModel()
{
// Initialisation de notre page
this.MyModel = new MyModel()
{
Field1 = 0
};
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
my code behind (I'm filtering the input to avoid a cast exception):
public sealed partial class MainPage : Page
{
public MyModelViewModel ViewModel { get; set; } = new MyModelViewModel();
public MainPage()
{
this.InitializeComponent();
}
private void InitField1(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
field1.TextChanging += field1_TextChanging;
}
private void InitField2(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
field2.TextChanging += field2_TextChanging;
}
private void field1_TextChanging(TextBox sender, TextBoxTextChangingEventArgs args)
{
var error = errorTextBlock;
error.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
Regex regex = new Regex("[^0-9]+"); // All but numeric
if (regex.IsMatch(sender.Text))
{
error.Text = "Non numeric char";
error.Visibility = Windows.UI.Xaml.Visibility.Visible;
sender.Text = this.ViewModel.MyModel.Field1.ToString();
}
else
{
this.ViewModel.MyModel.Field1 = Convert.ToUInt32(sender.Text);
}
}
private void field2_TextChanging(TextBox sender, TextBoxTextChangingEventArgs args)
{
var error = errorTextBlock;
error.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
Regex regex = new Regex("[^0-9]+");
if (regex.IsMatch(sender.Text))
{
error.Text = "Non numeric char";
error.Visibility = Windows.UI.Xaml.Visibility.Visible;
sender.Text = this.ViewModel.MyModel.Field2.ToString();
}
else
{
this.ViewModel.MyModel.Field2 = Convert.ToUInt32(sender.Text);
}
}
}
Finally, my XAML:
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="errorTextBlock" Text="" Visibility="Collapsed" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Field 1" />
<TextBox Grid.Row="1" Grid.Column="1" x:Name="field1" Text="{x:Bind ViewModel.MyModel.Field1, Mode=OneWay}" Loaded="InitField1" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Field 2" />
<TextBox Grid.Row="2" Grid.Column="1" x:Name="field2" Text="{x:Bind ViewModel.MyModel.Field2, Mode=OneWay}" Loaded="InitField2" />
At runtime, if I type a non numeric char in field1, the input is filtered, field1 returns to its previous value without the screen "blinking" (that's why I use the TextChanging event and not the TextChanged). Perfect! But if I type a numeric char, field1 is correctly updated (I can see that with breakpoint), but when field2 is set, I got a native exception when RaisedPropertyChanged is called:
I'm suspecting some kind of threading error, but I'm pretty new to this kind of development. Any idea? Thanks!
Updated to use a separate 'Model' class
Here's how you can create a text box that when a number (integer) is entered into it another text box shows the entered number multiplied by another number.
Here's the UI. Note the Mode used for each binding and the second textbox is readonly because that's just for display.
<StackPanel>
<TextBlock Text="Value 1" />
<TextBox Text="{x:Bind ViewModel.MyModel.Value1, Mode=TwoWay}" />
<TextBlock Text="Value 2" />
<TextBox Text="{x:Bind ViewModel.MyModel.Value2, Mode=OneWay}" IsReadOnly="True" />
</StackPanel>
On the page I declare my Model
public MyViewModel ViewModel { get; set; } = new MyViewModel();
My ViewModel is very simple
public class MyViewModel
{
public MyModel MyModel { get; set; } = new MyModel();
}
The Model class contains the logic
public class MyModel : INotifyPropertyChanged
{
private string _value1;
public string Value1
{
get { return _value1; }
set
{
if (_value1 != value)
{
_value1 = value;
// Cause the updated value to be displayed on the UI
OnPropertyChanged(nameof(Value1));
// Is the entered value a number (int)?
int numericValue;
if (int.TryParse(value, out numericValue))
{
// It's a number so set the other value
// multiplied by the ratio
Value2 = (numericValue * 3).ToString();
}
else
{
// A number wasn't entered so indicate this
Value2 = "NaN";
}
// Cause the updated value2 to be displayed
OnPropertyChanged(nameof(Value2));
}
}
}
// We can use the automatic property here as don't need any logic
// relating the getting or setting this property
public string Value2 { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
With the above, when a number is entered for Value1 then Value2 will show a number three times as much (because I've set the ratio of 3).
You may notice that if you try the above that the change doesn't happen immediately and Value2 is only updated when the focus leaves the Value1 text box. This is because, by default, the two-way binding is only updated when focus is lost. This can easily be changed though.
If instead of using the new x:Bind method of binding we use the traditional Binding method we can force the binding to be updated whenever we want. Say, when the text is changed.
Modify the TextBox declaration like this:
<TextBox Text="{Binding ViewModel.Value1, Mode=TwoWay}"
TextChanged="TextBox_OnTextChanged" />
Note that the binding syntax is different and we've added an event.
The handler of the event is
private void TextBox_OnTextChanged(object sender, TextChangedEventArgs e)
{
var be = (sender as TextBox).GetBindingExpression(TextBox.TextProperty);
be.UpdateSource();
}
This forces the binding to update but there's another change we must make as well.
With the x:Bind syntax it tries to bind to the page. With the older Binding syntax it binds to the DataContext of the page. To make these the same, update the page constructor like this
public MainPage()
{
this.InitializeComponent();
this.DataContext = this;
}
Now the app will work again and Value2 will be updated after every key press in the Value1 text box.
I Am working with a ListView Control in XF application. My XAML Code looks like this.
<ListView ItemsSource="{Binding RechargeList}" HasUnevenRows="True" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Path=SelectedParkingID}" TextColor="Red" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
While my code behind looks like
private ObservableCollection<Recharge> _RechargeList = new ObservableCollection<Recharge>();
public ObservableCollection<Recharge> RechargeList
{
get
{
return _RechargeList;
}
set
{
SetProperty(ref _RechargeList, value);
}
}
And I add Items to Collection in DelegateCommand Event
RechargeList.Add(new Recharge() { SelectedParkingIDParkingID = ParkingID, RechargeAmount = double.Parse(RechargeAmount), BalanceAmount = 10 });
However, the Listview fails to refresh. Could some one help me ?
Looks like you have a typo
<TextCell Text="{Binding Path=SelectedParkingID}" TextColor="Red" />
Should be
<TextCell Text="{Binding Path=SelectedParkingIDParkingID }" TextColor="Red" />
based on what your model looks like. If you try to bind to a property that doesn't exist, it fails softly. So you're adding an item, but the TextCell doesn't render since it has no content.
Please try to implement INotifyPropertyChanged interface in your class.
public class Data : INotifyPropertyChanged
{
// boiler-plate
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
protected bool SetField<T>(ref T field, T value, string propertyName)
{
if (EqualityComparer<T>.Default.Equals(field, value)) return false;
field = value;
OnPropertyChanged(propertyName);
return true;
}
// props
private string name;
public string Name
{
get { return name; }
set { SetField(ref name, value, "Name"); }
}
}
Each property is then just something like:
private string name;
public string Name
{
get { return name; }
set { SetField(ref name, value, "Name"); }
}