我尝试实现一个 ListBox,其中所选项目比其他项目更详细地显示。 Josh Smith 在 his blog 上展示了一种方法.
为了增强用户体验,我想对变化进行动画处理(即项目变大,附加信息淡入)。 使用 DataTriggers Enter- 或 ExitActions 启动 Storyboard 有缺点,即
- 我没有可重复使用的详细 View 模板(它只是作为动画的结束状态存在)。
- 详细 View 的每次更改都将在两个动画中起作用,而不是一次。
还有其他更易于维护的方法吗?
最佳答案
您可以使用此 ListBox.ItemContainerStyle
并根据您的需要进行调整。
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border>
<StackPanel>
<ContentPresenter x:Name="Compact"
Opacity="1"
ContentTemplate="{StaticResource UnselectedDataTemplate}">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
<ContentPresenter x:Name="Details"
Opacity="0"
ContentTemplate="{StaticResource SelectedDataTemplate}">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="0" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="SelectionStates">
<VisualState Name="Unselected">
<Storyboard SpeedRatio="2">
<DoubleAnimation To="1"
Storyboard.TargetName="Compact"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="1"
Storyboard.TargetName="Compact"
Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
<DoubleAnimation To="0"
Storyboard.TargetName="Details"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="0"
Storyboard.TargetName="Details"
Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
</Storyboard>
</VisualState>
<VisualState Name="Selected">
<Storyboard SpeedRatio="2">
<DoubleAnimation To="0"
Storyboard.TargetName="Compact"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="0"
Storyboard.TargetName="Compact"
Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
<DoubleAnimation To="1"
Storyboard.TargetName="Details"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="1"
Storyboard.TargetName="Details"
Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
在这种情况下,我已将模板声明为资源。
<DataTemplate x:Key="UnselectedDataTemplate">
/* your controls for unselected state */
</DataTemplate>
<DataTemplate x:Key="SelectedDataTemplate">
/* your controls for selected state */
</DataTemplate>
但我认为将数据模板化的内容直接绑定(bind)到 ContentPresenter.Content
也是可能的。
如果 Details 是额外的并且不是为了替换 Compact,只需从 Storyboard
中删除所有 DoubleAnimation
和 Storyboard .TargetName="Compact"
.
希望这会有所帮助。
关于c# - ListboxItem 不同状态之间的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6827348/