Tile in Windows Store App

Introduction

In this article we will show how to pin tiles and the uses of tiles in Metro Style applications. Here, we will show how to pin and unpin a tile. In this example we will determine whether a tile is pinned or not and pin/unpin from the application bar.

So, all these points shows in a list box and shows the following output with the help of the following steps.

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 :

homepage.jpg

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

solutionexplorer.jpg

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="Tile.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">
   
<!--This enables the AppBar to show up in the bottom of the app-->
   
<Page.BottomAppBar>
       
<AppBar x:Name="BottomAppBar" Padding="10,0,10,0" Opened="BottomAppBar_Opened" >
         
<Grid>
             
<Grid.ColumnDefinitions>
                   
<ColumnDefinition Width="30*"/>
             
</Grid.ColumnDefinitions>
             
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                   
<Button x:Name="PinToAppBar"  Style="{StaticResource PinAppBarButtonStyle}" Tag="Pin to Start" Click="PinToAppBar_Click"/>
               
</StackPanel>
         
</Grid>
       
</AppBar>
   
</Page.BottomAppBar>
   
<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">
      
 
<StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">
                       
<StackPanel>
                           
<TextBlock Text="Input" Style="{StaticResource H2Style}"/>
                           
<TextBlock Text="Select Scenario:" Style="{StaticResource H3Style}"/>
                 
  
<ListBox x:Name="ScenarioList" Margin="0,0,20,0" HorizontalAlignment="Left">
                               
<ListBox.ItemTemplate>
                                   
<DataTemplate>
                                       
<TextBlock Text="{Binding Name}"/>
                                   
</DataTemplate>
                               
</ListBox.ItemTemplate>
                               
<ListBoxItem x:Name="Scenario1PinSecondaryTile">
 
                          
<TextBlock Text="1) Pin Tile" Style="{StaticResource ListBoxTextStyle}"/>
                               
</ListBoxItem>
                 
             
<ListBoxItem x:Name="Scenario2RemoveSecondaryTile">
  
                     
<TextBlock Text="2) Unpin Tile" Style="{StaticResource ListBoxTextStyle}"/>
                               
</ListBoxItem>
                               
<ListBoxItem x:Name="Scenario3EnumerateSecondaryTile">
   
            
<TextBlock Text="3) Enumerate Tiles" Style="{StaticResource ListBoxTextStyle}"/>
                               
</ListBoxItem>
                               
<ListBoxItem x:Name="Scenario4DoesSecondaryTileExists">
  
               
<TextBlock Text="4) Is Tile Pinned?" Style="{StaticResource ListBoxTextStyle}"/>
                               
</ListBoxItem>
   
                          
<ListBoxItem x:Name="Scenario5AppBarIntegration">
 
  
<TextBlock Text="5) Pin/Unpin from AppBar" Style="{StaticResource ListBoxTextStyle}"/>
                              
</ListBoxItem>
        
                  
</ListBox>
                       
</StackPanel>
                       
<StackPanel Margin="0,31,0,0" >
                           
<TextBlock Text="Description:" Style="{StaticResource H3Style}"/>
                           
<StackPanel x:Name="Description" MaxWidth="500">

                                <!-- Scenario 1 -->
                               
<StackPanel x:Name="Scenario1Input">
                                   
<TextBlock TextWrapping="Wrap" Text="Secondary tiles are pinned to the Start screen after user confirmation. Click the Pin Tile button to pin a secondary tile to the Start screen." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>
                                   
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                                       
<Button x:Name="scenario1PinSecondaryTile" Content="Pin Tile" Margin="0,0,10,0"/>
                                   
</StackPanel>
                               
</StackPanel> 
                               
<!-- Scenario 2 -->
                               
<StackPanel x:Name="Scenario2Input" Visibility="Collapsed">
                                   
<TextBlock TextWrapping="Wrap" Text="In this scenario, we will unpin the tile that was pinned in scenario 1 from Start screen. If this were an actual application, we would first want to check if the tile we're removing actually exists. Please refer to scenario 4 for an example of how to check if a tile exists." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>
                                   
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                                       
<Button x:Name="scenario2RemoveSecondaryTile" Content="Unpin Tile" Margin="0,0,10,0"/>
                                   
</StackPanel>
                               
</StackPanel>
                               
<!-- Scenario 3 -->
                               
<StackPanel x:Name="Scenario3Input" Visibility="Collapsed">
                                   
<TextBlock TextWrapping="Wrap" Text="In this scenario we will retrieve a list of all the secondary tiles for the application. This is especially useful when refreshing notification channel URIs for secondary tiles, or for opening channels during first run on a new PC." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>
                                   
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
             
                         
<Button x:Name="scenario3EnumerateSecondaryTiles" Content="Enumerate Tiles" Margin="0,0,10,0"/>
                                   
</StackPanel>
                               
</StackPanel>
                               
<!-- Scenario 4 -->
                              
<StackPanel x:Name="Scenario4Input" Visibility="Collapsed">
                                   
<TextBlock TextWrapping="Wrap" Text="In this scenario we will check to see if a particular secondary tile exists." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>
                                   
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
        
                              
<Button x:Name="scenario4DoesSecondaryTileExists" Content="Check if Tile Exists" Margin="0,0,10,0"/>
                                   
</StackPanel>
                               
</StackPanel>
                                
<!-- Scenario 5 -->
                               
<StackPanel x:Name="Scenario5Input">
 
<TextBlock TextWrapping="Wrap" Text="This scenario demonstrates the use of the AppBar for pinning and unpinning tiles." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>
                                   
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                                   
</StackPanel>
                               
</StackPanel>
   
                       
</StackPanel>
                       
</StackPanel>
                   
</StackPanel>                    

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

image1.jpg

image3.jpg

image4.jpg



Up Next
    Ebook Download
    View all
    Learn
    View all