在 UWP 应用程序中显示内容 - XAML 控件

Question

我正在尝试以完全相同的方式显示 UWP 应用的内容，就像在商店应用中显示内容一样（见上文）。我使用了 ListView，但 Items 出现在 Header 的右侧，而不是直接出现在它的下方，如您在以下屏幕截图中所见：

这是我的 XAML:

<Page.Resources>
    <local:Items x:Key="Item"/>

    <DataTemplate x:Name="myListViewDataTemplate">
        <Grid Margin="0" Width="200">
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Image Grid.Row="0" Source="{Binding Path=ItemImage}" Stretch="UniformToFill"/>
            <TextBlock Grid.Row="1" Text="{Binding Path=ItemName}" Margin="0,5,0,0"
                       VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="20"/>
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid Background="LightGray">
    <ListView ItemTemplate="{StaticResource myListViewDataTemplate}" ItemsSource="{StaticResource Item}">
        <ListView.Header>
            <TextBlock Margin="20,10,0,10" Text="Group of items" FontSize="22" FontWeight="SemiBold"/>
        </ListView.Header>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" Background="Transparent"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</Grid>

知道如何解决这个问题吗？

Answer 1

一个简单的解决方法是只使用 TextBlock 而不是指定 Header 并将其放在 ListView 之上，但我更喜欢您当前的方法，因为它更简洁.

但是为了让它看起来像你想要的，我们需要修改 ListView 的默认值 Style，它将 Header 和 [= 中的项目包裹起来18=]（child 的 ItemsPresenter）。我们不希望这样，所以我们首先从 ItemsPresenter 中删除 Header 和 HeaderTemplate 的模板绑定，然后用 [=24] 替换根 Border =]，最后我们加一个ContentPresenter作为Header，放在ScrollViewer（ItemsPresenter的parent）上面

您可以参考下面的Style，它完成了我上面描述的所有事情。

<Style x:Key="ListViewStyle1"
       TargetType="ListView">
    <Setter Property="IsTabStop"
            Value="False" />
    <Setter Property="TabNavigation"
            Value="Once" />
    <Setter Property="IsSwipeEnabled"
            Value="True" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
            Value="Disabled" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="ScrollViewer.HorizontalScrollMode"
            Value="Disabled" />
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled"
            Value="False" />
    <Setter Property="ScrollViewer.VerticalScrollMode"
            Value="Enabled" />
    <Setter Property="ScrollViewer.IsVerticalRailEnabled"
            Value="True" />
    <Setter Property="ScrollViewer.ZoomMode"
            Value="Disabled" />
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled"
            Value="False" />
    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange"
            Value="True" />
    <Setter Property="UseSystemFocusVisuals"
            Value="True" />
    <Setter Property="ItemContainerTransitions">
        <Setter.Value>
            <TransitionCollection>
                <AddDeleteThemeTransition />
                <ContentThemeTransition />
                <ReorderThemeTransition />
                <EntranceThemeTransition IsStaggeringEnabled="False" />
            </TransitionCollection>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <ItemsStackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Grid BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                    <ScrollViewer x:Name="ScrollViewer"
                                  Grid.Row="1"
                                  AutomationProperties.AccessibilityView="Raw"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                        <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        Footer="{TemplateBinding Footer}"
                                        Padding="{TemplateBinding Padding}" />
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后你只需像这样将它应用到你的ListView。哦顺便说一句，确保你也将 VerticalAlignment 设置为 Top。

<ListView VerticalAlignment="Top"
          Style="{StaticResource ListViewStyle1}"
          ...>

希望对您有所帮助！

在 UWP 应用程序中显示内容 - XAML 控件

Display content in a UWP app - XAML Control

xaml

uwp

uwp-xaml