Introduction
In this article we will learn how to store and retrieve data. Here we show reading and writing files and responding to roaming events. In Metro Style Applications we have to run code and we get an output which is shown below. With the help of this example we adjust the reading and writing settings. In this example read, write and delete a composite setting and use containers. In the MainPage.xaml we have to make some changes in this Metro Application.
So, we use the following steps to make this application.
Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> Visual C# -> Windows Metro Style -> Application
- Rename this Application
![homepage.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.
![solutiionexplorer.gif]()
Step 3 : The MainPage.xaml file is as in the following code.
Code : Let us see the code which is given below.
<UserControl x:Class="ApplicationData.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="1366">
<Grid x:Name="LayoutRoot" Background="LightYellow">
<!--App Orientation States-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Full"/>
<VisualState x:Name="Fill">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>40,20,40,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">
<DiscreteObjectKeyFrame KeyTime="0" Value="700">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>40,20,40,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">
<DiscreteObjectKeyFrame KeyTime="0" Value="700">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>20,20,20,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Vertical</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">
<DiscreteObjectKeyFrame KeyTime="0" Value="250">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0,0,10,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot" Background="LightGreen" Margin="100,20,100,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Content -->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">
<StackPanel x:Name="ContentPanel">
<StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">
<StackPanel>
<TextBlock Text="Input" Style="{StaticResource H2Style}" Foreground="Pink"/>
<TextBlock Text="Select Options" Style="{StaticResource H3Style}"/>
<ListBox x:Name="SectionList" Margin="0,0,20,0" HorizontalAlignment="Left">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem x:Name="Section1">
<TextBlock Text="1. Read, write and delete a setting" Style="{StaticResource ListBoxTextStyle}"/>
</ListBoxItem>
<ListBoxItem x:Name="Section2">
<TextBlock Text="2. Read, write and delete a composite setting" Style="{StaticResource ListBoxTextStyle}"/>
</ListBoxItem>
<ListBoxItem x:Name="Section3">
<TextBlock Text="3. Use containers" Style="{StaticResource ListBoxTextStyle}"/>
</ListBoxItem>
<ListBoxItem x:Name="Section4">
<TextBlock Text="4. Respond to roaming" Style="{StaticResource ListBoxTextStyle}"/>
</ListBoxItem>
<ListBoxItem x:Name="Section5">
<TextBlock Text="5. Read and write a file" Style="{StaticResource ListBoxTextStyle}"/>
</ListBoxItem>
</ListBox>
</StackPanel>
<StackPanel Margin="0,31,0,0" >
<TextBlock Text="Description:" Style="{StaticResource H3Style}"/>
<StackPanel x:Name="Description" MaxWidth="900">
<!-- Section 1 -->
<StackPanel x:Name="Section1Input">
<TextBlock TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left">
Use <Bold>Windows.Storage.ApplicationData.Current.LocalSettings</Bold> to read, write, and delete a setting.
</TextBlock>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button x:Name="Section1WriteSetting" Content="Write setting" Margin="0,0,10,0" Click="Section1WriteSetting_Click"/>
<Button x:Name="Section1DeleteSetting" Content="Delete setting" Margin="0,0,10,0" Click="Section1DeleteSetting_Click"/>
</StackPanel>
</StackPanel>
<!-- Section 2 -->
<StackPanel x:Name="Section2Input" Visibility="Collapsed">
<TextBlock TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left">
Use <Bold>Windows.Storage.ApplicationData.Current.RoamingSettings</Bold> and
<Bold>Windows.Storage.ApplicationDataCompositeValue</Bold> to read, write, and delete a composite setting.
</TextBlock>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button x:Name="Section2WriteCompositeSetting" Content="Write composite setting" Margin="0,0,10,0"
Click="Section2WriteCompositeSetting_Click"/>
<Button x:Name="Section2DeleteCompositeSetting" Content="Delete composite setting" Margin="0,0,10,0"
Click="Section2DeleteCompositeSetting_Click"/>
</StackPanel>
</StackPanel>
<!-- Section 3 -->
<StackPanel x:Name="Section3Input" Visibility="Collapsed">
<TextBlock TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left">
Use <Bold>Windows.Storage.ApplicationData.Current.LocalSettings.CreateContainer</Bold> and
<Bold>Windows.Storage.ApplicationData.Current.LocalSettings.DeleteContainer</Bold> to read, write, and delete a setting in a container.
</TextBlock>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button x:Name="Section3CreateContainer" Content="Create container" Margin="0,0,10,0" Click="Section3CreateContainer_Click"/>
<Button x:Name="Section3DeleteContainer" Content="Delete container" Margin="0,0,10,0" Click="Section3DeleteContainer_Click"/>
<Button x:Name="Section3WriteSetting" Content="Write setting" Margin="0,0,10,0" Click="Section3WriteSetting_Click"/>
<Button x:Name="Section3DeleteSetting" Content="Delete setting" Margin="0,0,10,0" Click="Section3DeleteSetting_Click"/>
</StackPanel>
</StackPanel>
<!-- Section 4 -->
<StackPanel x:Name="Section4Input" Visibility="Collapsed">
<TextBlock TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left">
Use <Bold>Windows.Storage.ApplicationData.Current.DataChanged</Bold> to respond to roaming events.
</TextBlock>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="Name: " Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<TextBox x:Name="Section4UserName" IsReadOnly="false" Width="300" Margin="0,10,0,0" TextWrapping="Wrap" Text="" />
<Button x:Name="Section4SimulateRoaming" Content="Simulate roaming" Margin="0,0,10,0" Click="Section4SimulateRoaming_Click"/>
</StackPanel>
</StackPanel>
<!-- Section 5 -->
<StackPanel x:Name="Section5Input" Visibility="Collapsed">
<TextBlock TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left">
Use <Bold>Windows.Storage.ApplicationData.Current.RoamingFolder</Bold> to read and write to a file in the application's roaming folder.
</TextBlock>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button x:Name="Section5WriteTimestamp" Content="Write timestamp to file" Margin="0,0,10,0" Click="Section5WriteTimestamp_Click"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
<!-- Output section -->
<TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>
<StackPanel x:Name="Output" HorizontalAlignment="Left">
<!-- Section 1-->
<StackPanel x:Name="Section1Output">
<TextBlock x:Name="Section1Output_TextBlock" Text="No Output available." TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}"/>
</StackPanel>
<!-- Section 2 -->
<StackPanel x:Name="Section2Output" >
<TextBlock x:Name="Section2Output_TextBlock" Text="No Output available." TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}"/>
</StackPanel>
<!-- Section 3 -->
<StackPanel x:Name="Section3Output" >
<TextBlock x:Name="Section3Output_TextBlock" Text="No Output available." TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}"/>
</StackPanel>
<!-- Section 4 -->
<StackPanel x:Name="Section4Output" >
<TextBlock x:Name="Section4Output_TextBlock" Text="No Output available." TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}"/>
</StackPanel>
<!-- Section 5 -->
<StackPanel x:Name="Section5Output" >
<TextBlock x:Name="Section5Output_TextBlock" Text="No Output available." TextWrapping="Wrap" Style="{StaticResource DescriptionTextStyle}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</Grid>
</UserControl>
Step 4 : After running this code we get the following output:
![output1.gif]()
In the second option write and delete with the composting setting.
![output2.gif]()
In the next point we have to use the container to create and delete a container.
![output3.gif]()
In this point we have to write any word and simulate roaming and we get an output.
![output4.gif]()
In this point we have to read and write a file. Here we have to read a time stamp. It shows the current time.
![output5.gif]()
Resources
Here are some useful resources.
Binding Data Items to a Data Control in Windows 8 Metro Application
Binding and Defining Layout Through XAML in Metro Style Application
List View Data Binding in Windows 8 JavaScript Metro Application
Consuming a JSON Service in Window 8 Metro Style Application
Simple UI Animation through XAML in Metro Style Application