点击任何项目仅适用于第一个项目的故事板。
您可以从以下地址下载来源。
http://util.aquerytool.com/Download?fileName=ItemStoryboardApp.zip
感谢您的回复。
<UserControl
x:Class="ItemStoryboardApp.View.ItemListMVVMLightView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ItemStoryboardApp.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:Microsoft.Xaml.Interactions.Media"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid x:Name="PART_RootPanel">
<ItemsControl ItemsSource="{Binding ItemList}" Padding="0,0,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Foreground="White" Margin="0,0,5,0" Padding="0,0,0,0" Height="40" Command="{Binding DataContext.SelectedItemCommand, ElementName=PART_RootPanel}" CommandParameter="{Binding}" VerticalContentAlignment="Stretch" >
<Button.Content>
<Grid x:Name="PART_ContinuousDefectPanel" RenderTransformOrigin="0.5, 0.5">
<Grid.Resources>
<Storyboard x:Name="SB_ChangedCount">
<DoubleAnimation Storyboard.TargetName="PART_ContinuousDefectPanel" Duration="0:0:0.25" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" AutoReverse="True" />
<DoubleAnimation Storyboard.TargetName="PART_ContinuousDefectPanel" Duration="0:0:0.25" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" AutoReverse="True" />
</Storyboard>
</Grid.Resources>
<Grid.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" />
</Grid.RenderTransform>
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding IsSelected}" Value="True" ComparisonCondition="Equal">
<media:ControlStoryboardAction Storyboard="{StaticResource SB_ChangedCount}" />
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<Rectangle Fill="Orange" RadiusX="10" RadiusY="10"/>
<StackPanel Orientation="Horizontal" Margin="10,0,10,0" VerticalAlignment="Center">
<TextBlock Text="{Binding ItemName}" />
</StackPanel>
</Grid>
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
public class ItemListMVVMLightViewModel : ViewModelBase
{
public ObservableCollection<ItemModel> ItemList
{
get { return _itemList; }
set { _itemList = value; RaisePropertyChanged("ItemList"); }
}
ObservableCollection<ItemModel> _itemList = new ObservableCollection<ItemModel>();
public ICommand SelectedItemCommand { get; private set; }
public ItemListMVVMLightViewModel()
{
InitData();
InitCommand();
}
void InitCommand()
{
SelectedItemCommand = new RelayCommand<object>((param) => OnSelectedItemCommand(param));
}
void InitData()
{
for (int i = 0; i < 10; i++)
{
ItemList.Add(new ItemModel() { ItemName = "Name" + i.ToString() });
}
}
void OnSelectedItemCommand(object param)
{
if (param == null || (param is ItemModel) == false)
{
return;
}
foreach (ItemModel i in ItemList)
{
i.IsSelected = false;
}
ItemModel item = param as ItemModel;
item.IsSelected = true;
}
}
答案 0 :(得分:0)
根据Storyboard课程,
TargetNameProperty用于通过其名称引用另一个元素。对于大多数动画定位场景,您不必担心XAML名称范围的影响,但如果您尝试,可能会遇到XAML名称解析问题定位模板部件,或使用Load(String)创建并随后添加到对象树的对象。有关详细信息,请参阅XAML namescopes。
由于您在datatemplate中使用了故事板,因此可能会遇到XAML名称解析问题。故事板始终以第一项为目标可能导致此问题。
在您的代码段中,您使用DataTrigger
来触发故事板。但是,它可能是WPF的早期版本和早期版本的Silverlight VisualStateManager
支持之前的语法。我建议你storyboard animations for visual states。以下代码可能会达到您想要引用的相同结果。我想你想要选择一个项目的动画。我自定义按钮样式以将动画添加到VisualStateManager
。
<ItemsControl Padding="0,0,0,0" ItemsSource="{Binding ItemList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Height="40"
Margin="0,0,5,0"
Padding="0,0,0,0"
VerticalContentAlignment="Stretch"
Foreground="White"
Command="{Binding DataContext.SelectedItemCommand, ElementName=PART_RootPanel}"
CommandParameter="{Binding}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<Grid.RenderTransform>
<ScaleTransform
x:Name="ImageScale"
ScaleX="1"
ScaleY="1" />
</Grid.RenderTransform>
<Rectangle
Fill="Orange"
RadiusX="10"
RadiusY="10" />
<StackPanel
Margin="10,0,10,0"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Text="{Binding ItemName}" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
<DoubleAnimation
AutoReverse="True"
Duration="0:0:0.25"
Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.2" />
<DoubleAnimation
AutoReverse="True"
Duration="0:0:0.25"
Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.2" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>