ContentPresenter in windows 10 uwp app not expanding to full width

Question

I have a master/details page with a list view and a content presenter. My problem is that the content presenter does not fill the entire remaining space of the parent grid when the content of the text block is smaller the current window.

I have tried adding both HorizontalAlign='Stretch' and VerticalAlign='Stretch' as well but nothing works.

Here's the code for the 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>

Can anyone solve this issue? Here's a screenshot my problem.

Answer 1

You could try to put your contentpresenter inside a ViewBox. The ViewBox is designed to stretch and scale a single child to fill the avialable space.

Documentation here

I hope that helps you :)

Answer 2

I tested your xaml and I can not reproduce your problem Please see the screenshot I the blue space is your contentPresenter, the orange space is the ScrollViewer and finally your textblocks with dummy text.

Answer 3

After setting different colors to the ContentPresenter and the main grid itself, I found that even my main grid "LayoutRoot" was not expanding to full width!

The reason being that I was using a SplitView and I was navigating my MasterDetailPage.xaml inside the SpiltView's Content element. I simply set HorizontalAlign='Stretch' for the SplitView and it solved my issue!!