【雑記】 Visual Studio LightSwitch

  • 2011.05.31 Tuesday
  • 22:23
JUGEMテーマ:コンピュータ
 

 Visual Studio LightSwitch って何だろう??

【WPF】GoToStateActionを使ってみた。

  • 2011.05.28 Saturday
  • 17:22
JUGEMテーマ:コンピュータ



Source and Project

GoToStateActionを使ってみました。
動きは

監視しているコントロールから、
EventNameで指定したイベントが発生した場合
指定した状態へ移行する。
前提条件:状態はVisualStateManagerで管理されている状態であること。


「指定した状態へ移行する。」という部分がGoToStateActionで実現されます。

サンプルコードを書いてみました。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="GoToStateActionDemo20110528_001.MainWindow"
    Title="MainWindow" Height="200" Width="300">
  <Grid>
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="VisualStateGroup">
        <VisualState x:Name="redState">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                            Storyboard.TargetName="label">
              <EasingColorKeyFrame KeyTime="0" Value="Red"/>
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="yelloState">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                            Storyboard.TargetName="label">
              <EasingColorKeyFrame KeyTime="0" Value="#FFDAFF00"/>
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label x:Name="label">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseDown">
          <ei:GoToStateAction StateName="redState" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseUp">
          <ei:GoToStateAction StateName="yelloState" />
        </i:EventTrigger>
      </i:Interaction.Triggers>

    </Label>
  </Grid>
</Window>

MouseDownイベントが発生するとredStateの状態になり、
MouseUpイベントが発生するとyelloStateの状態になります。

実際に実行してみると




マウスをクリックした状態で
WinShotという画像キャプチャツールを使って、操作の途中でキャプチャを撮っていたら
MouseUpイベントが拾えなかったか、描画がはしらなかったのか
本当なら色が黄色になっているはずなのに、赤のままになっていました。
と、まあ必ず期待するとおり動くわけでもないようです。

Source and Project

----------------
当記事で紹介しているサンプルコードはBlend 4 SDKを使用しています。
Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4
http://www.microsoft.com/downloads/ja-jp/details.aspx?displaylang=ja&FamilyID=75e13d71-7c53-4382-9592-6c07c6a00207
----------------

【WPF】EventTriggerとChangePropertyAction

  • 2011.05.28 Saturday
  • 17:21



Source and Project

Blend SDKを使用してEventTriggerとChangePropertyActionを使用してみた。
EventTriggerとChangePropertyActionを利用すると

XXXXイベントが発生したときに
XXXXオブジェクトの
XXXXプロパティに
XXXXという値を設定する。

ということがXAMLで実現できる。下記のXAMLではRegularPolygon.Fillプロパティに対する操作を行っているが、その操作が操作元の添付プロパティとして記述されているため、操作元の数だけ記述できることになる。

 <Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
  x:Class="ChangePropertyActionDemo20110524_101.MainWindow"
  Title="星の着せ替え" Height="350" Width="525">
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto" />
   <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  
  <Grid Grid.Row="0">
   <Grid.Resources>
    <Style TargetType="{x:Type Rectangle}">
     <Setter Property="Height" Value="30" />
     <Setter Property="Width" Value="30" />
     <Setter Property="Margin"  Value="4" />
    </Style>
   </Grid.Resources>

   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

   <Rectangle Fill="Red" Grid.Column="0">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="MouseLeftButtonDown">
      <ei:ChangePropertyAction TargetName="regularPolygon"
             PropertyName="Fill"
             Value="Red">
      </ei:ChangePropertyAction>
     </i:EventTrigger>
    </i:Interaction.Triggers>
   </Rectangle>
   <Rectangle Fill="Blue" Grid.Column="1">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="MouseLeftButtonDown">
      <ei:ChangePropertyAction TargetName="regularPolygon"
              PropertyName="Fill"
              Value="Blue">
      </ei:ChangePropertyAction>
     </i:EventTrigger>
    </i:Interaction.Triggers>
   </Rectangle>
   <Rectangle Fill="Green" Grid.Column="2">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="MouseLeftButtonDown">
      <ei:ChangePropertyAction TargetName="regularPolygon"
             PropertyName="Fill"
             Value="Green">
      </ei:ChangePropertyAction>
     </i:EventTrigger>
    </i:Interaction.Triggers>
   </Rectangle>
  </Grid>
  
  <ed:RegularPolygon x:Name="regularPolygon"
         Fill="#FFF4F4F5"
         InnerRadius="0.47211"
         PointCount="5" 
         VerticalAlignment="Center"
         HorizontalAlignment="Center"
         Grid.Row="1"
         Width="100"
         Height="100"
         Stroke="Black"/>
 </Grid>
</Window>

実行してみると





星の色がいろいろ変わる。

Source and Project

----------------
当記事で紹介しているサンプルコードはBlend 4 SDKを使用しています。
Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4
http://www.microsoft.com/downloads/ja-jp/details.aspx?displaylang=ja&FamilyID=75e13d71-7c53-4382-9592-6c07c6a00207
----------------

【WPF】FluidMoveBehaviorを使って見た。2

  • 2011.05.27 Friday
  • 22:20
JUGEMテーマ:コンピュータ



Source and Project
 
FluidMoveBehaviorの使って遊んでみました。第二弾です。
FluidMoveBehaviorは指定した要素の座標変更があった場合に、座標変更がアニメーション化されますが、要素の座標が変更されるタイミングはいろいろあります。前回はPanelのリサイズでの座標変更をアニメーション化しましたが、今回はStackPanel内の要素の順序の変更による座標変更によるアニメーション化をみたいと思います。もちろんPanelのサイズ変更でもアニメーション化はされます。

コードは下記の通り。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Name="window"
    x:Class="FluidMoveBehaviorDemo20110527_001.MainWindow"
    Title="MainWindow" Height="180" Width="300">
 <Window.Resources>
  <Style TargetType="{x:Type ed:RegularPolygon}">
   <Setter Property="Height" Value="30" />
   <Setter Property="Width" Value="30" />
   <Setter Property="InnerRadius" Value="0.47211" />
   <Setter Property="PointCount" Value="25" />
   <Setter Property="Stroke" Value="Black" />
  </Style>
 </Window.Resources>
  <Grid>
    <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    
    <Grid Grid.Row="0">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Button MinWidth="100" Margin="8" Content="実行">
        <i:Interaction.Triggers>
          <i:EventTrigger EventName="Click">
            <ei:CallMethodAction MethodName="Turn"
                       TargetObject="{Binding ElementName=window}" />
          </i:EventTrigger>
        </i:Interaction.Triggers>
      </Button>
    </Grid>
    
    <StackPanel x:Name="panel" Grid.Row="1" Margin="8"
       Orientation="Horizontal"
      Background="AliceBlue">
      
     <i:Interaction.Behaviors>
      <ei:FluidMoveBehavior AppliesTo="Children">
       <ei:FluidMoveBehavior.EaseX>
        <QuinticEase EasingMode="EaseOut"/>
       </ei:FluidMoveBehavior.EaseX>
      </ei:FluidMoveBehavior>
     </i:Interaction.Behaviors>
      
     <ed:RegularPolygon Fill="#FFC05252" />
     <ed:RegularPolygon Fill="#FFBFC052" />
     <ed:RegularPolygon Fill="#FF74C052" />
     <ed:RegularPolygon Fill="#FF52B8C0" />
     <ed:RegularPolygon Fill="#FF527CC0" />
     <ed:RegularPolygon Fill="#FF8352C0" />
     <ed:RegularPolygon Fill="#FFB052C0" />
     <ed:RegularPolygon Fill="#FFC052B7" />
      
    </StackPanel>
  </Grid>
</Window>

  public partial class MainWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    public void Turn()
    {
      UIElement element = panel.Children.Cast<UIElement>().Last();
      panel.Children.Remove(element);
      panel.Children.Insert(0, element);
    }

  }

実行してみると








くるくる回ります。座標を変更させる操作はまだ他にもいろいろあるので試してみると面白いと思います。ListBoxなどを複合させるとさらに面白いことができそうですよ。

Source and Project

----------------
当記事で紹介しているサンプルコードはBlend 4 SDKを使用しています。
Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4
http://www.microsoft.com/downloads/ja-jp/details.aspx?displaylang=ja&FamilyID=75e13d71-7c53-4382-9592-6c07c6a00207
----------------

【.NET】Wintellect's Power Collections for .NET

  • 2011.05.26 Thursday
  • 23:30
JUGEMテーマ:コンピュータ

 プログラミング .NET Framework 第3版を読んでいたら「Wintellect's Power Collections for .NET 」というライブラリーが紹介されていた。

http://powercollections.codeplex.com/

