如何在具有全宽度的拆分视图内容中创建列表视图？

Question

我有使用列表视图在我的视图中显示的项目列表， 首先我实现它而不使用拆分视图，然后它是响应式的，列表项目采取全宽

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,20,20,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="1" 
               Name="ResultTextBlock" 
               FontSize="24" 
               Foreground="Red" 
               FontWeight="Bold" 
               Margin="20,20,0,0" />
    <ListView ItemsSource="{x:Bind Books}" 
              ItemClick="ListView_ItemClick" 
              IsItemClickEnabled="True" 
              ItemTemplate="{StaticResource BookListDataTemplate}">
    </ListView>
</Grid>

这个列表视图我已经进入了一个splitview内容，但这次宽度减少了，内容变得没有响应。

   <Page.Resources>
    <DataTemplate x:Key="BookListDataTemplate" x:DataType="data:Book">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
            <StackPanel Margin="20,20,0,0">
                <TextBlock Text="{x:Bind Title}" HorizontalAlignment="Left" FontSize="16" />
                <TextBlock Text="{x:Bind Author}" HorizontalAlignment="Left" FontSize="10" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <RelativePanel >

        <Button Name="hambergerbutton" FontSize="36" RelativePanel.AlignLeftWithPanel="True"
                FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Click="hambergerbutton_Click" ></Button>
        <StackPanel Background="Gray"></StackPanel>
        <TextBlock  RelativePanel.AlignHorizontalCenterWithPanel="True"
                    RelativePanel.AlignVerticalCenterWithPanel="True" 
                    FontSize="24">Books</TextBlock>

    </RelativePanel>


    <SplitView Grid.Row="1" Name="myspliview"
               DisplayMode="CompactInline"  OpenPaneLength="200" 
               CompactPaneLength="56" HorizontalAlignment="left">
        <SplitView.Pane>
            <ListBox SelectionMode="single" Name="listicons" SelectionChanged="listicons_SelectionChanged">
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xe72D;" FontSize="36" />
                        <TextBlock Text="share" FontSize="24" Margin="20,0,0,0"></TextBlock>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xe724;" FontSize="36" />
                        <TextBlock Text="favourites" FontSize="24" Margin="20,0,0,0"></TextBlock>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem></ListBoxItem>
            </ListBox>
        </SplitView.Pane>

        <SplitView.Content>
            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,20,20,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="1" 
               Name="ResultTextBlock" 
               FontSize="24" 
               Foreground="Red" 
               FontWeight="Bold" 
               Margin="20,20,0,0" />
                <ListView ItemsSource="{x:Bind Books}" 
              ItemClick="ListView_ItemClick" 
              IsItemClickEnabled="True" 
              ItemTemplate="{StaticResource BookListDataTemplate}">
                </ListView>
            </Grid>



        </SplitView.Content>

    </SplitView>

</Grid>

我想在拆分视图内容中使用相同的ui，并且应该响应，我做错了什么以及如何解决这个问题？

Answer 1

将 SplitView 的 Horizo​​ntalAlignment 从左更改为拉伸。