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（プロジェクト名）.Web プロジェクトを右クリックし、リストから［追加］→［フォルダ］を選択します。フォルダ名を Resources と指定します。

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

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

  7. マークアップ xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" を使用して、Windows/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. <DataTemplate> を挿入して、画像ソースを定義します。

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

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

    XAML
    コードのコピー 
    <Style x:Key="parabolaPanelStyle" TargetType="ListBox">
    <Setter Property="c1:C1CarouselPanel.PathGeometry" 

    Value="F1 M 164.564,73.0518C 201.647,164.183 238.73,255.315 

    284.817,323.23C 330.903,391.146 385.993,435.845 445.921,431.137C 

    505.849,426.43 570.614,372.315 614.53,304.361C 658.446,236.407 

    681.512,154.614 704.578,72.8207"/>
    <Setter Property="c1:C1CarouselPanel.HorizontalPathAlignment" Value="Left"/>
    <Setter Property="c1:C1CarouselPanel.VerticalPathAlignment" Value="Top"/>
    <Setter Property="c1:C1CarouselPanel.PerspectiveAngle" Value="90"/>
    <Setter Property="c1:C1CarouselPanel.PerspectiveFactor" Value="-0.317"/>
</Style>

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

    XAML
    コードのコピー 
    <ListBox Background="Transparent" Name="carouselListBox" 

Grid.Row="1" ItemsPanel="{StaticResource carouselPanelTemplate}"
ItemTemplate="{StaticResource carouselItemTemplate}"
Style="{StaticResource parabolaPanelStyle}"/>

  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(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")));
          }

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

関連トピック
スパイラル形のパスに沿ったコンテンツの移動

 

 

Copyright © GrapeCity Inc. All rights reserved.