Tiles for UWP
手順2：アプリケーションへのタイルの追加
クイックスタート > 手順2：アプリケーションへのタイルの追加

前の手順では、Windows ストアアプリケーションを作成しました。この手順では、Tiles for UWP コントロールを追加します。次の手順に従います。

  1. <c1:C1TileListBox.Items></c1:C1TileListBox.Items> タグの間にカーソルを置き、 ツールボックスに移動し、C1Tile コントロールをダブルクリックしてページに追加します。これにより、C1.Xaml.Tile アセンブリへの参照も追加されます。
  2. C1Tile マークアップを更新します。次のようになります。
    マークアップ
    コードのコピー 
    <Tile:C1Tile Content="1" Header="C1Tile" HeaderPadding="12" Padding="0"
        HeaderBackground="#22000000" HorizontalHeaderAlignment="Stretch" />

    このマークアップは、ヘッダーとコンテンツテキストの追加、パディングの追加、ヘッダーの背景色と配置の変更を行います。

  3. C1Tile マークアップの直後に次のマークアップを追加します。
    マークアップ
    コードのコピー 
    <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>

    このマークアップは、ContentTemplate および BackContentTemplate と共に C1SlideTile コントロールを追加します。ContentTemplate は、コントロールの初期コンテンツと外観を決定します。BackContentTemplate は、コントロールが変化するときに（C1SlideTile コントロールの場合は、１つのテンプレートから別のテンプレートにスライドするときに）、コントロールのコンテンツと外観を決定します。

  4. C1SlideTile マークアップの直後に次のマークアップを追加します。
    マークアップ
    コードのコピー 
    <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. このマークアップは、C1SlideTile コントロールと C1FlipTile コントロールを追加します。C1FlipTile コントロールの １つには、ContentTemplate と BackContentTemplate も含まれます。

この手順では、アプリケーションに Tiles for UWP コントロールを追加しました。次の手順では、アプリケーションを実行し、実行時にアプリケーションがどのように表示されるかを確認します。

関連トピック
手順3：タイルアプリケーションの実行

 

 

Copyright © MESCIUS, Inc. All rights reserved.