Xaml design, basic issues on resize

Question

I'm new to xaml design, last time I designed an user control I used Windows Forms :-( I was used to anchor controls and stop, when I resized the form the controls resize accordingly. What I was trying to create is something like this

Where Column 0 and Column 2 are fixed on maximum labels size, Column 1 and 3 expand on window resize.
Textboxes 2 and 7 expand on window resize
Textboxe 3 expand on window resize BUT it reach the right border (like Textbox 7)
Comboboxes are fixed size based on their items size
RichTextBox close to label 4 expanded on right and bottom border in order to occupy all available space

I tried grid, stack panels but all my tries failed for some particular.

EDIT

I followed BionicCode suggestions and created an usercontrol with grid inside and put it in a TabControl and this is the result 1 experiment

When I resize it Texboxes 2,3,7 and RichTextBox are correctly resized in horizontal but there are 2 issues left:

when I resize to a low width the Columns 0 and 2 are resized too much and the text is cutted
The rich text box is not expanded vertically so there is empty space between its lower border and tab bottom

This is the code I created

<UserControl x:Class="MyControl"
         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" 
         xmlns:local="clr-namespace:Gui"
         mc:Ignorable="d">

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Dictionaries\Styles.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

<Grid Height="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="36*"/>
        <ColumnDefinition Width="163*" />
        <ColumnDefinition Width="34*"/>
        <ColumnDefinition Width="165*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Label Name="labelCol0"      Grid.Row="0" Grid.Column="0" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5" HorizontalAlignment="Left" >Column 0</Label>
    <Label Name="labelCol1"      Grid.Row="0" Grid.Column="1" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5">Column 1</Label>
    <Label Name="labelCol2"      Grid.Row="0" Grid.Column="2" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5">Column 2</Label>
    <Label Name="labelCol3"      Grid.Row="0" Grid.Column="3" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5">Column 3</Label>

    <Label Name="label1"        Grid.Row="1" Grid.Column="0" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5"  HorizontalAlignment="Left">label 1</Label>
    <ComboBox Name="_cbo1"    Grid.Row="1" Grid.Column="1" Width="93" HorizontalAlignment="Left" TabIndex="0" Margin="0,5,0,5" />
    <Label Name="label6"     Grid.Row="1" Grid.Column="2" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="4" Margin="1,5,0,5"  HorizontalAlignment="Left">label 6</Label>
    <ComboBox Name="_cbo2"  Grid.Row="1" Grid.Column="3" Width="76" TabIndex="3" HorizontalAlignment="Left" Margin="0,5,0,5" />

    <Label Name="label2"    Grid.Column="0" Grid.Row="2" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="8" HorizontalAlignment="Left" Margin="1,5,0,5" Width="42" >label 2</Label>
    <TextBox Name="_txt2" Grid.Column="1" Grid.Row="2" TabIndex="6" TextWrapping="Wrap" Margin="0,6,10,6" Text="TextBox 2"/>
    <Label Name="label7"       Grid.Column="2" Grid.Row="2" Width="47" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="9" HorizontalAlignment="Left" Margin="0,5,0,5" >label 7</Label>
    <TextBox Name="_txt7"    Grid.Column="3" Grid.Row="2" Width="auto" TabIndex="7" TextWrapping="Wrap" Margin="1,5,10,5" Text="TextBox 7" />

    <Label Name="label3"        Grid.Column="0" Grid.Row="3" Width="57" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="13" HorizontalAlignment="Left" Margin="1,5,0,5" >label 3</Label>
    <TextBox Name="_txt3" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="3" TabIndex="12" TextWrapping="Wrap" Margin="0,5,10,5" Text="TextBox 3" />

    <Label Name="label4"        Grid.Column="0" Grid.Row="4" Width="42" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="24" HorizontalAlignment="Left" Margin="1,72,0,73" >label 4</Label>
    <RichTextBox Name="richTextBox4" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" Width="auto" TabIndex="25" Margin="1,5,10,10" >
        <FlowDocument>
            <Paragraph>
                <Run></Run>
            </Paragraph>
        </FlowDocument>
    </RichTextBox>

</Grid>

You should use a Grid (rows and columns layout) and configure the layout behavior of its child elements using the appropriate HorizontalAlignment (and VerticalAlignment) configuration. For example the default HorizontalAlignment value is Stretch. Setting it to Left will prevent the elements from resizing when the parent container is being resized. — BionicCode, Apr 10 '23 at 09:43

