CODEWITHSUNDEEP
c#xamluwp
Hemil
Hemil

Reputation: 1016

Grid is not using all the space available to it

I began learning C# a few weeks ago in order to develop a UWP app. I am following Bob Tabor's tutorials "Windows 10 development for absolute beginners". He gives challenges while teaching so the we apply whatever we learn.

In his video no. 31, he gives a challenge. The idea is to make an app that looks like this: App image

While solving this challenge, I came up with this mainpage.xaml. Just to give an overview, the black buttons on top and the image at the bottom is in mainpage.xaml. There also exists a frame in which different pages are shown depending on which button is clicked. And in the constructor of mainpage, I navigate to donuts.xaml.

This is my mainpage.xaml 

<Page
x:Class="Stupendous_Styles_Challenge.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Stupendous_Styles_Challenge"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>
    <Style TargetType="Button" x:Key="myButtonStyle">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Height" Value="100" />
        <Setter Property="BorderThickness" Value="0, 0, 2, 0" />
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
    </Style>

    <Style TargetType="Image" x:Key="myIconStyle">
        <Setter Property="Width" Value="50" />
        <Setter Property="Height" Value="50" />
        <Setter Property="Margin" Value="0, 0, 10, 0" />
    </Style>
</Page.Resources>

<Grid>

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

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Button Name="DonutsButton" 
            Style="{StaticResource myButtonStyle}"  
            Click="DonutsButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/coffee-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Donuts" FontSize="18" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
    </Button>

    <Button Name="CoffeeButton" 
            Style="{StaticResource myButtonStyle}"
            Grid.Column="1" 
            Click="CoffeeButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/donut-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Coffee" FontSize="18" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
        </StackPanel>
    </Button>

    <Button Name="ScheduleButton" 
            Style="{StaticResource myButtonStyle}" 
            Grid.Column="2" 
            Click="ScheduleButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/schedule-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Schedule" FontSize="18" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
    </Button>

    <Button Name="CompleteButton"
            Style="{StaticResource myButtonStyle}"
            Grid.Column="3" 
            Click="CompleteButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/schedule-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Complete" FontSize="18" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
    </Button>

    <Grid Grid.Row="1" Grid.ColumnSpan="4">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Frame Name="myFrame"></Frame>

        <Image Grid.Column="1" Source="Assets\background.jpg" Stretch="UniformToFill"/>
    </Grid>

</Grid>

The problem is very silly. The app runs fine and look exactly like this. But when I resize the window, the middle (largest [the frame one]) part doesn't resize. Instead white border appears on the side. Something like this: The Problem

Then, out of curiosity, I changed myFrame's background to Light Blue. The result was: Shock

This meant that the frame actually got the full area. This is my donuts.xaml:

<Page
x:Class="Stupendous_Styles_Challenge.Donuts"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Stupendous_Styles_Challenge"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="600">

<Page.Resources>
    <Style TargetType="TextBlock" x:Key="myTextBlockStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Margin" Value="10, 0, 0, 0" />
    </Style>

    <Style TargetType="Slider" x:Key="mySliderStyle">
        <Setter Property="Width" Value="200" />
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Maximum" Value="24" />
        <Setter Property="Minimum" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Background="Red" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Image Source="Assets/white-logo.png" Height="200" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

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

        <TextBlock Text="Original Glazed Count: " Style="{StaticResource myTextBlockStyle}"/>
        <Slider Grid.Column="1" Style="{StaticResource mySliderStyle}" />

        <TextBlock Grid.Row="1" Text="Speedway Special Count: " Style="{StaticResource myTextBlockStyle}" />
        <Slider Grid.Column="1" Grid.Row="1" Style="{StaticResource mySliderStyle}" />
    </Grid>

</Grid>

Notice that the grid specifies "HorizontalAlignment" to "Stretch". Can someone help me figure out why is this happening?

Upvotes: 0

Views: 82

Answers (2)

Babbillumpa
Babbillumpa

Reputation: 1864

If you set explicitly the width of the Page it will never stretch:

Remove Width="600", alternatively you can set MinWidth="600".

<Page
x:Class="Stupendous_Styles_Challenge.Donuts"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Stupendous_Styles_Challenge"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" MinWidth="600">

<Page.Resources>
    <Style TargetType="TextBlock" x:Key="myTextBlockStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Margin" Value="10, 0, 0, 0" />
    </Style>

Upvotes: 1

Lennart
Lennart

Reputation: 752

I think this might solve the issue, this is the edited version of donuts.xaml:

<Page
x:Class="Stupendous_Styles_Challenge.Donuts"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Stupendous_Styles_Challenge"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="600">

<Page.Resources>
    <Style TargetType="TextBlock" x:Key="myTextBlockStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Margin" Value="10, 0, 0, 0" />
    </Style>

    <Style TargetType="Slider" x:Key="mySliderStyle">
        <Setter Property="Width" Value="200" />
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Maximum" Value="24" />
        <Setter Property="Minimum" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Background="Red" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition />
    </Grid.RowDefinitions>

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

    <Image Source="Assets/white-logo.png" Height="200" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

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

        <TextBlock Text="Original Glazed Count: " Style="{StaticResource myTextBlockStyle}"/>
        <Slider Grid.Column="1" Style="{StaticResource mySliderStyle}" />

        <TextBlock Grid.Row="1" Text="Speedway Special Count: " Style="{StaticResource myTextBlockStyle}" />
        <Slider Grid.Column="1" Grid.Row="1" Style="{StaticResource mySliderStyle}" />
    </Grid>

</Grid>

added this in the 

<Grid Background="Red" HorizontalAlignment="Stretch">

section:

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

I think the problem was that the grid inside the frame wasn't taking up the space it could get and had a fixed width, with the columndefinition added it does take all the space it can.

Upvotes: 0

Related Questions