Question

我使用列表框来显示图像数据。我想在列表框上的数据模板中为路径属性设置动画，当它被选中时非常类似于此视频

我看到许多与此类似的问题，来自contentpresenter的操作将完成这项工作。但是对于我的问题是我必须更改datatemplate里面的content属性

内的路径属性

尝试＃1 在我的itemtemplate上创建视觉状态

        <DataTemplate x:Key="ItemTemplate">
        <Grid Height="456" Width="456" Margin="0,12">
            <VisualStateManager.CustomVisualStateManager>
                <ec:ExtendedVisualStateManager/>
            </VisualStateManager.CustomVisualStateManager>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisualStateGroup">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="selected1">
                        <Storyboard>
                            <-- this is where code generate from blend goes -->
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="456" Stroke="Black" VerticalAlignment="Top" Width="456">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="{Binding photo}" Stretch="UniformToFill"/>
                </Rectangle.Fill>
            </Rectangle>
            <Path x:Name="rectangle_Copy" Fill="White" HorizontalAlignment="Left" Height="483.793" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="479.386" Margin="-13.052,-13.52,-10.334,-14.273" >
                <Path.Data>
                    <PathGeometry FillRule="EvenOdd">
                        <PathFigure IsFilled="True" IsClosed="True" StartPoint="13.5517,14.0196">
                            <LineSegment Point="468.552,14.0196"/>
                            <LineSegment Point="468.552,469.02"/>
                            <LineSegment Point="11.427,471.145"/>
                        </PathFigure>
                        <PathFigure IsFilled="True" IsClosed="True" StartPoint="468.552,14.145">
                            <BezierSegment Point3="469.052,469.27" Point2="469.052,469.27" Point1="468.552,14.145"/>
                            <BezierSegment Point3="11.5517,471.52" Point2="11.5517,471.52" Point1="469.052,469.27"/>
                            <BezierSegment Point3="13.552,14.02" Point2="13.552,14.02" Point1="11.5517,471.52"/>
                            <BezierSegment Point3="468.552,14.145" Point2="468.552,14.145" Point1="13.552,14.02"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Grid>
    </DataTemplate>

但是我找不到一种方法来触发这个visualstate shen列表框项目被选中。

尝试＃2 我创建2个项目模板，一个用于正常状态，两个用于选择状态，如下所示。

        <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
                            ....
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myListBox" Storyboard.TargetProperty="ItemTemplate">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="{StaticResource selectedDataTemplate}"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

当我选择列表框时会产生错误，我不认为这种方法可以做动画。

这是我的列表框

<ListBox Name="myListBox" ItemsSource="{Binding Feed}" 
                         SelectionChanged="ListBox_SelectionChanged" 
                         ItemTemplate="{StaticResource ItemTemplate}" 
                         ItemContainerStyle="{StaticResource ListBoxItemStyle1}"/>

请提供任何帮助，谢谢。

Answer 1

请参阅http://msdn.microsoft.com/en-us/library/ms742536%28v=vs.110%29.aspx

<ListBox ...>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Trigger.EnterActions>
                        <!-- What happens when it is selected. Put a StoryBoard here -->
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <!-- What happens when it is unselected. Put a StoryBoard here -->
                    </Trigger.ExitActions>          
                </Trigger>               
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

如何更改DataTemplate ListBox SelectedItem中的路径属性

1 个答案: