Carousel for WPF/Silverlight
楕円形のパスに沿ったコンテンツの移動
タスク別ヘルプ > C1Carousel へのコンテンツの追加と移動 > 楕円形のパスに沿ったコンテンツの移動

楕円形のパスに沿ってコンテンツを移動するには、次の手順に従います。

  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（プロジェクト名）プロジェクトを右クリックし、リストから［追加］→［フォルダ］を選択します。フォルダ名を 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> タグを <Window> タグと <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. <DataTemplate> を挿入して、画像ソースを定義します。

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

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

    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>

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

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

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

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

    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;

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

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

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

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

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

関連トピック
ジグザグ形のパスに沿ったコンテンツの移動

 

 

Copyright © GrapeCity Inc. All rights reserved.