ComponentOne Tiles for UWP
Tiles for UWP Quick Start / Step 2 of 3: Adding Tiles to the Application
In This Topic
    Step 2 of 3: Adding Tiles to the Application
    In This Topic

    In the previous step you created a Universal Windows application; in this step you'll add Tiles for UWP controls. Complete the following steps:

    1. Place your cursor between the <Xaml:C1TileListBox.Items></Xaml:C1TileListBox.Items> tags, navigate to the Toolbox, and double-click the C1Tile control to add it to the page. This will also add a reference to the C1.Xaml.Tile assembly.
    2. Update the C1Tile markup so it looks like the following:
      Markup
      Copy Code
      <Tile:C1Tile Content="1" Header="C1Tile" HeaderPadding="12" Padding="0"
              HeaderBackground="#22000000" HorizontalHeaderAlignment="Stretch" />
      

      This markup adds header and content text, adds padding, changes the color of the header background, and the alignment of the header.

    3. Add the following markup just below the C1Tile markup:
      Markup
      Copy Code
      <Tile:C1SlideTile Content="2" HeaderPadding="12" HorizontalContentAlignment="Stretch" 
              VerticalContentAlignment="Stretch" Padding="0"
                  Header="C1SlideTile">                             
              <Tile:C1Tile.ContentTemplate>                                 
              <DataTemplate>                                   
                      <Border Background="#FFBC1C48" >                                         
                      <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />                                     
                  </Border>                           
              </DataTemplate>                               
          </Tile:C1Tile.ContentTemplate>                              
          <Tile:C1Tile.BackContentTemplate>                                   
              <DataTemplate>                                
                  <Border Background="#FF028541" >                                           
                      <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">                                            
                              <TextBlock Text="{Binding}" Foreground="White" HorizontalAlignment="Center"/>                                              
                              <TextBlock Text="Back Content Template" Margin="0 -10 0 0" FontSize="12" 
                                      Foreground="White" HorizontalAlignment="Center"/>                                           
                      </StackPanel>                                       
                  </Border>                                  
              </DataTemplate>                              
           </Tile:C1Tile.BackContentTemplate>
      </Tile:C1SlideTile>
      
      This markup adds a C1SlideTile control with a ContentTemplate and a BackContentTemplate. The ContentTemplate determines the initial content and appearance of the control. The BackContentTemplate determines the content and appearance of the control once it transitions (in the case of the C1SlideTile control, it slides from one template to the other).
    4. Add the following markup just below the C1SlideTile markup:
      Markup
      Copy Code
      <Tile:C1SlideTile Content="3" BackContent="Back Content 3" FontSize="36" Header="C1SlideTile" 
                    HeaderPadding="12" Padding="0"/>                            
                              <Tile:C1SlideTile Content="4" Header="C1SlideTile, SlideDirection = Right" 
                                      HeaderPadding="12" Padding="0" 
                                      SlideDirection="Right" HorizontalHeaderAlignment="Right"/>
                              <Tile:C1SlideTile Content="5" Header="C1SlideTile" />
                              <Tile:C1FlipTile Content="6" Header="C1FlipTile" />
                              <Tile:C1FlipTile Content="7" Header="C1FlipTile" HeaderPadding="12" Padding="0" 
                                      HeaderBackground="#22000000">
                                      <Tile:C1Tile.ContentTemplate>                          
                              <DataTemplate>                                       
                                <Border Background="#FF8C0095" >                                          
                                    <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />                                       
                                      </Border>                                   
                              </DataTemplate>                               
                      </Tile:C1Tile.ContentTemplate>                               
                      <Tile:C1Tile.BackContentTemplate>                                   
                              <DataTemplate>                                       
                                      <Border Background="#FFCD4900" >                                           
                                              <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">                                               
                                                  <TextBlock Text="{Binding}"  Foreground="White" HorizontalAlignment="Center"/>                                               
                                                  <TextBlock Text="Back Content Template" Margin="0 -10 0 0" 
                                                          FontSize="12" 
                                                          Foreground="White" HorizontalAlignment="Center"/>                                           
                                              </StackPanel>                                       
                                      </Border>                                  
                              </DataTemplate>                               
                  </Tile:C1Tile.BackContentTemplate>
                      </Tile:C1FlipTile>
      
    5. This markup adds C1SlideTile and C1FlipTile controls. Note that one of the C1FlipTile controls also includes a ContentTemplate and a BackContentTemplate.

    In this step you added Tiles for UWP controls to your application. In the next step you'll run the application so see how the application appears at run time.

    See Also