UWP

Question

尝试单击网格视图中的项目时出错。我有这样的风格setter:

<Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ListViewItemPresenter x:Name="Root" ContentTemplate="{StaticResource CompletedDataTemplate}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Pressed">                                        
                               <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Item" 
                                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" To="1.15" BeginTime="00:00:00.2000000"/>

                                <DoubleAnimation Duration="00:00:00.4" Storyboard.TargetName="Item" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" To="1.15" BeginTime="00:00:00.2000000"/>
                                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                                        <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="471"/>
                                    </DoubleAnimationUsingKeyFrames>                                   
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DisabledStates">
                            <VisualState x:Name="Enabled"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </ListViewItemPresenter>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

我也有这样的数据模板：

<DataTemplate x:Key="CompletedDataTemplate">
    <Grid x:Name="Item" Width="471" Height="303">

        <Grid Height="265" VerticalAlignment="Top">
            <Image Stretch="Fill" Source="../Assets/Fantastic-Full-HD-Wallpaper.jpg"/>
        </Grid>

        <TextBlock x:Name="textBlock" Height="20" TextAlignment="Center" Text="{Binding Name}" FontSize="21" FontFamily="../Assets/Fonts/GothamPro.ttf#Gotham Pro" Foreground="White" TextLineBounds="TrimToCapHeight"
                   VerticalAlignment="Bottom"/>

        <Grid x:Name="grid" HorizontalAlignment="Left" Height="267" VerticalAlignment="Top" Width="0" Opacity="20">
            <Grid.Background>
                <AcrylicBrush TintColor="Black" TintOpacity="200"/>
            </Grid.Background>
            <TextBlock FontSize="64" Text="Open" Foreground="White" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
        </Grid>
    </Grid>
</DataTemplate>

当我启动我的应用程序时，模板和绑定工作正常，但我不知道如何将故事板的目标名称设置为我的数据模板元素。任何的想法？也许我应该使用其他解决方案？

通常，我有这样的问题：我需要在我的网格视图和不同的数据模板中使用不同的样式。我已经尝试在我的数据模板中使用视觉状态，但似乎没有用。

Answer 1

I need to use different styles in my grid view and different Data Templates.

无法解析为该名称，因为该名称是 DataTemplate 的本地名称。您可以在 DataTemplate 中移动 Storyboard，并在点击 Grid 时启动它。

要实现这个效果，需要使用ControlStoryboardAction in XAML Behaviors.

参考以下代码示例：

<DataTemplate x:Key="CompletedDataTemplate">
        <Grid x:Name="Item" Width="471" Height="303">
            <Grid.Resources>
                <Storyboard x:Key="storyboard">
                    <DoubleAnimation Storyboard.TargetName="Item" 
                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" To="1.15" BeginTime="00:00:00.2000000"/>

                    <DoubleAnimation Duration="00:00:00.4" Storyboard.TargetName="Item" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" To="1.15" BeginTime="00:00:00.2000000"/>
                    <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                        <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="471"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <Interactivity:Interaction.Behaviors>
                <Interactions:EventTriggerBehavior EventName="Tapped">
                    <Media:ControlStoryboardAction Storyboard="{StaticResource storyboard}"/>
                </Interactions:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <Grid Height="265" VerticalAlignment="Top">
                <Image Stretch="Fill" Source="../Assets/Fantastic-Full-HD-Wallpaper.jpg"/>
            </Grid>

            <TextBlock x:Name="textBlock" Height="20" TextAlignment="Center" Text="{Binding Name}" FontSize="21" TextLineBounds="TrimToCapHeight"
               VerticalAlignment="Bottom"/>

            <Grid x:Name="grid" HorizontalAlignment="Left" Height="267" VerticalAlignment="Top" Width="0" Opacity="20">
                <Grid.Background>
                    <AcrylicBrush TintColor="Black" TintOpacity="200"/>
                </Grid.Background>
                <TextBlock FontSize="64" Text="Open" Foreground="White" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
            </Grid>
        </Grid>
</DataTemplate>

然后，如果你想为 GridView 的项目应用不同的 DataTemplate，你可以使用 DataTemplateSelector。

UWP - 在 GridVIew 样式中使用数据模板

UWP - Use Data Template inside style in GridVIew

c#

gridview