Gianluca D'Elia · Answer 1 · 2023-05-05T08:08:20.943

I found the solution

I semplified everything.

My MainWindow.xaml is

<Window x:Class="Client.MainWindow2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Client"
    mc:Ignorable="d"
    Title="MainWindow" MinHeight="600" MinWidth="700" SizeChanged="Window_SizeChanged">

<Grid Name="mainGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*" />
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

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

    <Menu x:Name="_mainMenuStrip" IsMainMenu="True"         Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
        <MenuItem Header="_File" Name="fileMenuItem" Click="newMenuItem_Click"/>
    </Menu>
    <Image Source="Resources/NewMaterial.png" Width="79"    Grid.Row="1" Grid.Column="0" />

    <TabControl Name="mainTabControl"                       Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

    <StatusBar x:Name="statusStrip1"                        Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" >
        <Label x:Name="lblSize" Content="Label"/>
    </StatusBar>
</Grid>

and my control is

<UserControl x:Class="Gui.PersonView3"
         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" 
         xmlns:local="clr-namespace:Gui"
         mc:Ignorable="d">

<Grid Name="mainGrid" Margin="10,10,10,10" ShowGridLines="True" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="163*" />
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="165*" />
    </Grid.ColumnDefinitions>

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

    <Label Name="labelCol0"     Grid.Row="0" Grid.Column="0" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5" HorizontalAlignment="Left" >Column 0</Label>
    <Label Name="labelCol1"     Grid.Row="0" Grid.Column="1" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5">Column 1</Label>
    <Label Name="labelCol2"     Grid.Row="0" Grid.Column="2" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5">Column 2</Label>
    <Label Name="labelCol3"     Grid.Row="0" Grid.Column="3" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5">Column 3</Label>

    <Label Name="label1"        Grid.Row="1" Grid.Column="0" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="1" Margin="1,5,10,5"  HorizontalAlignment="Left">label 1</Label>
    <ComboBox Name="_cbo1"      Grid.Row="1" Grid.Column="1" Width="93" HorizontalAlignment="Left" TabIndex="0" Margin="0,5,0,5" />
    <Label Name="label6"        Grid.Row="1" Grid.Column="2" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="4" Margin="1,5,0,5"  HorizontalAlignment="Left">label 6</Label>
    <ComboBox Name="_cbo2"      Grid.Row="1" Grid.Column="3" Width="76" TabIndex="3" HorizontalAlignment="Left" Margin="0,5,0,5" />

    <Label Name="label2"        Grid.Column="0" Grid.Row="2" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="8" HorizontalAlignment="Left" Margin="1,5,0,5" Width="42" >label 2</Label>
    <TextBox Name="_txt2"       Grid.Column="1" Grid.Row="2" TabIndex="6" TextWrapping="Wrap" Margin="0,6,10,6" Text="TextBox 2"/>
    <Label Name="label7"        Grid.Column="2" Grid.Row="2" Width="47" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="9" HorizontalAlignment="Left" Margin="0,5,0,5" >label 7</Label>
    <TextBox Name="_txt7"       Grid.Column="3" Grid.Row="2" Width="auto" TabIndex="7" TextWrapping="Wrap" Margin="1,5,10,5" Text="TextBox 7" />

    <Label Name="label3"        Grid.Column="0" Grid.Row="3" Width="57" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="13" HorizontalAlignment="Left" Margin="1,5,0,5" >label 3</Label>
    <TextBox Name="_txt3"       Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="3" TabIndex="12" TextWrapping="Wrap" Margin="0,5,10,5" Text="TextBox 3" />

    <Label Name="label4"        Grid.Column="0" Grid.Row="4" Width="42" FontSize="11" FontFamily="Microsoft Sans Serif" TabIndex="24" HorizontalAlignment="Left" Margin="1,5,0,73" >label 4</Label>
    <RichTextBox Name="richTextBox4" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" Width="auto" TabIndex="25" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="1,5,10,10" >
    </RichTextBox>

</Grid>

the issue was not related to the control but to the "control creation".

When I create the tab containing only the user control I set the properties

tab.HorizontalContentAlignment = HorizontalAlignment.Stretch; tab.VerticalContentAlignment = VerticalAlignment.Top;

Changing the second property to

tab.VerticalContentAlignment = VerticalAlignment.Stretch;

Everything works correctly

Thanks

Xaml design, basic issues on resize

1 Answers1