2013年06月23日

WPFサンプル:イベントトリガーでアニメーションを起動する

   このエントリーをはてなブックマークに追加 Clip to Evernote
イベントトリガーを設定すると、マウスがクリックされたなどのイベントに応じて、スタイルを変更することができます。イベントトリガーは、XAMLでは、<EventTrigger>要素を用いますが、プロパティトリガーと異なり、<Setter>要素でプロパティ値を変更することができません。指定できるのは、一連のアクション(アニメーション ストーリーボード) となります。
以下にXAMLの例を示します。

<Window x:Class="EventTriggerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        Background="Khaki">
    <Window.Resources>
        <Storyboard FillBehavior="HoldEnd" x:Key="myStoryboard" >
            <DoubleAnimation
                Storyboard.TargetName="textBox1"
                Storyboard.TargetProperty="FontSize"
                From="12" To="28" Duration="0:0:01" />
        </Storyboard>
    </Window.Resources>
    <Grid Background="White" Name="grid" >
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard >
                    <Storyboard FillBehavior="HoldEnd" >
                        <DoubleAnimation
                            Storyboard.TargetName="grid"
                            Storyboard.TargetProperty="Opacity"
                            From="0" To="1" Duration="0:0:01" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <StackPanel Name="stackPanel" HorizontalAlignment="Left" Width="185" >
            <Button Content="Button" Height="23" Name="button1" Width="180"
                    HorizontalAlignment="Left" Margin="2" >
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}" />
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <TextBox Name="textBox1" Width="180" Text="TextBlock"
                     HorizontalAlignment="Left" Margin="2" FontSize="12" />
        </StackPanel>
    </Grid>
</Window>

ここでは、2つのイベントトリガーを利用してます。
ひとつは、GridのLoadedイベントが発生した時のトリガー。もう一つは、ButtonのClickイベントが発生した時のトリガーです。
Grid.Loadedでは、GridのOpacityプロパティの値を 0 から 1 に変化させています。
Window.Background には "Khaki"が設定されていますので、徐々に、Khaki から Whiteに変化します。

ふたつ目はButton.Clickで、TextBoxのFontSizeを 12 から 28 に変化させ、また 12 に戻しています。
プロパティトリガーでは、一瞬でプロパティの値が変更してしまうのに対し、イベントトリガーでは、プロパティ値をDurationで与えた時間で滑らかに変化させることができます。

※ 今回、WPFサンプルシリーズで初めてアニメーションを使いましたが、アニメーションについて別途サンプルを掲載したいと思います。
Grid.Loadedは、リソースへの定義をせずに、直接 Storyboard を Grid.Triggers要素配下に記述しています。
Button.Clickでは、Window.Resources に定義した Storyboardを指定しています。


コードビハインドには特に何も追加する必要はありません。XAMLのみで実現しています。
以下、ボタンをクリックした時のスクリーンショットです。

eventTrigger1
eventTrigger2
eventTrigger3

WPFサンプル・目次
  

Posted by gushwell at 21:22Comments(0)TrackBack(0)

2013年06月20日

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

   このエントリーをはてなブックマークに追加 Clip to Evernote
データトリガーには、MultiDataTriggerというものも用意されています。
このトリガーは、バインドされたデータが一連の条件を満たしたときに、プロパティ値を適用するかアクションを実行します。

MultiDataTriggerの例を以下に示します。
WPFサンプル:データトリガーを使う」のXAMLの Style.Triggers要素に、以下の行を追加しています。

   <MultiDataTrigger>
       <MultiDataTrigger.Conditions>
           <Condition Binding="{Binding Path=Name}" Value="横浜" />
           <Condition Binding="{Binding Path=Prefecture}" Value="神奈川" />
       </MultiDataTrigger.Conditions>
       <Setter Property="Background" Value="Bisque" />
   </MultiDataTrigger>

この例では、2つの条件が一致したときに、Background プロパティの値が指定した値に変更されます。
以下、実行結果です。

DataTrigger2

XAML全体とC#のコードも掲載しておきます。

<Window x:Class="MultiDataTriggerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:MultiDataTriggerSample"
        Title="MainWindow" Height="150" 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>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=Name}" Value="横浜" />
                        <Condition Binding="{Binding Path=Prefecture}" Value="神奈川" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Bisque" />
                </MultiDataTrigger>
            </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}}"/>
    </StackPanel>
</Window>

using System.Collections.ObjectModel;
using System.Windows;
namespace MultiDataTriggerSample {
    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; }
    }
}


WPFサンプル・目次
  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

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サンプル・目次
  
Posted by gushwell at 20:51Comments(0)TrackBack(0)

2013年06月16日

WPFサンプル:プロパティトリガーでコントロールのプロパティ値を変更する

   このエントリーをはてなブックマークに追加 Clip to Evernote
プロパティトリガーを使うと、あるプロパティの値が変化した時に、別のプロパティの値を変更することができます。トリガーの条件が満たされなくなると、自動的に前の状態に戻ります。
領域にマウスポインタが入ったかどうかを検出する」で、MouseEnter, MouseLeave イベントを使い、 コントロールの上にマウスが来た時に、Rectangleの見た目を変化させるサンプルをお見せしましたが、 プロパティトリガーを使っても同様のことが可能です。

ここでお見せする例は、ButtonのIsMouseOverプロパティが、trueに変更された時に、HeightとForegroundプロパティの値を変更する例です。

イベントでは、コードビハインドにイベントハンドラを記述する必要がありましたが、 Triggerを使うと、XAMLだけでこれが可能になります。

XAMLをお見せします。


XAMLを見ていただければお分かりになると思いますが、Styleを定義しています。
StyleのTriggersタグで、対象となるプロパティと、そのプロパティ値が変更になったら、 どのプロパティ値をどう変えるのかを指定しています。

以下実行結果です。

propertyTriger1
propertyTriger2
propertyTriger3

注意すべき点は、 Buttonタグで、 Height, Foreground プロパティの値を設定してある場合は、トリガーが有効に働かないということです。そのため、ボタンの高さの初期値を変更したい場合は、 Style で初期値を指定してあげる必要があります。
上の例でも、StyleでHeight値を 40 にして高さを変更しています。
  
Posted by gushwell at 22:00Comments(4)TrackBack(0)