我正在开发一个通用 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 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 的高度？
最佳答案
只需使用可视化状态管理器并设置适当的状态。我设法通过以下代码实现了这一点:
<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>
希望这对您有所帮助。
最好的问候，
纳扎尔
关于c# - 可展开的 ListViewItem，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29544260/