【雑記】 Visual Studio LightSwitch
- 2011.05.31 Tuesday
- 22:23
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
----------------
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 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);
}
}
いや、使ってみただけです。
-----------------
一部の機能を使ってみただけで分かった気になっているヤツがいるみたいな風な事を言われそうですが
分かっていませんので、お間違えのないように!!
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
----------------
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
使えるかどうかは別として、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
----------------
そういえば使ったことなかったのでコードを書いてみた。
using System;
using System.Threading.Tasks;
namespace ParallelForDemo20110524_001
{
class Program
{
static void Main(string[] args)
{
Parallel.For(0, 100, Console.WriteLine);
}
}
}
具体的な実行結果は予想できないけど、思った通りに動いてるみたい。