【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

コメント
管理者の承認待ちコメントです。
  • -
  • 2018/05/10 10:24 AM
管理者の承認待ちコメントです。
  • -
  • 2019/01/16 5:07 PM
コメントする








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

calendar

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728293031
<< October 2020 >>

あわせて読みたい

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

selected entries

categories

archives

recent comment

  • 【キーボード】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)
  • 【C#】Dictionaryの実装・データ構造・アルゴリズムを観察する。
    karuakun (01/16)
  • 【NetOffice】【Excel】死なないExcelプロセスをKillする。
    art55 (12/05)

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