2013年06月19日

WPFサンプル:データトリガーを使う

   このエントリーをはてなブックマークに追加 Clip to Evernote
データトリガーを使うと、バインドされたデータが指定した条件を満たしたときに、プロパティ値を変更したり、アクションを実行したりすることができます。データトリガーを有効にするには、 DataTrigger要素のBinding とValueの2つのプロパティを指定する必要があります。

データトリガーのサンプルとして、ListBoxい表示されているアイテムの表示(色)がバインドさrているデータの値によって変化するサンプルを書いてみました。
今回は、C#のコードから見てください。

using System.Collections.ObjectModel;
using System.Windows;
namespace DataTriggerSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class Places : ObservableCollection<Place> {
        public Places() {
            Add(new Place { Name = "宇都宮", Prefecture = "栃木" });
            Add(new Place { Name = "川口", Prefecture = "埼玉" });
            Add(new Place { Name = "春日部", Prefecture = "埼玉" });
            Add(new Place { Name = "日光", Prefecture = "栃木" });
            Add(new Place { Name = "横浜", Prefecture = "神奈川" });
            Add(new Place { Name = "仙台", Prefecture = "宮城" });
        }
    }
    public class Place {
        public string Name { get; set; }
        public string Prefecture { get; set; }
    }
}

PlaceとPlacesクラスを定義しています。 Placesクラスは、ObservableCollection<T>を継承させています。
このオブジェクトをListBoxにバインドします。その要素であるPlaceクラスには、Nameプロパティおよび Prefectureプロパティがあります。
XAMLでは、このPlacesのオブジェクトをListBoxにバインドそ表示しています。そしてデータトリガーを使い、Prefectureプロパティが "栃木" の場合に、対応するListBoxItemの前景が青色になるように指定しています。
XAMLを示します。

<Window x:Class="DataTriggerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:DataTriggerSample"
        Title="MainWindow" Height="250" Width="300">
    <Window.Resources>
        <my:Places x:Key="PlacesData"/>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Prefecture}" Value="栃木">
                    <Setter Property="Foreground" Value="Blue" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate DataType="{x:Type my:Place}">
            <StackPanel Width="160" Orientation="Horizontal">
                <TextBlock  Width="100"
                           Text="{Binding Path=Name}" Margin="5,0,0,0"/>
                <TextBlock  Width="50"
                           Text="{Binding Path=Prefecture}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <StackPanel>
        <ListBox Width="180" HorizontalAlignment="Center" Background="Snow"
                 ItemsSource="{Binding Source={StaticResource PlacesData}}" FontSize="16" />
    </StackPanel>
</Window>

Style.Triggersコレクションプロパティの要素として、DataTriggerを指定しています。Prefecture、が"栃木"の時に、ForegroundをBlueに設定しています。

結果を以下に示します。

DataTrigger

WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52324590