C1CarouselPanel の使用

C1CarouselPanel を使用してカルーセル風のインタラクティブな効果を作成するには、これを ItemsControl コントロールのパネルとして設定し、ビジュアル要素のコレクションを ItemsControl.Items プロパティに割り当てます。たとえば、次の XAML では、Window のリソースで ItemsPanelTemplate テンプレートを定義し、そこに C1CarouselPanel パネルを入れます。次に、任意の要素を含む ItemsControl で、この ItemsPanelTemplate テンプレートを指定します。

WPF
Silverlight

XAML	コードのコピー
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!-- C1CarouselPanel を定義する ItemsPanelTemplate テンプレート。--> <ItemsPanelTemplate x:Key="carouselPanel"> <c1:C1CarouselPanel /> </ItemsPanelTemplate> </Window.Resources> <Grid> <!-- ItemsPanel が C1CarouselPanel を定義する ItemsPanelTemplate に設定された ItemsControl。--> <ItemsControl ItemsPanel="{StaticResource carouselPanel}"> <!-- ItemsControl 内の任意のコントロールまたは画像。--> <Image Width="51" Height="51" Source="image1.png"/> <Image Width="51" Height="51" Source="image2.png"/> <Image Width="51" Height="51" Source="image3.png"/> <Button Height="23" Name="Button1" Width="75">Button</Button> </ItemsControl> </Grid> </Window>

XAML

コードのコピー

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
 
        <!-- C1CarouselPanel を定義する ItemsPanelTemplate テンプレート。-->
        <ItemsPanelTemplate x:Key="carouselPanel">
            <c1:C1CarouselPanel />
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid>
<!-- ItemsPanel が C1CarouselPanel を定義する ItemsPanelTemplate に設定された ItemsControl。-->
<ItemsControl ItemsPanel="{StaticResource carouselPanel}">
<!-- ItemsControl 内の任意のコントロールまたは画像。-->
            <Image Width="51" Height="51" Source="image1.png"/>
            <Image Width="51" Height="51" Source="image2.png"/>
            <Image Width="51" Height="51" Source="image3.png"/>
            <Button Height="23" Name="Button1" Width="75">Button</Button>
</ItemsControl>
    </Grid>
</Window>

XAML	コードのコピー
<UserControl x:Class="C1Carousel.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" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <UserControl.Resources> <!-- C1CarouselPanel を定義する ItemsPanelTemplate テンプレート。--> <ItemsPanelTemplate x:Key="carouselPanel"> <c1:C1CarouselPanel /> </ItemsPanelTemplate> </UserControl.Resources> <Grid> <!-- ItemsPanel が C1CarouselPanel を定義する ItemsPanelTemplate に設定された ItemsControl。--> <ItemsControl ItemsPanel="{StaticResource carouselPanel}"> <!-- ItemsControl 内の任意のコントロールまたは画像。--> <Image Width="51" Height="51" Source="image1.png"/> <Image Width="51" Height="51" Source="image2.png"/> <Image Width="51" Height="51" Source="image3.png"/> <Button Height="23" Name="Button1" Width="75">Button</Button> </ItemsControl> </Grid> </UserControl>

XAML

コードのコピー

<UserControl x:Class="C1Carousel.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"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <!-- C1CarouselPanel を定義する ItemsPanelTemplate テンプレート。-->
        <ItemsPanelTemplate x:Key="carouselPanel">
            <c1:C1CarouselPanel />
        </ItemsPanelTemplate>
    </UserControl.Resources>
    <Grid>
<!-- ItemsPanel が C1CarouselPanel を定義する ItemsPanelTemplate に設定された ItemsControl。-->
<ItemsControl ItemsPanel="{StaticResource carouselPanel}">
<!-- ItemsControl 内の任意のコントロールまたは画像。-->
            <Image Width="51" Height="51" Source="image1.png"/>
            <Image Width="51" Height="51" Source="image2.png"/>
            <Image Width="51" Height="51" Source="image3.png"/>
            <Button Height="23" Name="Button1" Width="75">Button</Button>
</ItemsControl>
    </Grid>
</UserControl>