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

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

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

次の手順に従います。

  1. Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。

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

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

    • WPF: C1.WPF.4.dll
    • Silverlight: C1.Silverlight.5.dll
  5. <Grid> タグと タグの間に次の <StackPanel>> マークアップを追加して、TextBlock と ProgressBar を含む StackPanel を追加します。
    XAML
    コードのコピー 
    <StackPanel x:Name="loading" VerticalAlignment="Center">
    <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/>
    <ProgressBar IsIndeterminate="True" Width="200"  Height="4"/>
</StackPanel>
  6. ツールボックスに移動し、［C1ListBox］アイコンをダブルクリックして、コントロールをグリッドに追加します。これで、参照と XAML 名前空間が自動的に追加されます。
  7. <c1:C1ListBox>タグを編集して、コントロールをカスタマイズします。
XAML
コードのコピー 
<c1:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" Zoom="Fill" ViewportGap="0" RefreshWhileScrolling="False"></c1:C1ListBox>
これは、コントロールに名前を付け、コントロールの連結、背景、表示/非表示、サイズ、および更新機能をカスタマイズします。
  1. <c1:C1ListBox> タグと <<c1:C1ListBox>> タグの間に、次のマークアップを追加します。
XAML
コードのコピー 
<c1:C1ListBox.PreviewItemTemplate>
    <DataTemplate>
        <Grid Background="Gray">
            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
        </Grid>
    </DataTemplate>
</c1:C1ListBox.PreviewItemTemplate>
<c1:C1ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Image Source="{Binding Content}" Stretch="UniformToFill"/>
            <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
        </Grid>
    </DataTemplate>
</c1:C1ListBox.ItemTemplate>
このマークアップは、C1 ListBox コントロールのコンテンツのデータテンプレートを追加します。このコントロールの連結はコードで行います。

この手順では、フォトストリームから画像を表示するコードを追加します。

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

  1. ［ページ］を選択して［プロパティ］ウィンドウに移動し、稲妻の［イベント］ボタンをクリックしてイベントを表示します。次に、下にスクロールして、Loaded イベントの横にある領域をダブルクリックします。

    これで、コードエディタが開き、Page_Loaded イベントが追加されます。

  1. 次の imports 文をページの先頭に追加します。
Visual Basic
コードのコピー 
'WPF
Imports System.Linq
Imports System.Windows.Controls
Imports System.Windows
Imports System.Collections.Generic
Imports System.Net
Imports System.Xml.Linq
Imports System
Imports C1.WPF
OR
'Silverlight
Imports C1.Silverlight
Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Linq
Imports System.Xml.Linq
Imports System.Net
Imports System.Collections.ObjectModel

C#
コードのコピー 
//WPF
using System.Linq;
using System.Windows.Controls;
using System.Windows;
using System.Collections.Generic;
using System.Net;
using System.Xml.Linq;
using System;
using C1.WPF;
OR
//Silverlight
using C1.Silverlight;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using System.Collections.ObjectMode;
  1. 最初のイベントハンドラ内に次のコードを追加します。
Visual Basic
コードのコピー 
DataContext = Enumerable.Range(0, 100)
AddHandler Loaded, AddressOf ListBoxSample_Loaded

C#
コードのコピー 
DataContext = Enumerable.Range(0, 100);
Loaded += new System.Windows.RoutedEventHandler(ListBoxSample_Loaded);
  1. MainPage or MainWindow class クラス内に次のコードを追加します。
Visual Basic
コードのコピー 
Private Sub ListBoxSample_Loaded(sender As Object, e As RoutedEventArgs)
        LoadPhotos()
    End Sub
    Private Sub LoadPhotos()
        Dim flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"
        Dim AtomNS = "http://www.w3.org/2005/Atom"
        loading.Visibility = Visibility.Visible
        retry.Visibility = Visibility.Collapsed
        Dim photos = New List(Of Photo)()
        Dim client = New WebClient()
        AddHandler client.OpenReadCompleted, Function(s, e)
                                                 Try
                                                     '#Region "** flickr データの解析"
                                                     Dim doc = XDocument.Load(e.Result)
                                                     For Each entry In doc.Descendants(XName.[Get]("entry", AtomNS))
                                                         Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value
                                                         Dim enclosure = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "enclosure").FirstOrDefault()
                                                         Dim contentUri = enclosure.Attribute("href").Value
                                                         photos.Add(New Photo() With { _
                                                          .Title = title, _
                                                          .Content = contentUri, _
                                                          .Thumbnail = contentUri.Replace("_b", "_m") _
                                                         })
                                                     Next
                                                     '#End Region
                                                     listBox.ItemsSource = photos
                                                     loading.Visibility = Visibility.Collapsed
                                                     listBox.Visibility = Visibility.Visible
                                                 Catch
                                                     MessageBox.Show("There was an error when attempting to download data from Flickr.")
                                                     loading.Visibility = Visibility.Collapsed
                                                     retry.Visibility = Visibility.Visible
                                                 End Try
                                             End Function
        client.OpenReadAsync(New Uri(flickrUrl))
    End Sub
    Private Sub Retry_Click(sender As Object, e As RoutedEventArgs)
        LoadPhotos()
    End Sub
