4.1 A persistent light switch using SimpleStorage
In this section we will focus on a solution based on the SimpleStorage NuGet package2, which is our own development and allows you to store any serializable object from within shared code. We will implement an app with a light switch, which toggles the page’s background color from white to gray and vice versa. Furthermore, it stores the current state persistently, so that the current state won’t get lost when killing the app.
In order to use SimpleStorage, we need to add the corresponding package in both platform-specific projects. On Android you also need to add one line to MainActivity.OnCreate before Forms.Init:
SimpleStorage.SetContext(ApplicationContext);
Back in the shared project we can define a persistent property IsLightOn of our main class App.
readonly SimpleStorage storage = SimpleStorage.EditGroup("light");
public bool IsLightOn {
get { return storage.Get<bool>("on", true); }
set { storage.Put<bool>("on", value); }
}
The commands for reading and writing values from the persistent storage consist of the following parts:
- EditGroup("light") defines the storage group. Small apps will usually need one group only. But for larger apps you might want to organize all the persistent variables into groups. It is recommended to store the storage group in a member variable like storage in this case to avoid duplicate code.
- Get and Put are methods to read and write persistent values. Asynchronous counterparts exist as well.
- <bool> is the data type of the persistent variable. This can be any serializable class.
- true is our default value for on in case there is no persistent variable with this name, yet.
var label = new Label { Text = "Light?" };
var lightSwitch = new Switch();
Then we bind the IsToggled property of the latter to the App’s IsLightOn property. Therefore we need to define the BindingContext, i.e. that object we’re referring to, and the pair of properties we are binding, the IsToggledProperty and IsLightOn:
lightSwitch.BindingContext = this;
lightSwitch.SetBinding(Switch.IsToggledProperty, "IsLightOn");
The MainPage will contain a StackLayout with these two visual elements centered on the screen:
MainPage = new ContentPage {
Content = new StackLayout {
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = { label, lightSwitch },
},
};
In order to see any visual feedback we define another binding between the page’s BackgroundColor and the lightSwitch’s IsToggled property:
MainPage.BindingContext = lightSwitch;
MainPage.SetBinding(VisualElement.BackgroundColorProperty, "IsToggled", converter: new ToggledToColorConverter());
Note that we need a value converter between the boolean IsToggled and the BackgroundColor of type Color. This can be done using a custom ToggledToColorConverter derived from IValueConverter:
class ToggledToColorConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? Color.White : Color.Gray;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
We only need to implement the forward conversion, which returns either Color.White or Color.Graydepending on the boolean parameter value.