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

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

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

次の手順に従います。

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

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

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

    C1.WPF.4.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

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;
  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 アプリケーションを作成し、外観と動作をカスタマイズしたので、次にアプリケーションを実行します。アプリケーションを実行し、ListBox for WPF の実行時の動作を確認するには、次の手順に従います。

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

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

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

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

おめでとうございます!

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

 

 

Copyright © MESCIUS inc. All rights reserved.