windows 10 uwp 应用程序中的 ContentPresenter 未扩展到全宽

Question

我有一个带有列表视图和内容展示器的 master/details 页面。我的问题是，当文本块的内容小于当前 window.

时，内容呈现器不会填充父网格的整个剩余 space

我已经尝试同时添加 HorizontalAlign='Stretch' 和 VerticalAlign='Stretch' 但没有任何效果。

这是 MasterDetailPage.xaml

的代码

<Page.Resources>
    <DataTemplate x:Key="MasterListViewItemTemplate" x:DataType="data:List">
        <Grid Margin="0,11,0,13">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <TextBlock Text="{x:Bind Title}" Style="{ThemeResource BaseTextBlockStyle}" />

            <TextBlock Style="{ThemeResource CaptionTextBlockStyle}"
                Text="{x:Bind Date}"
                Grid.Column="1"
                Margin="12,1,0,0" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="DetailContentTemplate" x:DataType="data:List">
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <StackPanel
                Orientation="Vertical"
                Margin="0,9,12,9">
                <TextBlock
                Margin="0,8"
                Style="{ThemeResource TitleTextBlockStyle}"
                TextWrapping="WrapWholeWords"
                Text="{x:Bind Title}"/>

                <RichTextBlock
                x:Name="textContent"
                IsTextSelectionEnabled="True"
                TextWrapping="WrapWholeWords"
                common:Html2TextParser.Html="{x:Bind Content}"/>
            </StackPanel>
        </ScrollViewer>
    </DataTemplate>

    <DataTemplate x:Key="comboListTemplate" x:DataType="data:Combo">
        <TextBlock Text="{x:Bind Title}"/>
    </DataTemplate>
</Page.Resources>

<Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded" UseLayoutRounding="True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates" CurrentStateChanged="AdaptiveStates_CurrentStateChanged">
            <VisualState x:Name="DefaultState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
            </VisualState>

            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="*" />
                    <Setter Target="DetailColumn.Width" Value="0" />
                    <Setter Target="MasterListView.SelectionMode" Value="None" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="MasterColumn" Width="320" />
        <ColumnDefinition x:Name="DetailColumn" Width="*" />
    </Grid.ColumnDefinitions>

    <ComboBox 
        Name="comboList" 
        Margin="2,2,2,2"
        ItemsSource="{x:Bind comboSource.combos}"
        LayoutUpdated="comboList_LayoutUpdated"
        SelectionChanged="comboList_SelectionChanged"
        ItemTemplate="{StaticResource comboListTemplate}" 
        HorizontalAlignment="Stretch" />

    <ListView
        x:Name="MasterListView" ItemsSource="{x:Bind listSource.lists}"
        Grid.Row="1"
        ItemContainerTransitions="{x:Null}"
        ItemTemplate="{StaticResource MasterListViewItemTemplate}"
        IsItemClickEnabled="True"
        ItemClick="MasterListView_ItemClick">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

    <ContentPresenter
        x:Name="DetailContentPresenter"
        Grid.Column="1"
        Grid.RowSpan="2"
        BorderThickness="1,0,0,0"
        BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
        Content="{x:Bind MasterListView.SelectedItem, Mode=OneWay}"
        ContentTemplate="{StaticResource DetailContentTemplate}" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Margin="12,0,0,0">
        <ContentPresenter.ContentTransitions>
            <!-- Empty by default. See MasterListView_ItemClick -->
            <TransitionCollection />
        </ContentPresenter.ContentTransitions>
    </ContentPresenter>
</Grid>

谁能解决这个问题？这是我的问题的截图。

Answer 1

您可以尝试将 contentpresenter 放在 ViewBox 中。 ViewBox 旨在拉伸和缩放单个子项以填充可用 space。

Documentation here

希望对你有所帮助:)

Answer 2

我测试了你的xaml但我无法重现你的问题请看截图我蓝色 space 是您的 contentPresenter，橙色 space 是 ScrollViewer，最后是带有虚拟文本的文本块。

Answer 3

在为 ContentPresenter 和主网格本身设置不同的颜色后，我发现即使是我的主网格 "LayoutRoot" 也没有扩展到全宽！

原因是我使用的是 SplitView，并且我在 SpiltView 的内容元素中导航 MasterDetailPage.xaml。我只是为 SplitView 设置了 HorizontalAlign='Stretch' 就解决了我的问题！！

windows 10 uwp 应用程序中的 ContentPresenter 未扩展到全宽

ContentPresenter in windows 10 uwp app not expanding to full width

xaml

visual-studio

win-universal-app

windows-10

windows-10-universal