#Region "** public properties"
    Public Property Orientation() As Orientation
        Get
            Return listBox.Orientation
        End Get
        Set(value As Orientation)
            listBox.Orientation = value
        End Set
    End Property
    Public Property ItemWidth() As Double
        Get
            Return listBox.ItemWidth
        End Get
        Set(value As Double)
            listBox.ItemWidth = value
        End Set
    End Property
    Public Property ItemHeight() As Double
        Get
            Return listBox.ItemHeight
        End Get
        Set(value As Double)
            listBox.ItemHeight = value
        End Set
    End Property
    Public Property ZoomMode() As ZoomMode
        Get
            Return listBox.ZoomMode
        End Get
        Set(value As ZoomMode)
            listBox.ZoomMode = value
        End Set
    End Property
#End Region

C#
コードのコピー 
 void ListBoxSample_Loaded(object sender, RoutedEventArgs e)
        {
            LoadPhotos();
        }
        private void LoadPhotos()
        {
            var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
            var AtomNS = "http://www.w3.org/2005/Atom";
            loading.Visibility = Visibility.Visible;
            retry.Visibility = Visibility.Collapsed;
            var photos = new List<Photo>();
            var client = new WebClient();
            client.OpenReadCompleted += (s, e) =>
            {
                try
                {
                    #region ** parse flickr data
                    var doc = XDocument.Load(e.Result);
                    foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
                    {
                        var title = entry.Element(XName.Get("title", AtomNS)).Value;
                        var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault();
                        var contentUri = enclosure.Attribute("href").Value;
                        photos.Add(new Photo() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b", "_m") });
                    }
                    #endregion
                    listBox.ItemsSource = photos;
                    loading.Visibility = Visibility.Collapsed;
                    listBox.Visibility = Visibility.Visible;
                    retry.Visibility = Visibility.Collapsed;
                }
                catch
                {
                    MessageBox.Show("There was an error when attempting to download data from Flickr.");
                    listBox.Visibility = Visibility.Collapsed;
                    loading.Visibility = Visibility.Collapsed;
                    retry.Visibility = Visibility.Visible;
                }
            };
            client.OpenReadAsync(new Uri(flickrUrl));
        }
        private void Retry_Click(object sender, RoutedEventArgs e)
        {
            LoadPhotos();
        }
        #region ** public properties
        public Orientation Orientation
        {
            get
            {
                return listBox.Orientation;
            }
            set
            {
                listBox.Orientation = value;
            }
        }
        public double ItemWidth
        {
            get
            {
                return listBox.ItemWidth;
            }
            set
            {
                listBox.ItemWidth = value;
            }
        }
        public double ItemHeight
        {
            get
            {
                return listBox.ItemHeight;
            }
            set
            {
                listBox.ItemHeight = value;
            }
        }
        public ZoomMode ZoomMode
        {
            get
            {
                return listBox.ZoomMode;
            }
            set
            {
                listBox.ZoomMode = value;
            }
        }
        #endregion
  1. 上のコードは、Flickr のパブリックフォトストリームから画像を取得し、それらの画像のリストに C1ListBox を連結します。
  1. MainPage クラスの直後に次のコードを追加します。
Visual Basic
コードのコピー 
Public Class Photo
    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
    Public Property Content() As String
        Get
            Return m_Content
        End Get
        Set(value As String)
            m_Content = Value
        End Set
    End Property
    Private m_Content As String
End Class
C#
コードのコピー 
public class Photo
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        public string Content { get; set; }
    }

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

これまでに WPF/Silverlight アプリケーションを作成し、外観と動作をカスタマイズしたので、次にアプリケーションを実行します。アプリケーションを実行し、ListBox for WPF/Silverlight の実行時の動作を確認するには、次の手順に従います。

  1. ［デバッグ］メニューから［デバッグ開始］を選択し、実行時にアプリケーションがどのように表示されるかを確認します。

  2. アプリケーションが表示され、画像が表示されます。

  3. コントロールの右側にあるスクロールバーを使用して、イメージストリームをスクロールします。

タッチ機能がある場合は、ピンチして画像をズームしてみてください。

おめでとうございます!

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

 

 

Copyright © GrapeCity, Inc. All rights reserved.