Geek Answers Handbook

Components do not scale properly

For my WPF project in C #, I have to create a menu state that should look like the 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>

The problem with this window is that these components (the label and buttons with their contents) do not scale properly. I want, when I resize the window, I want these components to be proportional to the window. Not sure if grid layout is a problem, but how can I fix this component scale properly.

EDIT:

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

enter image description here

but I have two more minor issues :

1) XAML , . ( ) , , "" . , <RowDefinition Height="*"/>. , .

2) , , 1, 2 *,... . , , , . , ( ) ? , ?

.

<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>
+4
1

() .. , 2, 4 * .. , , , :

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

// ..

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

height/width/whatever:

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

, .. "", , , , .

+4

More articles:


All Articles