none
FluidMoveBehaviorのアニメーションが 移動の後に発生する RRS feed

  • 質問

  • 2つのリストボックスの間をデータが移動するアニメーションをサイトで見て

    サンプルをコピーして作成したのですが、私の環境下で実行すると、リストボックスへデータが一瞬で移動した後に

    アニメーションが遅れてなぞるように発生し、綺麗に移動してるように見えません。

    FluidMoveBehaviorの設定だと思われるのですが、どのように修正すればいいのか、ご教示お願いできませんでしょうか

    尚、ソースは下記の通りです。

    【画面側ソース ユーザーコントロールとして作成】

    <UserControl x:Class="UserControl1"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
                 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 d:DesignHeight="480"
                 d:DesignWidth="640"
                 mc:Ignorable="d">
        <UserControl.Resources>

            <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <StackPanel>
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveBehavior AppliesTo="Children"
                                                                                      Tag="DataContext">
                            <ei:FluidMoveBehavior.EaseY>
                                <CubicEase EasingMode="EaseInOut" />
                            </ei:FluidMoveBehavior.EaseY>
                            <ei:FluidMoveBehavior.EaseX>
                                <CubicEase EasingMode="EaseInOut" />
                            </ei:FluidMoveBehavior.EaseX>
                        </ei:FluidMoveBehavior>
                    </i:Interaction.Behaviors>
                </StackPanel>

            </ItemsPanelTemplate>
            <DataTemplate x:Key="DataTemplate1">
                <Grid>
                    <Border Width="75"
                            Height="75"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="10">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.053,0.04" EndPoint="0.987,0.96">
                                <GradientStop Offset="0" Color="Red" />
                                <GradientStop Offset="0.996" Color="#FFFBE3E3" />
                                <GradientStop Offset="0.478" Color="#FFFF8787" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                </Grid>
            </DataTemplate>
        </UserControl.Resources>


        <Grid x:Name="LayoutRoot">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" MinWidth="85" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ListBox Margin="5"
                     ItemTemplate="{StaticResource DataTemplate1}"
                     ItemsPanel="{StaticResource ItemsPanelTemplate1}"
                     ItemsSource="{Binding LeftItems}"
                     SelectedItem="{Binding LeftSelectedItem,
                                            Mode=TwoWay}" />
            <ListBox Grid.Column="2"
                     Margin="5"
                     ItemTemplate="{StaticResource DataTemplate1}"
                     ItemsPanel="{StaticResource ItemsPanelTemplate1}"
                     ItemsSource="{Binding RightItems}"
                     SelectedItem="{Binding RightSelectedItem,
                                            Mode=TwoWay}" />
            <StackPanel Grid.Column="1"
                        Margin="5"
                        VerticalAlignment="Center">
                <Button Content="&gt;&gt;">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ei:CallMethodAction MethodName="MoveRight" TargetObject="{Binding Mode=OneWay}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
                <Button Content="&lt;&lt;">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ei:CallMethodAction MethodName="MoveLeft" TargetObject="{Binding Mode=OneWay}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </StackPanel>
        </Grid>
    </UserControl>

    【ユーザーコントロールのコード】

    Public Class UserControl1
        Private _viewmodel As ListMoveViewModel
        Public Sub New()

            ' この呼び出しはデザイナーで必要です。
            InitializeComponent()

            ' InitializeComponent() 呼び出しの後で初期化を追加します。
            _viewmodel = New ListMoveViewModel
            Me.DataContext = _viewmodel

        End Sub
    End Class

    【ソースにバインドしたViewModel】

    Public Class ListMoveViewModel
        Inherits viewmodelbase

        Property LeftItems As New ObservableCollection(Of ListBoxItemViewModel)
        Property RightItems As New ObservableCollection(Of ListBoxItemViewModel)
       

        Private _leftSelectedItem As ListBoxItemViewModel
        Property LeftSelectedItem As ListBoxItemViewModel
            Get
                Return _leftSelectedItem
            End Get
            Set(value As ListBoxItemViewModel)
                _leftSelectedItem = value
                RaisePropertyChanged("LeftSelectedItem")
            End Set
        End Property

        Private _rightSelectedItem As ListBoxItemViewModel
        Property RightSelectedItem As ListBoxItemViewModel
            Get
                Return _rightSelectedItem
            End Get
            Set(value As ListBoxItemViewModel)
                _rightSelectedItem = value
                RaisePropertyChanged("RightSelectedItem")
            End Set
        End Property

        Public Sub New()

            LeftItems.Add(New ListBoxItemViewModel)
            LeftItems.Add(New ListBoxItemViewModel)
            LeftItems.Add(New ListBoxItemViewModel)
        End Sub

        Public Sub MoveRight()
            If Me.LeftSelectedItem Is Nothing Then Return

            Dim obj = LeftSelectedItem

            _RightItems.Add(obj)
            _LeftItems.Remove(obj)

            obj = Nothing

        End Sub

        Public Sub MoveLeft()
            If Me.RightSelectedItem Is Nothing Then Return

            _LeftItems.Add(RightSelectedItem)
            _RightItems.Remove(RightSelectedItem)

        End Sub

    End Class


    Public Class ListBoxItemViewModel
        Inherits viewmodelbase
    End Class



    Public Class viewmodelbase
        Implements INotifyPropertyChanged

        '変更通知,Error
        Public Sub RaisePropertyChanged(ByVal propertyName As String)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End Sub

        Public Event PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
    End Class

    2014年5月14日 10:13