Basic Library for WPF/Silverlight
C1TileListBox クイックスタート
製品の概要 > ListBox > C1TileListBox クイックスタート

このクイックスタートは、C1TileListBox コントロールを初めて使用するユーザーのために用意されています。このクイックスタートガイドでは、最初に Visual Studio で新しいプロジェクトを作成し、アプリケーションに C1TileListBox を追加して、コントロールの外観と動作をカスタマイズします。

この手順では、Visual Studio で、TileListBox for WPF/Silverlight を使用して WPF/Silverlight アプリケーションを作成します。

プロジェクトを設定するには次の手順に従います。

  1. Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
  2. ［新しいプロジェクト］ダイアログボックスの左ペインから言語を選択し、テンプレートリストから［WPF アプリケーション］または［Silverlight アプリケーション］を選択します。プロジェクトの名前を入力し、［OK］をクリックします。［新しい WPF アプリケーション］ダイアログボックスが表示されます。
  3. ［OK］をクリックしてデフォルト設定を受け入れ、新しい［WPF アプリケーション］または［Silverlight アプリケーション］ダイアログボックスを閉じると、プロジェクトが作成されます。MainPage.xaml ファイルが開きます。

  4. 参照の追加ダイアログボックスで、以下のアセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追加します。

    • WPF: C1.WPF.4.dll
    • Silverlight: C1.Silverlight.5.dll
  5. カーソルを <Grid> タグと </Grid> タグの間に置き、ツールボックスに移動します。C1TileListBox アイコンをダブルクリックして、このコントロールをグリッドに追加します。これで、参照と XAML 名前空間が自動的に追加されます。
  6. <c1:C1TileListBox> タグを編集して、コントロールをカスタマイズします。
    XAML
    コードのコピー 
    <c1:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" ItemWidth="130" ItemHeight="130"></c1:C1TileListBox>

    これは、コントロールに名前を付け、ItemsSource プロパティを設定し（後でこのプロパティをコードでカスタマイズします）、コントロールのサイズを設定します。

  7. <c1:C1TileListBox> タグと </c1:C1TileListBox> タグの間にマークアップを追加します。コードは次のようになります。
XAML
コードのコピー 
<c1:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" ItemWidth="130" ItemHeight="130">
    <c1:C1TileListBox.PreviewItemTemplate>
        <DataTemplate>
            <Grid Background="Gray" />
                </DataTemplate>
                </c1:C1TileListBox.PreviewItemTemplate>
                <c1:C1TileListBox.ItemTemplate>
                <DataTemplate>
                <Grid Background="LightBlue">
                    <Image Source="{Binding Thumbnail}" Stretch="UniformToFill" />
                    <TextBlock Text="{Binding Title}" Margin="4 0 0 4" VerticalAlignment="Bottom" />
               </Grid>
        </DataTemplate>
    </c1:C1TileListBox.ItemTemplate>
</c1:C1TileListBox>

このマークアップは、C1TileListBox コントロールのコンテンツのデータテンプレートを追加します。このコントロールの連結はコードで行います。

前の手順では、C1TileListBox コントロールをアプリケーションに追加しました。この手順では、コントロールをデータに連結するコードを追加します。


プログラムでコントロールにデータを追加するには、次の手順に従います。

  1. ページを右クリックし、［コードの表示］を選択してコードエディタを開きます。
  2. 次の imports 文をページの先頭に追加します
Visual Basic
コードのコピー 
Imports System
Imports System.Collections.Generic
Imports System.Diagnostics
Imports System.Linq
Imports System.Net
Imports System.Windows;
Imports System.Windows.Controls;
Imports System.Xml.Linq;
Imports C1.WPF
OR
Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Linq
Imports System.Xml.Linq
Imports System.Net
Imports C1.Silverlight
C#
コードのコピー 
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Xml.Linq;
using C1.WPF;
OR
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using C1.Silverlight;
  1. MainPage クラス内の最初のイベントハンドラ内に次のコードを追加します。
Visual Basic
コードのコピー 
DataContext = Enumerable.Range(0, 100).[Select](Function(i) New Item() With {.Title = i.ToString()})
C#
コードのコピー 
DataContext = Enumerable.Range(0, 100).Select(i => new Item { Title = i.ToString() });
  1. MainPage クラス内の最初のイベントハンドラの下に次のコードを追加します。
Visual Basic
コードのコピー 
#Region "** public properties"
    Public Property Orientation() As Orientation
        Get
            Return tileListBox.Orientation
        End Get
        Set(value As Orientation)
            tileListBox.Orientation = value
        End Set
    End Property
    Public Property ItemWidth() As Double
        Get
            Return tileListBox.ItemWidth
        End Get
        Set(value As Double)
            tileListBox.ItemWidth = value
        End Set
    End Property
    Public Property ItemHeight() As Double
        Get
            Return tileListBox.ItemHeight
        End Get
        Set(value As Double)
            tileListBox.ItemHeight = value
        End Set
    End Property
    Public Property ZoomMode() As ZoomMode
        Get
            Return tileListBox.ZoomMode
        End Get
        Set(value As ZoomMode)
            tileListBox.ZoomMode = value
        End Set
    End Property
#End Region
C#
コードのコピー 
#region ** public properties
        public Orientation Orientation
        {
            get
            {
                return tileListBox.Orientation;
            }
            set
            {
                tileListBox.Orientation = value;
            }
        }
        public double ItemWidth
        {
            get
            {
                return tileListBox.ItemWidth;
            }
            set
            {
                tileListBox.ItemWidth = value;
            }
        }
        public double ItemHeight
        {
            get
            {
                return tileListBox.ItemHeight;
            }
            set
            {
                tileListBox.ItemHeight = value;
            }
        }
        public ZoomMode ZoomMode
        {
            get
            {
                return tileListBox.ZoomMode;
            }
            set
            {
                tileListBox.ZoomMode = value;
            }
        }
#endregion

上のコードは、C1TileListBox を数値のリストに連結します。

  1. MainPage クラスの直後に次のコードを追加します。
Visual Basic
コードのコピー 
Public Class Item
    Public Property Title() As String
        Get
            Return m_Title
        End Get
        Set(value As String)
            m_Title = Value
        End Set
    End Property
    Private m_Title As String
    Public Property Thumbnail() As String
        Get
            Return m_Thumbnail
        End Get
        Set(value As String)
            m_Thumbnail = Value
        End Set
    End Property
    Private m_Thumbnail As String
End Class
C#
コードのコピー 
public class Item
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
    }

これで、C1TileTileListBox にデータを追加できました。次の「手順 3：TileListBox アプリケーションの実行」では、TileListBox for  の機能について説明します。

これまでに WPF/Silverlight アプリケーションを作成し、外観と動作をカスタマイズしたので、次にアプリケーションを実行します。

アプリケーションを実行し、TileListBox for WPF/Silverlight の実行時の動作を確認するには、次の手順に従います。

  1. ［デバッグ］メニューから［デバッグ開始］を選択し、実行時にアプリケーションがどのように表示されるかを確認します。
  2. アプリケーションが表示され、数値のリストがタイル表示されます。
  3. コントロールの右側にあるスクロールバーを使用して、番号付きのタイルをスクロールします。
  4. タッチ機能がある場合は、ピンチして画像をズームしてみてください。

おめでとうございます!

これで TileListBox for WPF/Silverlight  クイックスタートは完了です。C1TileListBox コントロールを使用するアプリケーションを作成し、アプリケーションの実行時機能をいくつか確認することができました。

 

 

Copyright © GrapeCity, Inc. All rights reserved.