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">

    <!--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="Pink" 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">

  <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">                 

<!-- Output section -->

 

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

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

  <!-- Scenario 1-->

 

<StackPanel x:Name="Scenario1Output">

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

</StackPanel>

 

<!-- Scenario 2-->

<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