UWP XAML Grid Resizes Unevenly With Equal Column Widths

0
votes

I'm writing a UWP app and have a page with a full-page grid inside a scrollviewer with two even-width outer columns and two even-width inner columns. The right side of the page is a mirror of the left, and everything is aligned to the similar column on the opposite side. However, when I run my app and decrease the width, after a certain point only the third column shrinks. Before that point, all the columns adjust correctly. I don't have any width or minwidth properties set. If I set a fixed width on my grid, the columns resize to be even. I've tried changing which columns my elements are aligned to on various elements, removing the ScrollViewer, and double- and triple-checking for any min-widths being set anywhere.

<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="69*"/>
            <ColumnDefinition Width="76*"/>
            <ColumnDefinition Width="76*"/>
            <ColumnDefinition Width="69*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="27*"/>
            <RowDefinition Height="62*"/>
            <RowDefinition Height="27*"/>
            <RowDefinition Height="399*"/>
            <RowDefinition Height="340*"/>
            <RowDefinition Height="105*"/>
        </Grid.RowDefinitions>
        <Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
            <RichTextBlock Foreground="White">
                <Paragraph>
                    <Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
                </Paragraph>
            </RichTextBlock>
        </Viewbox>
        <Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
            <RichTextBlock Foreground="White">
                <Paragraph>
                    <Run Text="Away" FontSize="48" FontWeight="Bold"/>
                </Paragraph>
            </RichTextBlock>
        </Viewbox>
        <Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
        <Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
            <RichTextBlock IsTextSelectionEnabled="False">
                <Paragraph>
                    <Run Text="Goal" FontSize="48" Foreground="White" />
                </Paragraph>
            </RichTextBlock>
        </Button>
        <Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
            <RichTextBlock IsTextSelectionEnabled="False">
                <Paragraph>
                    <Run Text="Goal" FontSize="48" Foreground="White" />
                </Paragraph>
            </RichTextBlock>
        </Button>
        <Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
        <Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
        <RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
            <Paragraph TextAlignment="Center">
                <Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
            </Paragraph>
        </RichTextBlock>
        <RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
            <Paragraph TextAlignment="Center">
                <Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
            </Paragraph>
        </RichTextBlock>
        <Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
        <Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
        <Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>

    </Grid>
</ScrollViewer>

This is how my page looks in the designer:

Screenshot of page in Blend

1
xamluwp
You're using a ScrollViewer which adapts on its content size. By the way, the inside Grid is declaring a series of rows/columns as "starred", that is their size depends on the parent (the ScrollViewer content) size. That's inconsistent: you must either define the Grid Width/Height (suggested), or define the rows/columns size. – Mario Vernari
I didn't think about that, thank you. I don't think that's relevant to the issue however, since it was having the same problem without the ScrollViewer. What I intended to do was set a minimum width on the Grid and have it scroll below that width. – Ceshion

1 Answers

1
votes

OK... it appears to me that the layout is overconstrained - likely due to a lot of Blend arranging (a lot of crazy margins in there). If you want predictable layouts, I would recommend positioning the controls within the bounds of the grid sections that you expect to see them rather than trying to use margins to position them. Basically, which grid section do you want the element (Grid.Row=# Grid.Column=#), how many sections does it span (Grid.RowSpan=# Grid.ColumnSpan=#), which edges to align to (HorizontalAlignment=Left/Right/Center/Stretch VerticalAlignment=Left/Right/Center/Stretch), and how much space do you want from the edges (Margin=# # # #)?

So,

<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
    <RichTextBlock Foreground="White">
        <Paragraph>
            <Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
        </Paragraph>
    </RichTextBlock>
</Viewbox>

Becomes,

<Viewbox >
    <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>

Additionally, I'm not sure you need the viewboxes, richtextboxes, and paragraphs with runs for what you are doing, but I do not know the entire scope of what you're trying to accomplish.

Try something like the following:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
        <Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="69*"/>
                <ColumnDefinition Width="76*"/>
                <ColumnDefinition Width="76*"/>
                <ColumnDefinition Width="69*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="27*"/>
                <RowDefinition Height="62*"/>
                <RowDefinition Height="27*"/>
                <RowDefinition Height="399*"/>
                <RowDefinition Height="340*"/>
                <RowDefinition Height="105*"/>
            </Grid.RowDefinitions>

            <Viewbox >
                <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Viewbox>
            <Viewbox Grid.Column="3">
                <TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Viewbox>
            <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
                <TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Button>
            <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
                <TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            </Button>
            <Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch"  Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
            <Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
            <Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch"  Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
            <Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
            <TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
            <Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />

        </Grid>
    </ScrollViewer>