Quickly and easily save properties of your UI controls with Telerik’s Persistence Framework in WPF

Many applications require a way to store the user’s state so that it can be restored when the application is restarted.  For example,  you might want to preserve the user’s font choice or book selection.  There are numerous approaches to solving this problem in WPF, but  none is easier than using the Telerik PersistenceFramework.

All that is required is three very simple steps:

1. Give each control, whether Telerik or not, a PersistenceManager.StorageID (an arbitrary but unique string)
2. When you want to store state, call SaveToStorage on the IsolatedStorageProvider
3. When you want to restore, call LoadFromStorage on the IsolatedStorageProvider

To see this in action, create a new Telerik application and add the following references:

• Telerik.Windows.PersistenceFramework
• Telerik.Windows.Controls
• Telerik.Windows.Controls.Navigation
• Telerik.Windows.Data

In the XAML we’ll create three controls plus we’ll add two buttons.  The first control will be a tree-view.  Notice that in the declaration of the RadTreeView control we add the PersistenceManager.StorageID of “treeView”,

<Grid>
   <StackPanel Background="Wheat">
      <telerik:RadTreeView x:Name="treeView"
               telerik:PersistenceManager.StorageId="treeView"
               Margin="5">
         <telerik:RadTreeViewItem Header="Beverages">
            <telerik:RadTreeViewItem Header="Chai" />
            <telerik:RadTreeViewItem Header="Chang" />
            <telerik:RadTreeViewItem Header="Ipoh Coffee" />
            <telerik:RadTreeViewItem Header="Chartreuse verte" />
            <telerik:RadTreeViewItem Header="Sasquatch Ale" />
         </telerik:RadTreeViewItem>
         <telerik:RadTreeViewItem Header="Condiments">
            <telerik:RadTreeViewItem Header="Aniseed Syrup" />
            <telerik:RadTreeViewItem Header="Genen Shouyu" />
            <telerik:RadTreeViewItem Header="Gula Malacca" />
            <telerik:RadTreeViewItem
                     Header="Louisiana Hot Spiced Okra" />
            <telerik:RadTreeViewItem
                     Header="Louisiana Fiery Hot Pepper Sauce" />
         </telerik:RadTreeViewItem>
         <telerik:RadTreeViewItem Header="Confections">
            <telerik:RadTreeViewItem
                     Header="Teatime Chocolate Biscuits" />
            <telerik:RadTreeViewItem
                     Header="Sir Rodney's Marmalade" />
            <telerik:RadTreeViewItem Header="Zaanse koeken" />
            <telerik:RadTreeViewItem Header="Chocolade" />
            <telerik:RadTreeViewItem Header="Maxilaku" />
            <telerik:RadTreeViewItem Header="Valkoinen suklaa" />
         </telerik:RadTreeViewItem>
      </telerik:RadTreeView>
 

The second control will be a standard ComboBox which we’ll pre-populate with four entries. Again, notice that in the declaration of the ComboBox (not a Telerik control) we add the telerik:PersistenceManager.StorageID of “ComboBox”,

<ComboBox telerik:PersistenceManager.StorageId="comboBox"
          Width="150"
          HorizontalAlignment="Left"
          Margin="5">
   <ComboBoxItem Content="Item 1" />
   <ComboBoxItem Content="Item 2" />
   <ComboBoxItem Content="Item 3" />
   <ComboBoxItem Content="Item 4" />
</ComboBox>
 

We then add two TextBlocks, one to act as a prompt, and the second to collect the user’s name. The second is given a StorageID of "name."

<StackPanel Orientation="Horizontal" Margin="5">
   <TextBlock Text="Your name: " Margin="5" />
   <TextBox Name="name"
            Margin="5"
            telerik:PersistenceManager.StorageId="name"
            Width="100"
            Height="30" />
</StackPanel>
 

Finally, we add two buttons: Save and Restore. Their event handlers manage storage to Isolated Storage and restoration, respectively,  The Save button event handler creates an instance of the IsolatedStorageProvider class and then calls SaveToStorage on that instance.  It then informs the user of success.

private void Save_Click( object sender, RoutedEventArgs e )
{
   IsolatedStorageProvider isoProvider = 
                new IsolatedStorageProvider();
   isoProvider.SaveToStorage();
   MessageBox.Show( "Saved" );
}
 

The restore button’s event handler also obtains an instance of IsolatedStorageProvider, and calls LoadFromStorage with no arguments – all stored items are restored,

private void Restore_Click( object sender, RoutedEventArgs e )
{
   IsolatedStorageProvider isoProvider = 
           new IsolatedStorageProvider();
   isoProvider.LoadFromStorage();
 
}
 

To test that our approach works, you can set each of the controls, click on Save, and then change all the controls and click on Restore.  The saved state is restored, overwriting any changes you made subsequent to clicking Save.

[Note that in production code you probably won’t add save and restore buttons, but will instead call the save and restore code on shut down and start up respectively. ]

Persisting Window State

Next, try this: add a StorageID to your window declaration,

<Window x:Class="RadPersisenceFramework2.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow"
        Height="350"
        Width="525"
        telerik:PersistenceManager.StorageId="MainWindow">

Now, move the window, save and the move again.  Hit restore and the window moves back to its saved position(!). 

Try maximizing the window and saving it, then un-maximize and hit restore – hey! presto! it returns to maximized.  The ability to save the state and position of the window alone is worth the price of admission.