Question

我正在使用通用Windows应用程序，我有一个带有DataTemplate的ListView。我想使ListView可扩展，当我点击（选择）一个项目时，所选项目的高度会随着动画而增加。我尝试使用StoryBoard执行该任务，但我失败了。我也找到了这个answer，它做了我想要的但没有动画。这是ListView：

<ListView Name="lstviewMyMissions" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ItemTemplate="{StaticResource MinimzedTemplate}" IsItemClickEnabled="False" ItemClick="lstviewMyMissions_ItemClick" SelectionMode="Single" SelectionChanged="lstviewMyMissions_SelectionChanged" Visibility="Visible">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualState x:Name="Unselected">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedUnfocused">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border x:Name="myback" Background="Transparent">
                                        <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

这是DataTemplate：

<DataTemplate x:Key="MinimzedTemplate">
        <Border Name="tstBorder" BorderThickness="1" Width="380" Height="100" CornerRadius="10" Background="White" FlowDirection="RightToLeft">
            <Grid Height="100">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TextBlock HorizontalAlignment="Right" Text="{Binding TaskDate}" Style="{StaticResource TextFontFamily}"/>
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="1" Source="/Design/Phone/mo3amla_da5leya_icon.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    <StackPanel Orientation="Vertical" Grid.Column="3" VerticalAlignment="Center">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Number" Style="{StaticResource TextFontFamily}"/>
                            <StackPanel Width="15"/>
                            <TextBlock Text="{Binding TaskNo}" Style="{StaticResource TextFontFamily}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Type" Style="{StaticResource TextFontFamily}"/>
                            <TextBlock Text="{Binding procedureType}" Style="{StaticResource TextFontFamily}"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Grid>
        </Border>
    </DataTemplate>

问题是：当用户点击动画时，如何通过动画增加ListViewItem的高度？

Answer 1

只需使用可视状态管理器并设置适当的状态即可。我设法通过以下代码实现了这一点：

    <Style TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="Rect"
                                                                       Storyboard.TargetProperty="Height">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="50">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="Rect"
                                                                       Storyboard.TargetProperty="Height">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="25">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="Rect"
                                Height="25"
                                Background="Transparent"
                                BorderBrush="Red"
                                BorderThickness="1">
                            <ContentPresenter x:Name="contentPresenter"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

希望这有帮助。

最诚挚的问候，

纳扎尔

可扩展的ListViewItem

1 个答案: