Pick and Save a File Location in Windows Store Apps

Loading

Pick and Save a File Location in Windows Store Apps

Introduction

In this article we will show how to pick and save the location of a file in a Windows 8 Metro Style application. Here, I will present an example to explain how to pick a file in our system and after that how to save a location for the selected file.

So, these points are shown in a list box and shows the following output with the help of the given snapshots in these steps as below.

Step 1 : First of all you will 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# ->Metro Style Application
Rename this Application :

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files.

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="FilePicker.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="Pink">

<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="Pink" Margin="100,20,100,20">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">

<StackPanel x:Name="ContentPanel">

<TextBlock Text="Input" Style="{StaticResource H2Style}"/>

<StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">

<StackPanel Margin="0,0,20,0">

<TextBlock Text="Select Scenario:" Style="{StaticResource H3Style}"/>

<ListBox x:Name="ScenarioList" HorizontalAlignment="Left">

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Name}"/>

</DataTemplate>

</ListBox.ItemTemplate>

<ListBoxItem x:Name="Scenario1">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text="1) Pick a file" />

</ListBoxItem>

<ListBoxItem x:Name="Scenario2">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text="2) Save a file" />

</ListBoxItem>

</ListBox>

</StackPanel>

<StackPanel>

<TextBlock Text="Description:" Style="{StaticResource H3Style}"/>

<StackPanel x:Name="Description" MaxWidth="900">

<TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>

<StackPanel x:Name="Output" HorizontalAlignment="Left">

<StackPanel x:Name="Scenario1Output">

<TextBlock Style="{StaticResource DescriptionTextStyle}" x:Name="Scenario1FileName" TextWrapping="Wrap" />

</StackPanel>

<StackPanel x:Name="Scenario2Output" Visibility="Collapsed">

<TextBlock Style="{StaticResource DescriptionTextStyle}" x:Name="Scenario2FileName" TextWrapping="Wrap" />

</StackPanel>

</StackPanel>

</StackPanel>

</ScrollViewer>

</Grid>

</Grid>

</UserControl>

Step 4 : After running this code we get the following output.

Resources

Here are some useful related resources.

Working With File Picker in Windows 8 Metro Style Applications
File Accessing in Windows 8 Metro Style Apps
Windows 8 Metro Style Apps Application Bar
Binding and Defining Layout Through XAML in Metro Style Application
Building the Unit Converter in Windows 8 Metro Style Application