C++のSTLの一部のクラスが実装されているようで、
試しに使って見た。

    static void Main(string[] args)
    {
      var set = new Set<string>();
      set.Add("1");
      set.Add("2");
      set.Add("2");
      set.Add("1");
      set.Add("3");
      set.Add("3");
      set.Add("1");

      foreach (string s in set)
      {
        Console.WriteLine(s);
      }
    }

いや、使ってみただけです。

-----------------
一部の機能を使ってみただけで分かった気になっているヤツがいるみたいな風な事を言われそうですが
分かっていませんので、お間違えのないように!!

【WPF】FluidMoveSetTagBehaviorとFluidMoveBehaviorを試してみた2

  • 2011.05.26 Thursday
  • 21:06
JUGEMテーマ:コンピュータ



Source and Project

【WPF】FluidMoveSetTagBehaviorとFluidMoveBehaviorを試してみた(http://pro.art55.jp/?eid=1303832)では、ItemsControl内選択した要素が、ItemsPanel内にあるPanelから、別のパネルへ移動するというアニメーションを作成した。今回はもっとシンプルにPanelからPanelを移動するサンプルコードを作成してみた。

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
  x:Class="FluidMoveSetTagBehaviorDemo20110526_101.MainWindow"
  Title="MainWindow" Height="350" Width="400">
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto" />
   <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Grid>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Button VerticalAlignment="Top" HorizontalAlignment="Left" Click="OnMoveRight" Width="80" Margin="2" Grid.Column="0" Content="移動"/>
   <Button VerticalAlignment="Top" HorizontalAlignment="Left" Click="OnMoveLeft" Width="80" Margin="2" Grid.Column="1" Content="戻す"/>
  </Grid>

  <Grid Grid.Row="1">
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <WrapPanel x:Name="leftPanel" Background="AliceBlue" Grid.Column="0" Margin="10">
    <i:Interaction.Behaviors>
     <ei:FluidMoveSetTagBehavior
      AppliesTo="Children"/>
    </i:Interaction.Behaviors>

    <Rectangle Height="20" Width="20" Fill="DarkBlue" Margin="10"/>
    <Rectangle Height="20" Width="20" Fill="DarkBlue" Margin="10"/>
    <Rectangle Height="20" Width="20" Fill="DarkBlue" Margin="10"/>
    <Rectangle Height="20" Width="20" Fill="DarkBlue" Margin="10"/>
    
   </WrapPanel>
   <WrapPanel x:Name="rightPanel" Background="AliceBlue" Grid.Column="1" Margin="10" Orientation="Vertical">
    <i:Interaction.Behaviors>
     <ei:FluidMoveBehavior
      AppliesTo="Children"/>
    </i:Interaction.Behaviors>
   </WrapPanel>

  </Grid>
 </Grid>
</Window>

上の「移動」ボタンが押されれると下記の処理が走る。

private void OnMoveRight(object sender, RoutedEventArgs e)
{
 Move(leftPanel, rightPanel);
}

private void Move(Panel from, Panel to)
{
 List<UIElement> elements = from.Children.Cast<UIElement>().ToList();
 from.Children.Clear();
 foreach (UIElement uiElement in elements)
 {
  to.Children.Add(uiElement);
 }
}

左のPanel内にある要素を全て右のPanelにある要素に移し替えるという処理だが、左のPanelにFluidMoveSetTagBehaviorが設定され、右のパネルにFluidMoveBehavior が設定されているため、左のPanelに要素が追加された祭に、もともとあった座標から移動のアニメーションが実現されれる。

実際に実行してみると






と、まあ移動アニメーションが作成できる。これさえ分かっていれば応用範囲は多いいのではないかと思う。

Source and Project


----------------
当記事で紹介しているサンプルコードはBlend 4 SDKを使用しています。
Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4
http://www.microsoft.com/downloads/ja-jp/details.aspx?displaylang=ja&FamilyID=75e13d71-7c53-4382-9592-6c07c6a00207
----------------

【WPF】FluidMoveSetTagBehaviorとFluidMoveBehaviorを試してみた

  • 2011.05.26 Thursday
  • 01:24
JUGEMテーマ:コンピュータ

 

Source and Project

「【WPF】FluidMoveBehaviorを使って見た。(http://pro.art55.jp/?eid=1303831)」では純粋に「FluidMoveBehavior」のビヘイビアの挙動だけを試すサンプルコードを書いてみた。FluidMoveBehaviorの場合は、パネルのリサイズによる内部の要素の位置変更が発生した場合、元の位置から次への位置へ移動するまでがアニメーション化される。アニメーション化にはいろいろおもしろ動作が定義できるので、これだけでも十分に面白いが、「FluidMoveSetTagBehavior」を使うとさらに面白いことができる。FluidMoveSetTagBehaviorを使用すると、パネル内の移動ではなく、FluidMoveSetTagBehaviorで指定した位置からFluidMoveBehaviorで指定した要素への移動のアニメーションが実現される。

実装している最中にあれやこれやといじってしまったため、XAMLが汚く整理されていないが、とりあえず動くもは完成した。

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  xmlns:DataGridTemplateDemo20080817_001="clr-namespace:FluidMoveSetTagBehaviorDemo20110525"
  x:Class="FluidMoveSetTagBehaviorDemo20110525.MainWindow"
  Title="MainWindow" Height="350" Width="525" Background="Black">
 <Window.Resources>
  <DataGridTemplateDemo20080817_001:SampleSource x:Key="source" />
 </Window.Resources>

 <Grid Margin="2" >
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="180" />
   <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <ListBox x:Name="listBox" DataContext="{StaticResource source}" ItemsSource="{Binding .}" Background="#FF565656">
   <ListBox.ItemTemplate>
    <DataTemplate>
     <Grid Margin="2">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Viewbox Height="30">
       <Image Source="{Binding Uri}">
        <i:Interaction.Behaviors>
         <ei:FluidMoveSetTagBehavior Tag="DataContext"/>
        </i:Interaction.Behaviors>

       </Image>
      </Viewbox>

      <Grid Grid.Column="1">
       <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
       <Label Content="{Binding Name}" Grid.Row="1" FontSize="11" Foreground="White"/>
      </Grid>
     </Grid>
    </DataTemplate>
   </ListBox.ItemTemplate>

  </ListBox>

  <Grid Grid.Column="1" DataContext="{Binding SelectedItem, ElementName=listBox}" >
   <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <Image Source="{Binding Uri}" Margin="10">
    <i:Interaction.Behaviors>
     <ei:FluidMoveBehavior InitialTag="DataContext" FloatAbove="False" AppliesTo="Self">
      <ei:FluidMoveBehavior.EaseY>
       <CubicEase EasingMode="EaseIn"/>
      </ei:FluidMoveBehavior.EaseY>
      <ei:FluidMoveBehavior.EaseX>
       <CubicEase EasingMode="EaseIn"/>
      </ei:FluidMoveBehavior.EaseX>
     </ei:FluidMoveBehavior>
    </i:Interaction.Behaviors>

   </Image>

   <Grid Grid.Row="1">
    <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Foreground="White">名称</Label>
    <Label Grid.Row="0" Grid.Column="1" Content="{Binding Name}" Foreground="White"></Label>


    <Label Grid.Row="1" Grid.Column="0" Foreground="White">名称(和名)</Label>
    <Label Grid.Row="1" Grid.Column="1" Content="{Binding JapaneseName}" Foreground="White"></Label>

    <Label Grid.Row="2" Grid.Column="0" Foreground="White">産地</Label>
    <Label Grid.Row="2" Grid.Column="1" Content="{Binding location}" Foreground="White"></Label>
   </Grid>
  </Grid>
 </Grid>
</Window>

内部の仕組みをあまり理解していないので、ただしく解説できないので、もうちょっと勉強してからまとめたい。今回は「かいてみたどー」レベルで・・・いつもそうだけど・・・。

画像キャプチャではわかりにくいかもしれないが、クリック元の一覧から右の詳細へ画像が移動しているのが確認できる。





Source and Project

【WPF】FluidMoveBehaviorを使って見た。

  • 2011.05.25 Wednesday
  • 22:31
JUGEMテーマ:コンピュータ

 

使えるかどうかは別として、Blend 4 SDKで用意されているビヘイビアの中で、
おもしろさで言えば上位にあるビヘイビア「FluidMoveBehavior」を紹介したいと思います。

FluidMoveBehaviorはパネル内の要素(要素の集合)のレイアウトの変更を監視します。
変更が発生した場合、その親コンテナー内部の要素のオフセットをアニメーション化します。
FluidMoveBehaviorを単独で使用した場合は、指定のアイテムの位置から新しい位置への移行のみをアニメーション化します。

実際にサンプルコードを動かしてみるとわかりますが、この手のアニメーション化は以前からあった気がしますが、その処理がカプセル化され、添付プロパティとして、実現したい場所を指定するだけで実現出るとというところが凄いわけです、

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
  x:Class="WpfApplication4.MainWindow"
  Title="MainWindow" Height="247" Width="271" Background="#FF700000">
 <Window.Resources>
  <Style TargetType="ed:RegularPolygon">
   <Setter Property="Fill" Value="DarkRed" />
   <Setter Property="InnerRadius" Value="0.47211" />
   <Setter Property="PointCount" Value="28" />
   <Setter Property="Stretch" Value="Fill" />
   <Setter Property="Stroke" Value="Black" />
   <Setter Property="Width" Value="50" />
   <Setter Property="Height" Value="50" />
  </Style>
 </Window.Resources>
 <WrapPanel>
  
  <i:Interaction.Behaviors>
   <ei:FluidMoveBehavior AppliesTo="Children"/>
  </i:Interaction.Behaviors>

  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon>
   <i:Interaction.Behaviors>
    <ei:FluidMoveBehavior AppliesTo="Self">
     <ei:FluidMoveBehavior.EaseY>
      <ElasticEase EasingMode="EaseOut"/>
     </ei:FluidMoveBehavior.EaseY>
     <ei:FluidMoveBehavior.EaseX>
      <BounceEase EasingMode="EaseOut"/>
     </ei:FluidMoveBehavior.EaseX>
    </ei:FluidMoveBehavior>
   </i:Interaction.Behaviors>

  </ed:RegularPolygon>
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />
  <ed:RegularPolygon />

 </WrapPanel>
</Window>

二カ所にFluidMoveBehavior を適用しました。上の方がパネ内の要素全部に指定する場合で、
下の方がパネル内の要素を個別に指定する実装方法をとっています。
AppliesToプロパティをChildren/Selfのどちらかを指定することで切り分けができます。




ソースは全て書いているので今回はアップロードしません。

----------------
当記事で紹介しているサンプルコードはBlend 4 SDKを使用しています。
Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4
http://www.microsoft.com/downloads/ja-jp/details.aspx?displaylang=ja&FamilyID=75e13d71-7c53-4382-9592-6c07c6a00207
----------------

【WPF】DataStateBehaviorを使って見た。

  • 2011.05.25 Wednesday
  • 19:22
JUGEMテーマ:コンピュータ


 
Source and Project

Blend 4 SDKに付属されているDataStateBehaviorというビヘイビアを使って見ました。
このビヘイビアは

監視しているオブジェクト(Bindingプロパティで指定)から
変更通知を受け取ったタイミングで、指定した値(Valueで指定)であるかどうか判定し
真である場合、TrueStateで指定された状態にする。
偽である場合、FalseStateで指定された状態にする。
前提条件:状態はVisualStateManagerで管理されている状態であること。

と言った挙動を示します。

ビヘイビアの定義は下記のように記述します。

   <i:Interaction.Behaviors>
    <ei:DataStateBehavior Binding="..."
            Value="Bindingで得た値と比較する値"
            TrueState="真で適用する状態"
            FalseState="偽で適用する状態"/>
   </i:Interaction.Behaviors>

状態の定義はVisualStatManagerを使用します。

   <VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
     <VisualState x:Name="redState" ... />
     <VisualState x:Name="yelloState" ... />
    </VisualStateGroup>
   </VisualStateManager.VisualStateGroups>

StoryBoradを利用するためXAMLは少し冗長的になるかもしれませんが、Blendを利用すれば特に気にすることなく画面をデザイン出来ると思います。



実際にDataStateBehaviorを利用したサンプルコードを書いてみました。

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  x:Class="DataStateBehaviorDemo20110525_001.MainWindow"
  Title="MainWindow" Height="200" Width="300">
 <Grid>
  <VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="VisualStateGroup">
    <VisualState x:Name="redState">
     <Storyboard>
      <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
               Storyboard.TargetName="label">
       <EasingColorKeyFrame KeyTime="0" Value="Red"/>
      </ColorAnimationUsingKeyFrames>
     </Storyboard>
    </VisualState>
    <VisualState x:Name="yelloState">
     <Storyboard>
      <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
               Storyboard.TargetName="label">
       <EasingColorKeyFrame KeyTime="0" Value="#FFDAFF00"/>
      </ColorAnimationUsingKeyFrames>
     </Storyboard>
    </VisualState>
   </VisualStateGroup>
   
   
  </VisualStateManager.VisualStateGroups>
  <Label x:Name="label">
   <i:Interaction.Behaviors>
    <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=checkBox}"
           Value="True"
           TrueState="redState"
           FalseState="yelloState"/>
   </i:Interaction.Behaviors>
  </Label>
  <CheckBox x:Name="checkBox" Margin="4">Click here!</CheckBox>
 </Grid>
</Window>

Blendを使えばもっと面白いStoryboardが作成できるとは思いますが、今回はあくまでDataStateBehavior を使って見るというのが趣旨なので、この程度で・・・。






Bindingで指定したCheckBoxのIsCheckedプロパティがtrueであるかどうかで
指定した状態が変化しているのがわかります。

Source and Project

----------------
当記事で紹介しているサンプルコードはBlend 4 SDKを使用しています。
Microsoft Expression Blend 4 Software Development Kit (SDK) for .NET 4
http://www.microsoft.com/downloads/ja-jp/details.aspx?displaylang=ja&FamilyID=75e13d71-7c53-4382-9592-6c07c6a00207
----------------

【C#】はじめてのParallel.For

  • 2011.05.24 Tuesday
  • 23:52
JUGEMテーマ:コンピュータ


そういえば使ったことなかったのでコードを書いてみた。

using System;
using System.Threading.Tasks;

namespace ParallelForDemo20110524_001
{
 class Program
 {
  static void Main(string[] args)
  {
   Parallel.For(0, 100, Console.WriteLine);
  }
 }
}


具体的な実行結果は予想できないけど、思った通りに動いてるみたい。 

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< May 2011 >>

あわせて読みたい

あわせて読みたいブログパーツ

selected entries

categories

archives

recent comment

  • 【WPF】DataGridに編集可能なComboBoxを表示するには?
    art55 (07/16)
  • 【WPF】DataGridに編集可能なComboBoxを表示するには?
    arisa (07/16)
  • 【キーボード】6年前のRealForceを復活させることはできる!?その3
    art55 (05/22)
  • 【キーボード】6年前のRealForceを復活させることはできる!?その3
    分解大好き (05/18)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    art55 (02/04)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    Gen (02/04)
  • 【キーボード】RealForce が壊れて帰ってきた。
    art55 (04/29)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    art55 (02/23)
  • 【.NET Framework 4.5】 IListがIReadOnlyListを継承してない理由。
    かるあ (02/22)
  • 【C#】Dictionaryの実装・データ構造・アルゴリズムを観察する。
    art55 (01/16)

recent trackback

recommend

recommend

recommend

C#プログラマのための.NETアプリケーション最適化技法 (Programmer's SELECTION)
C#プログラマのための.NETアプリケーション最適化技法 (Programmer's SELECTION) (JUGEMレビュー »)
Sasha Goldshtein,Dima Zurbalev,Ido Flatow,サシャ・ゴルドシュタイン,ディマ・ズルバレフ,イド・フラトー

recommend

ろんりと集合
ろんりと集合 (JUGEMレビュー »)
中内 伸光
とてもわかりやすいです。

recommend

recommend

シャノン・ノイマン・ディジタル世界
シャノン・ノイマン・ディジタル世界 (JUGEMレビュー »)
市川 忠男
4章がリレーショナルデータベースな内容になってます。ページ数があまりありませんが、ポイントがものすごく的確にまとまっていて、感動します。

recommend

recommend

東プレ Realforce91UBK-S 静音キーボード 静電容量無接点方式 変荷重 ブラック NG01BS
東プレ Realforce91UBK-S 静音キーボード 静電容量無接点方式 変荷重 ブラック NG01BS (JUGEMレビュー »)

テンキーレス、静音のRealForce91UBK-S。スコスコ感がたまらなく気持ちいいです。家と会社で2台持ってます。

recommend

recommend

プログラミング.NET Framework 第4版 (プログラミングシリーズ)
プログラミング.NET Framework 第4版 (プログラミングシリーズ) (JUGEMレビュー »)
Jeffrey Richter
発売予定美 2013年10月10日。.NET Frameworkとお付き合いする人のバイブルですね。

recommend

recommend

キャット・シッターの君に。
キャット・シッターの君に。 (JUGEMレビュー »)
喜多嶋 隆
私のイラストレータデビュー本です。

recommend

Essential .NET ― 共通言語ランタイムの本質
Essential .NET ― 共通言語ランタイムの本質 (JUGEMレビュー »)
ドン・ボックス,クリス・セルズ,Don Box,Chris Sells,吉松 史彰

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM