如何使拆分视图内容中的列表视图负责全宽？答案

【问题标题】：How to make a list view inside split view content responsible with full width?如何使拆分视图内容中的列表视图负责全宽？
【发布时间】：2017-10-29 17:12:24
【问题描述】：

我有使用列表视图在我的视图中显示的项目列表，首先我在不使用拆分视图的情况下实现了它，然后它是响应式的，并且列表项占据了全宽

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

我已经将这个列表视图移至拆分视图内容，但这次宽度减小了，内容变得无响应。

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

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

【问题讨论】：

标签： uwp uwp-xaml

【解决方案1】：

将 SplitView 的 HorizontalAlignment 从 left 更改为 Stretch。

【讨论】：