[UWP] DataTemplate中包含的故事板无法正常工作

时间:2017-03-22 01:46:28

标签: storyboard uwp datatemplate

点击任何项目仅适用于第一个项目的故事板。

您可以从以下地址下载来源。

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;
    }



}

1 个答案:

答案 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>