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

Question

我试图显示UWP应用程序的内容，与内容在Store应用程序中的显示方式完全相同（见上文）。 我使用了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之上，但我更喜欢您当前的方法，因为它只是整洁。< / p>

但为了让它看起来像你想要的那样，我们需要修改Style的默认ListView，其中包含Header和StackPanel内的项目}（ItemsPresenter的孩子）。我们不希望这样，所以我们首先从Header中删除HeaderTemplate和ItemsPresenter的tempate绑定，然后我们用{{1}替换根Border最后，我们将Grid添加为ContentPresenter，并将其放在Header（ScrollViewer的父级）之上。

您可以参考以下ItemsPresenter执行上述所有操作。

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

希望这有帮助！