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

我试图以与商店应用程序中显示内容完全相同的方式显示UWP应用程序的内容（见上文）。 我使用了一个

列表视图

，但是

项目

显示在

标题的右侧，而不是直接显示在标题下方，如下面的屏幕截图所示：


这是我的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>



关于如何解决这个问题有什么想法吗？
一个简单的解决方法是只使用
文本块
，而不是指定
标题
，并将其放在
列表视图
的顶部，但我更喜欢当前的方法，因为它更整洁

但是为了使它看起来像您想要的那样，我们需要修改
列表视图的默认
样式
，它将
标题
和
堆栈面板
中的项目（一个
ItemsPresenter的子项
）。我们不希望出现这种情况，因此首先从
ItemsPresenter
中删除
Header
和
HeaderTemplate
的临时绑定，然后用
网格
替换根
边框
，最后，我们添加一个
ContentPresenter
作为
标题
，并将其放置在
ScrollViewer
（
ItemsPresenter
的父项）上方

您可以参考下面的
样式
，它完成了我上面描述的所有操作

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


希望这有帮助
 你应该发布你迄今为止尝试过的内容。据我所知，没有一个精确的控件可以直接从bat上显示出来，但是你可以使用简单的
网格
，
按钮
，
堆栈面板
控件轻松制作一个。有很多方法可以实现这一点，我建议从开始。它在@Justin运行得非常好，谢谢！但是，我是否可以在将来使用另一个控件来实现同样的行为？那么这些项目下面的“评分”呢？不，请另外问一个问题。
<ListView VerticalAlignment="Top"
          Style="{StaticResource ListViewStyle1}"
          ...>