ListBox ItemTemplate上的状态动画

时间:2010-05-22 16:21:57

标签: c# .net wpf silverlight states

我有一个从Observable集合中读取的列表框,并且是ItemTemplate'ed:

<DataTemplate x:Key="DataTemplate1">
    <Grid x:Name="grid" Height="47.333" Width="577" Opacity="0.495">
        <Image HorizontalAlignment="Left" Margin="10.668,8,0,8" Width="34" Source="{Binding ImageLocation}"/>
        <TextBlock Margin="56,8,172.334,8" TextWrapping="Wrap" Text="{Binding ApplicationName}" FontSize="21.333"/>
        <Grid x:Name="grid1" HorizontalAlignment="Right" Margin="0,10.003,-0.009,11.33" Width="26" Opacity="0" RenderTransformOrigin="0.5,0.5">
            <Image HorizontalAlignment="Stretch" Margin="0" Source="image/downloads.png" Stretch="Fill" MouseDown="Image_MouseDown" />
        </Grid>
    </Grid>
</DataTemplate>

<ListBox x:Name="searchlist" Margin="8" ItemTemplate="{DynamicResource DataTemplate1}" ItemsSource="{Binding SearchResults}" SelectionChanged="searchlist_SelectionChanged" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" />

一般来说,我的问题是“在这个列表框中对特定项目进行动画的最简单方法是什么?选择它们?基本上,”grid1“中的图像将其不透明度设置为1,慢慢地。

我更喜欢使用状态,但我不知道如何将blend和xaml告诉“当选择的项目被更改时,将图像不透明度在0.3秒内更改为1”。事实上,我一直在使用VisualStateManager在.cs文件中执行此操作。

此外,还有另一个问题。更改选定的索引后,我们转到CS文件并查看SelectedItem。 SelectedItem返回它所绑定的Object的实例(可观察集合中的对象),而不是DataTemplate / ListItem等的实例。那么我怎样才能从这个列表中提取正确的图像?

使用VisualStateManager进行状态动画如果它只是正常的事情我可以处理得很好但是当涉及到生成的列表框的项目时,我迷路了。

由于

2 个答案:

答案 0 :(得分:1)

这可以通过这篇文章回答: WPF/Silverlight States - Activate from XAML?

特别感谢:Dan Auclair

答案 1 :(得分:0)

我已经在列表框项目模板中声明了动画,使用堆叠面板中的故事板而不是网格。

<StackPanel Grid.Row="0" Height="175" Orientation="Vertical" Width="Auto">

  <StackPanel.Triggers>
    <EventTrigger RoutedEvent="StackPanel.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard x:Name="mystoryboard">

            <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="Trans"
            Storyboard.TargetProperty="X">
              <LinearDoubleKeyFrame Value="-387" KeyTime="0:0:1" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>

        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </StackPanel.Triggers>

  <TextBlock Margin="400,40,-400,0" TextWrapping="Wrap" Text="{Binding ApplicationName}" FontSize="21.333">
    <TextBlock.RenderTransform>
      <TranslateTransform x:Name="Trans" X="0" Y="0" />
    </TextBlock.RenderTransform>
  </TextBlock>
</StackPanel>

如果你想在网格中使用它,你不需要给出触发器功能。它将文本块从右向左移动。请尝试举办活动以激活此活动。