Carousel for WPF/Silverlight
手順 2：アプリケーションへのコンテンツの追加
クイックスタート > 手順 2：アプリケーションへのコンテンツの追加

前の手順では、新しい WPF/Silverlight アプリケーションを作成し、アプリケーションに画像リソースを追加しました。この手順では、ListBox を追加し、ListBox コントロールに適用する C1CarouselPanel テンプレートを作成します。次の手順に従います。

  1. XAML ビューで、次のマークアップを使用して、Resources タグを Window タグと Grid タグの間に追加します。

    XAML
    コードのコピー 
    <Window.Resources>
</Window.Resources>
    XAML
    コードのコピー 
    <UserControl.Resources>  
</UserControl.Resources>
    このタグ内にテンプレートを追加します。

  2. Resources タグ内に ItemsPanelTemplate を追加して、C1CarouselPanel を定義します。

    XAML
    コードのコピー 
    <ItemsPanelTemplate x:Key="carouselPanelTemplate">
    <c1:C1CarouselPanel Padding="0, 10, 50, 50" 
    VerticalPathAlignment="Center" 
    HorizontalItemAnchorOnPath="Center" 
    VerticalItemAnchorOnPath="Center"/>
</ItemsPanelTemplate>

  3. Resources タグ内に DataTemplate を追加します。

    XAML
    コードのコピー 
    <DataTemplate x:Key="carouselItemTemplate">
    <Image Source="{Binding}" Stretch="None" />
</DataTemplate>

  4. Resources タグ内に Style を追加して、C1CarouselPanel のパスを定義します。

    XAML
    コードのコピー 
    <Style x:Key="circlePanelStyle" TargetType="ListBox">
    <Setter Property="c1:C1CarouselPanel.PathGeometry" 
    Value="F1 M 466.829,27.2642C 635.339,35.6577 762.667,98.3819 
    762.667,173C 762.667,254.002 613.428,319.667 429.333,319.667C 
    245.238,319.667 96,254.002 96,173C 96,98.0584 224.402,35.1712 393.751,27.1714"/>
    <Setter Property="c1:C1CarouselPanel.HorizontalPathAlignment" Value="Left"/>
    <Setter Property="c1:C1CarouselPanel.VerticalPathAlignment" Value="Top"/>
    <Setter Property="c1:C1CarouselPanel.PerspectiveAngle" Value="55"/>
    <Setter Property="c1:C1CarouselPanel.PerspectiveFactor" Value="0.4"/>
</Style>

  5. Grid タグ内に次の ListBox タグを追加して、ListBox コントロールを作成します。

    XAML
    コードのコピー 
    <ListBox Background="Transparent" Name="carouselListBox" 
Grid.Row="1" ItemsPanel="{StaticResource carouselPanelTemplate}" 
ItemTemplate="{StaticResource carouselItemTemplate}" 
Style="{StaticResource circlePanelStyle}">
</ListBox>

    この ListBox で、先ほど追加したテンプレートを使用します。ItemsPanel プロパティは、ItemsPanelTemplate を使用して、C1CarouselPanel を ListBox に割り当てます。

  6. ページを右クリックしてコードビューに切り替え、［コードの表示］を選択します。

  7. コードエディタのページの先頭に、次の import 文を追加します。

    VisualBasic
    コードのコピー 
    Imports System.Windows.Media.Imaging;
Imports C1.WPF;
Imports C1.WPF.Carousel;

    C#
    コードのコピー 
    using System.Windows.Media.Imaging;
using C1.WPF;
using C1.WPF.Carousel;
    VisualBasic
    コードのコピー 
    Imports System.Windows.Media.Imaging
Imports C1.Silverlight
Imports C1.Silverlight.Carousel

    C#
    コードのコピー 
    using System.Windows.Media.Imaging;
using C1.Silverlight;
using C1.Silverlight.Carousel;

  8. コードをメインクラスに追加します。次のようになります。

    コードのコピー 
    Public Sub New()
    InitializeComponent()
    InitData()
End Sub
    コードのコピー 
    public MainPage()
{
    InitializeComponent();
    InitData();
}

  9. メインクラスの下に次のコードを追加します。

    コードのコピー 
    Private Sub InitData()
    For i As Integer = 101 To 140                 
        carouselListBox.Items.Add
        (New BitmapImage(Extensions.GetAbsoluteUri
        ("Resources/covers/cover" & i & ".jpg")))                
    Next                      
End Sub
    コードのコピー 
    private void InitData()                     
{                   
    for (int i = 101; i <= 140; i++)                
       {                
            carouselListBox.Items.Add
            (new BitmapImage(Extensions.GetAbsoluteUri
            ("Resources/covers/cover" + i + ".jpg")));                
        }                    
}

    これにより、ListBox コントロールに追加した画像がロードされます。プロジェクトに別の画像を追加した場合は、上のコードを変更する必要があります。

この手順では、ListBox を追加し、ListBox コントロールに適用する C1CarouselPanel テンプレートを作成しました。最後に、アプリケーションを実行します。

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

 

 

Copyright © GrapeCity Inc. All rights reserved.