CODEWITHSUNDEEP
c#wpflayout
Kapparino
Kapparino

Reputation: 988

components does not scale properly

For my WPF project in C#, I have to create a menu state which should look like image below

enter image description here

So far, I have created

enter image description here

XAML Code for this window:

<UserControl x:Class="MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="800">
    <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="125"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="400*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>
        <!-- title -->
        <Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
            <Viewbox>
                <TextBlock>Title</TextBlock>
            </Viewbox>
        </Label>
        <!-- menu -->
        <Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>            
        </Grid>
    </Grid>
</UserControl>

Problem with this window is this components (label and buttons with their contents) does not scale properly. What I want is, when I resize the window I want this components to be proportional to window. Not sure if the grid layout is problem, but how can I fix this components scale properly.

EDIT:

Ok, so I followed your instructions and I like the results (everything seems to scale good enough),

enter image description here

but I have two more minor problems:

1) With a new changes to XAML code, my last button is colliding with the south border of the window, which is not what I want. What I want is an empty space with size of almost exactly (if possible) or close space, like between Label "Title" and north border of the window. I found solution by defining a new line at the end <RowDefinition Height="*"/>. Not sure if this is a correct way to go.

2) Thus, so far I understand that , 1, 2*,... multiplies the current size. However, it seems I still feel like I don't fully understand it. Currently, I am asking myself, how can I now change the size (width or height in some case) of the button components inside grid layout? Finally, do I change properties for the size directly to button or via grid layout?

Here is the code for a new window.

<UserControl x:Class="TypeRacer_Client.state.MenuState"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="800">
    <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="3*"/> 
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- title -->
        <Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
            <Viewbox>
                <TextBlock>Title</TextBlock>
            </Viewbox>
        </Label>
        <!-- menu -->
        <Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>            
        </Grid>
    </Grid>
</UserControl>

Upvotes: 4

Views: 296

Answers (1)

Theodosius Von Richthofen
Theodosius Von Richthofen

Reputation: 2469

Use star sizing (ratios) to size your grid's rows etc. Like , 2, 4* etc. This will make the rows and columns keep the same ratios, no matter what size the window is, like this:

<RowDefinition Height="*" />
<RowDefinition Height="2* />  //this will be 2x the previous row's height

Style the buttons for consistent width/height/other properties etc.

 <Style TargetType="Button" x:Name="SomeButtonStyle">
   <Setter Property="Width" Value="90" /> 
 </Style>

then , for each button you want the same height/width/whatever property:

<Button Style="{StaticResource SomeButtonStyle}" />

This will keep you from putting a width, height or font etc. in EVERY button you made, and makes it much faster to change the value in one place, instead of every button.

Upvotes: 4

Related Questions