手順1：タイルアプリケーションの設定

この手順では、最初に Visual Studio で Tiles for WPF/Silverlight を使用するアプリケーションを作成します。この手順では、WPF/Silverlight ストアアプリケーションを作成し、C1TileListBox を追加し、Tiles for WPF/Silverlight コントロールを挿入します。それには、次の手順に従います。

Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows］を選択し、テンプレートリストで［WPF アプリケーション］を選択します。名前を入力し、［OK］をクリックしてプロジェクトを作成します。 MainPage.xaml ページが表示されます。
ソリューションエクスプローラウィンドウでプロジェクトを右クリックし、［参照の追加］を選択します。
［参照の追加］ダイアログボックスで、C1.WPF.dll または C1.Silverlight.dllおよび C1.WPF.Tile.dll または C1.Silverlight.Tile.dll アセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追加します。

次のマークアップを使用して、Window タグに XAML 名前空間を追加します。

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

これは、複数の名前空間を追加しなくても、ほとんどの WPF コントロールを使用できるようにするための統合名前空間です。UserControl タグは次のように表示されます。

WPF
Silverlight

XAML	コードのコピー
<Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">

XAML

コードのコピー

<Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1WPFTileCS022813.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="MainWindow" Height="350" Width="525">

XAML	コードのコピー
<UserControl x:Class="TileSamples.TileTypes" 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" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

XAML

コードのコピー

<UserControl x:Class="TileSamples.TileTypes"
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"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

<Window> タグの直後で <Grid> タグの前に、次のマークアップを追加します。

WPF
Silverlight

XAML	コードのコピー
<Window.Resources> <Style x:Key="listBoxItemStyle" TargetType="ListBoxItem"> <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/> <Setter Property="Padding" Value="5" /> </Style> <Style TargetType="c1:C1Tile" x:Key="baseTileStyle"> <Setter Property="Background" Value="#FFC410" /> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="80"/> <Setter Property="HeaderForeground" Value="White"/> <Setter Property="HeaderFontSize" Value="12"/> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Width" Value="280" /> <Setter Property="Height" Value="200" /> </Style> <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}"> </Style> </Window.Resources>

XAML

コードのコピー

<Window.Resources>
    <Style x:Key="listBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/>
            <Setter Property="Padding" Value="5" />
    </Style>
    <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
        <Setter Property="Background" Value="#FFC410" />
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="80"/>
        <Setter Property="HeaderForeground" Value="White"/>
        <Setter Property="HeaderFontSize" Value="12"/>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Width" Value="280" />
        <Setter Property="Height" Value="200" />
    </Style>
    <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
    </Style>
    <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
    </Style>
</Window.Resources>

XAML	コードのコピー
<UserControl.Resources> <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem"> <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/> </Style> <Style TargetType="c1:C1Tile" x:Key="baseTileStyle"> <Setter Property="Background" Value="#FFC410" /> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="80"/> <Setter Property="HeaderForeground" Value="White"/> <Setter Property="HeaderFontSize" Value="12"/> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Width" Value="280" /> <Setter Property="Height" Value="200" /> </Style> <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}"> </Style> <Style TargetType="c1:C1FlipTile" BasedOn="{StaticResource baseTileStyle}"> </Style> </UserControl.Resources>

XAML

コードのコピー

 
<UserControl.Resources>
        <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem">
            <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True"/>
        </Style>
        <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
            <Setter Property="Background" Value="#FFC410" />
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="80"/>
            <Setter Property="HeaderForeground" Value="White"/>
            <Setter Property="HeaderFontSize" Value="12"/>
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Width" Value="280" />
            <Setter Property="Height" Value="200" />
        </Style>
        <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1FlipTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
    </UserControl.Resources>

このマークアップは、アプリケーションの外観をスタイル設定するためのリソースを追加します。

<Grid> タグと </Grid> タグの間にカーソルを置き、ツールボックスに移動し、ListBox コントロールをダブルクリックしてページに追加します。

ListBox マークアップを更新します。次のようになります。

XAML	コードのコピー
<ListBox ItemContainerStyle="{StaticResource listBoxItemStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" > <ListBox.ItemsPanel> <ItemsPanelTemplate> <c1:C1WrapPanel/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.Items> </ListBox.Items> </ListBox>

XAML

コードのコピー

<ListBox ItemContainerStyle="{StaticResource listBoxItemStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
                    <c1:C1WrapPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.Items>
    </ListBox.Items>
</ListBox>

この手順では、Tiles for WPF/Silverlight アプリケーションを作成しました。次の手順では、このアプリケーションに WPF/Silverlight コントロールを追加します。