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" を使用して、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. <DataTemplate> を挿入して、画像ソースを定義します。

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

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

    XAML
    コードのコピー 
    <Style x:Key="spiralPanelStyle" TargetType="ListBox">
<Setter Property="c1:C1CarouselPanel.PathGeometry" Value=" F1 M 426.39877,214.56664
C 477.32999,252.5027 425.16229,295.34012 402.57449,303.93842
C 385.32977,310.50281 302.99234,311.50055 289.99231,310.50055
C 277.30948,309.52493 190.99216,292.50021 178.99214,286.50021
C 171.53923,282.77377 143.14252,246.34085 140.99213,237.50035
C 131.99211,200.50027 144.99214,178.50027 191.99223,149.5002
C 200.50449,144.24796 259.86719,123.92526 276.99231,120.50028
C 291.99237,117.50031 363.99265,118.50018 382.01099,122.78677
C 402.75034,127.7207 436.07599,133.93291 457.07605,144.93292
C 474.27582,153.94232 489.89432,159.93607 502.89435,169.93608
C 513.04492,177.74423 542.43744,201.83525 552.03833,213.18535
C 564.9931,228.50035 568.22015,248.1823 573.71283,266.7619
C 576.95355,277.72397 559.99274,316.50018 546.99274,333.50021
C 533.24768,351.47452 473.77701,392.49255 450.77695,402.49255
C 424.47693,413.92734 387.50757,418.44592 358.99243,421.50061
C 330.99237,424.50009 300.22705,418.91339 272.99228,416.50018
C 247.2047,414.21521 219.99205,409.50064 193.94289,403.37714
C 177.01965,399.39893 137.99185,389.50015 123.99122,379.50012
C 103.3692,364.77072 64.991714,336.50052 56.991692,318.50049
C 46.535854,294.97488 40.107754,267.91367 35.991642,242.50037
C 32.747829,222.47273 49.97628,161.97603 61.236015,142.52779
C 72.236038,123.52813 102.94307,100.53529 122.99121,85.49958
C 146.99126,67.500015 189.99133,51.499714 217.99138,42.499702
C 243.25951,34.377808 297.45969,22.180216 323.99234,21.49992
C 401.99304,19.499987 423.3172,21.685627 497.32446,56.185596
C 532.84088,72.742287 591.66083,116.8151 614.9928,144.50041"/>
<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
sprialPanelStyle}"/>

  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］キーを押してアプリケーションを実行します。C1CarouselPanel コントロール内の項目は、らせん状に移動します。

関連トピック
ScrollViewer の使用

 

 

Copyright © GrapeCity Inc. All rights reserved.