バージョン

CarouselListBoxItem テンプレートを編集

CarouselListBoxItem は、xamCarouselListBox™ コントロール内に含まれる項目の選択可能なコンテナーです。CarouselListBoxItem は、ListBoxItem から派生する CarouselPanelItem から派生します。xamCarouselListBox には、CarouseListBoxItem のコレクションが含まれます。これらの項目を手動で作成することができます。または、データ バインドされている場合には、xamCarouselListBox が項目を作成します。

テンプレートは非常に複雑な場合があります。コントロールのテンプレートには特定のコントロールを描画するために必要なすべての設定が含まれます。

これらの手順に従って、CarouselListBoxItem テンプレートを修正します。xamCarouselListBox で各項目の周囲に境界線を配置します。このトピックは、 xamCarouselListBox をアプリケーションに追加 および ItemTemplate での作業 のトピックのタスクを完了していることが前提となります。

  1. 「ItemTemplate での作業」トピックのコードを修正します。DataTemplate で Label の Background および Foreground 設定を削除します。修正した DataTemplate は以下のコードのようになるはずです。

XAML の場合:

<DataTemplate x:Key="SimpleDataTemplate">
        <StackPanel>
                <Label Content="Product Name:"/>
                <ContentPresenter Content="{Binding XPath=ProductName}" />
                <Label Content="Cost Per Unit:"/>
                <ContentPresenter Content="{Binding XPath=CostPerUnit}" />
                <Label Content="Shipping and Handling Costs:"/>
                <ContentPresenter Content="{Binding XPath=ShipAndHandle}" />
        </StackPanel>
</DataTemplate>

  1. Border を作成して、BorderBrush を Tomato に、BorderThickness を 10 に設定します。リンク先の スタイル テンプレート全体をプロジェクトにコピーすることができます。

XAML の場合:

<Style TargetType="{x:Type igWindows:CarouselListBoxItem}">
        ...
                <ScrollViewer ...>
                        ...
                                <Border x:Name="itemContentHolderBackground"
                                  Background="#000FF000" CornerRadius="4,4,4,4"
                                  BorderBrush="Tomato" BorderThickness="10"/>
                        ...
                </ScrollViewer ...>
        ...
</Style>

  1. プロジェクトをビルドして実行します。xamCarouselListBox の各項目の周囲に赤い境界線が表示して以下の図のようになります。

カスタム テンプレートを適用した xamcarousellistbox