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