FluidMoveSetTagBehavior垂直拉伸文本

时间:2014-08-05 15:04:43

标签: wpf vb.net xaml expression-blend

我最近开始使用Microsoft Expression Blend和Visual Studio 2010开始学习FluidMoveSetTagBehavior和FluidMoveBehavior的所有内容。根据我在网上找到的几个例子,我创建了下面的示例,除了小问题

我一直在尝试测试创建动画,以便在选择ListViewItem时显示TextBlock的更新。

当在ListView中选择项目时,文本会根据FluidMoveBehavior移动到TextBlock,但文本在动画阶段会垂直拉伸。然后,一旦动画结束,它就会在TextBlock中正确捕捉。我最初也有水平拉伸这个问题,但我能够解决这个问题,添加一些Horizo​​ntalAlignment =“Left”属性。虽然没有这样的幸运VerticalAlignment属性。

Xaml Code     

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <WrapPanel>
        <TextBox Height="23" Name="TextBox1"  Margin="4" VerticalAlignment="Center" Width="120" />
        <Button Content="Add"  Margin="4" Name="Button1" VerticalAlignment="Top" Width="75" />
        <Button Content="Remove"  Margin="4" Name="Button2" VerticalAlignment="Top" Width="75" />
    </WrapPanel>
    <ListView Grid.Row="1" Height="150"  Name="ListView1" SelectionMode="Single" VerticalAlignment="Top">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel >
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveBehavior Duration="0:0:0.5" AppliesTo="Children">
                            <ei:FluidMoveBehavior.EaseY>
                                <QuarticEase EasingMode="EaseInOut"/>
                            </ei:FluidMoveBehavior.EaseY>
                            <ei:FluidMoveBehavior.EaseX>
                                <QuarticEase EasingMode="EaseInOut"/>
                            </ei:FluidMoveBehavior.EaseX>
                        </ei:FluidMoveBehavior>

                    </i:Interaction.Behaviors>
                </StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" FontSize="14" HorizontalAlignment="Left" TextWrapping="Wrap"
                       Opacity="0" TextAlignment="Center" Height="23" >
                <i:Interaction.Behaviors>
                    <ei:FluidMoveSetTagBehavior Tag="DataContext"/>
                </i:Interaction.Behaviors>
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Duration="00:00:01"
                                                 From="0"
                                                 To="1" BeginTime="00:00:00.4000000" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Duration="00:00:01"
                                                 From="1"
                                                 To="0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </TextBlock.Triggers>
              </TextBlock>
           </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <StackPanel  Grid.Column="1" Grid.Row="1">
        <TextBlock DataContext="{Binding SelectedItem, Mode=TwoWay, ElementName=ListView1}" HorizontalAlignment="Left"
                   TextWrapping="Wrap" FontSize="14" Text="{Binding Mode=OneWay}" Height="23" >
            <i:Interaction.Behaviors>
                <ei:FluidMoveBehavior InitialTag="DataContext" Duration="0:0:2">
                     <ei:FluidMoveBehavior.EaseX>
                        <CircleEase EasingMode="EaseOut"/>
                     </ei:FluidMoveBehavior.EaseX>
                </ei:FluidMoveBehavior>
            </i:Interaction.Behaviors>
        </TextBlock>
    </StackPanel>
</Grid>

背后的代码

Class MainWindow 
    Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
        ListView1.Items.Insert(0, TextBox1.Text)
    End Sub

    Private Sub Button2_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button2.Click
        ListView1.Items.Remove(ListView1.Items(0))
    End Sub
End Class

希望有人可以提供帮助。

0 个答案:

没有答案