Carousel for WPF/Silverlight
可視要素の数の制限
タスク別ヘルプ > 可視要素の数の制限

C1CarouselPanelの可視要素の数をカスタマイズできます。それには、 ItemsPanelTemplate の <c1:C1CarouselPanel> タグでプロパティを設定します。

C1CarouselPanel タグ

C1CarouselPanel の可視要素の数を制限するには、次の手順に従います。

  1. Visual Studio の［ファイル］メニューから、［新規作成］を選択し、［プロジェクト］を選択します。

  2. ［新しいプロジェクト］ダイアログボックスで、左側のメニューから言語を選択し、［フレームワーク］ドロップダウンリストで［.NET Framework 4］を選択し、プロジェクトの名前を入力します。

  3. ソリューションエクスプローラで、プロジェクト名を右クリックし、［参照の追加］を選択します。［参照の追加］ダイアログボックスで、以下のアセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追加します。

    コードのコピー 
    C1.WPF.4.dll
C1.WPF.Carousel.4.dll
    コードのコピー 
    C1.Silverlight.5.dll
C1.Silverlight.Carousel.5.dll

  4. yourprojectname（プロジェクト名）.Web プロジェクトを右クリックし、リストから［追加］→［フォルダ］を選択します。フォルダ名を Resources と指定します。

  5. ［Resources］フォルダを右クリックし、リストから［追加］→［フォルダ］を選択します。新しいサブフォルダ名を covers と指定します。

  6. ［covers］フォルダを右クリックし、リストから［追加］→［既存の項目］を選択します。このヘルプでは、C1Carousel_Demo サンプルアプリケーションに含まれるカバーを見つけます。［Shift］キーを押しながら、最初と最後のカバーをクリックして、すべてのファイルを選択します。［追加］をクリックして、これらのファイルをフォルダに追加します。

  7. マークアップ xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" を使用して、Window/userControl タグに XAML 名前空間を追加します。


    名前空間は次のようになります。
    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">
    XAML
    コードのコピー 
    <UserControl x:Class="QuickStart.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">

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

    XAML
    コードのコピー 
    <Window.Resources>
</Window.Resources>
    XAML
    コードのコピー 
    <UserControl.Resources>  
</UserControl.Resources>

    このタグ内にテンプレートを追加します。

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

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

  10. <c1:C1CarouselPanel> タグを見つけ、次の XAML マークアップを追加して、可視要素の数を制限します。

    コードのコピー 
    PageSize="3"

    <c1:C1CarouselPanel> マークアップ全体は次のようになります。
    XAML
    コードのコピー 
    <c1:C1CarouselPanel Padding="0, 10, 50, 50" VerticalPathAlignment="Center"
HorizontalItemAnchorOnPath="Center" VerticalItemAnchorOnPath="Center" PageSize="3"/>

  11. <DataTemplate> を挿入して、画像ソースを定義します。

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

  12. <DataTemplate> の下に次の <Style> を追加して、C1CarouselPanel コントロールの PathGeometry を設定します。

    XAML
    コードのコピー 
    <Style x:Key="diagonalPanelStyle" TargetType="ListBox">
  <Setter Property="c1:C1CarouselPanel.PathGeometry" Value="M 216, 60 L 600, 390"/>
  <Setter Property="c1:C1CarouselPanel.HorizontalPathAlignment" Value="Left"/>
  <Setter Property="c1:C1CarouselPanel.VerticalPathAlignment" Value="Top"/>
  <Setter Property="c1:C1CarouselPanel.PerspectiveAngle" Value="65"/>
  <Setter Property="c1:C1CarouselPanel.PerspectiveFactor" Value="0.12"/>
</Style>

  13. <Grid> 内に、次の ListBox コントロールを追加します。

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

  14. MainPage.xaml ページを右クリックし、リストから［コードの表示］を選択します。

  15. 次の名前空間をページの先頭に追加します。

    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;

  16. InitializeComponent() メソッドのすぐ下に、次のメソッドを挿入します。

    コードのコピー 
    InitData()
    コードのコピー 
    InitData();

  17. 次のメソッドを呼び出して、C1CarouselPanel にデータを挿入します。

    コードのコピー 
    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")));
          }

  18. ［F5］キーを押してアプリケーションを実行します。カルーセルは次の図のようになります。

 

 

Copyright © GrapeCity Inc. All rights reserved.