Images in Windows Store App

Introduction

In this article we will show how to display images in an application. Here, we will show how an image is displayed in our application and how to display an image from a file stream in our application.

So, here we will present an example and this example demonstrates that step by step in the snapshots 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.

<Page x:Class="TemplateCS.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">         

          <Page.Resources>

                   <Style x:Key="BaseStatusStyle" TargetType="TextBlock">

                             <Setter Property="FontFamily" Value="Segoe UI Semilight"/>

                             <Setter Property="FontSize" Value="14.667"/>

                             <Setter Property="Margin" Value="0,0,0,5"/>

                   </Style>

<Style x:Key="StatusStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">

          <Setter Property="Foreground" Value="Green"/>

                   </Style>

<Style x:Key="ErrorStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">

                             <Setter Property="Foreground" Value="Blue"/>

                   </Style>

          </Page.Resources>

          <Grid x:Name="LayoutRoot" Background="White">

                   <!--App Orientation States-->

          <VisualStateManager.VisualStateGroups>

                    <VisualStateGroup x:Name="OrientationStates">

                                      <VisualState x:Name="FullScreenLandscapeScale100Percent"/>

                             <VisualState x:Name="FilledScale100Percent">

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

             <DiscreteObjectKeyFrame KeyTime="0" Value="700">

             </DiscreteObjectKeyFrame>

             </ObjectAnimationUsingKeyFrames>

                           </Storyboard>

                             </VisualState>

                             <VisualState x:Name="FullScreenPortraitScale100Percent">

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

                                      <DiscreteObjectKeyFrame KeyTime="0" Value="400">

                                        </DiscreteObjectKeyFrame>

                                         </ObjectAnimationUsingKeyFrames>

                                      </Storyboard>

                                      </VisualState>

                                      <VisualState x:Name="SnappedScale100Percent">

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

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

<VisualState x:Name="FullScreenLandscapeScale140Percent">

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

                                      <DiscreteObjectKeyFrame KeyTime="0" Value="600">

                                      </DiscreteObjectKeyFrame>

                                       </ObjectAnimationUsingKeyFrames>

                                       </Storyboard>

                                      </VisualState>

                                      <VisualState x:Name="FilledScale140Percent"/>

                                      <VisualState x:Name="FullScreenPortraitScale140Percent">

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

          <DiscreteObjectKeyFrame KeyTime="0" Value="250">

          </DiscreteObjectKeyFrame>

          </ObjectAnimationUsingKeyFrames>

          </Storyboard>

          </VisualState>

          <VisualState x:Name="SnappedScale140Percent"/>

          </VisualStateGroup>

          </VisualStateManager.VisualStateGroups>

<Grid x:Name="ContentRoot" Background="YellowGreen" 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">

                             <Grid HorizontalAlignment="Left">

                             <Grid.RowDefinitions>

                                      <RowDefinition Height="Auto"/>

                                      <RowDefinition Height="Auto"/>

                                      <RowDefinition Height="Auto"/>

                                      <RowDefinition Height="Auto"/>

                                      <RowDefinition Height="*"/>

                             </Grid.RowDefinitions>

<TextBlock Grid.Row="0" Text="Input" Style="{StaticResource H2Style}"/>

<StackPanel x:Name="InputPanel" Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Left">
                                      <StackPanel>

<TextBlock Text="Select Scenario:" Style="{StaticResource H3Style}" Margin="0,5,0,0"/>

<Frame x:Name="ScenarioList" MaxWidth="250" Margin="0,5,0,0" IsTabStop="False"    
                                      </StackPanel>

                                      <StackPanel>                                      
<TextBlock Margin="0,5,0,0"  Text="Description:" Style="{StaticResource H3Style}"/>

                                       <!-- Input Scenarios -->

<Frame x:Name="ScenarioInput" Margin="0,5,0,0" MaxWidth="800" IsTabStop="False" />

                                      </StackPanel>

                                      </StackPanel>

                             <!-- Output section -->

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

<TextBlock x:Name="StatusBlock" Grid.Row="3" Margin="0,0,0,5"/>

                             <!-- Output Scenarios -->

<Frame x:Name="ScenarioOutput" Grid.Row="4" MaxWidth="1050"  IsTabStop="False"/>

                                      </Grid>

                             </ScrollViewer>

</Grid>
 </Grid>

</Page>

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