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

时间:2018-09-28 13:15:46

标签: c# gridview uwp

尝试在网格视图中单击项目时发生错误。我有这样的风格设定器:

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

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

通常,我遇到这样的问题:我需要在网格视图和不同的数据模板中使用不同的样式。我已经尝试在数据模板中使用可视状态,但是似乎不起作用。

1 个答案:

答案 0 :(得分:0)

  

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

它不能解析为该名称,因为该名称是DataTemplate的本地名称。您可以在DataTemplate内移动情节提要,然后在点按网格时将其启动。

要实现此效果,您需要使用ControlStoryboardAction中的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