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

安德烈·霍达尔

尝试单击网格视图中的项目时出错。我有这样的样式设置器:

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

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

一般来说,我有这样的问题:我需要在我的网格视图和不同的数据模板中使用不同的样式。我已经尝试在我的数据模板中使用 Visual States,但似乎没有用。

Xie Steven

我需要在我的网格视图和不同的数据模板中使用不同的样式。

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

为了达到这种效果,你需要使用ControlStoryboardActionXAML行为

请参阅以下代码示例以供参考:

<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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章