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

时间:2016-03-02 03:41:45

标签: visual-studio xaml windows-10 win-universal-app windows-10-universal

我有一个包含列表视图和内容演示者的主/详细信息页面。我的问题是,当文本块的内容小于当前窗口时,内容展示器不会填充父网格的整个剩余空间。

我尝试过添加Horizo​​ntalAlign =' Stretch'和VerticalAlign ='拉伸'同样没什么作用。

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

任何人都可以解决这个问题吗?这是我的问题截图。

ScrollViewer not filling width

3 个答案:

答案 0 :(得分:0)

您可以尝试将您的contentpresenter放入ViewBox中。 ViewBox旨在拉伸和缩放单个子节点以填充可用空间。

Documentation here

我希望能帮到你:)。

答案 1 :(得分:0)

我测试了你的xaml,我无法重现你的问题请看截图 我的蓝色空间是你的contentPresenter,橙色空间是ScrollViewer,最后是带有虚拟文本的文本块。 enter image description here

答案 2 :(得分:0)

在为ContentPresenter和主网格本身设置不同的颜色后,我发现即使我的主网格“LayoutRoot”也没有扩展到全宽!

原因是我使用的是SplitView,而我正在SpiltView的Content元素中导航我的MasterDetailPage.xaml。我只是为 SplitView 设置 Horizo​​ntalAlign ='Stretch',它解决了我的问题!!