Question Xaml layout problem

sup3r93

Member
Joined
Aug 1, 2022
Messages
8
Location
Milano, Italy
Programming Experience
Beginner
Hi everyone, I'm making a window, the first image you see is the visual studio editor, the second the program started, but why the heck it destroys the whole layout .. I can't understand if it's a problem with the size of the objects , many are not even displayed 😭


xaml:
<Window x:Class="Emergency_Services_WPF.Page.Event"
        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:Emergency_Services_WPF.Page"
        mc:Ignorable="d"
        Title="Event" Height="1078" Width="1546" MinHeight="1078" MinWidth="1546" MaxHeight="1078" MaxWidth="1546" ResizeMode="CanResize">
    <Window.Resources>
        <Style x:Key="Radio1" TargetType="RadioButton">
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="FontWeight" Value="ExtraBold"/>
        </Style>
    </Window.Resources>
    <Grid Background="#FFC6D7E7">
        <DockPanel LastChildFill="False" Margin="0,0,0,1003" Background="#FFC6D7E7">
            <Grid Width="1546">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Grid.Row="0" Content="datatime" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Label Grid.Column="0" Grid.Row="1" Content="numCall" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Label Grid.Column="2" Grid.Row="0" Content="inherited" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Label Grid.Column="2" Grid.Row="1" Content="connected" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Label Grid.Column="4" Grid.Row="0" Content="operatorLabel" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Label Grid.Column="4" Grid.Row="1" Content="referent/Medical referent" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Top" Width="172" Height="30"/>
                <TextBox IsReadOnly="True" Grid.Column="1" Grid.Row="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Text="sqlDataTime" Width="172" Height="30"/>
                <TextBox IsReadOnly="True" Grid.Column="1" Grid.Row="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Text="sqlNumCall" Width="172" Height="30"/>
                <TextBox IsReadOnly="True" Grid.Column="3" Grid.Row="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Text="sqlInherited" Width="172" Height="30"/>
                <TextBox IsReadOnly="True" Grid.Column="3" Grid.Row="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Text="sqlConnected" Width="172" Height="30"/>
                <TextBox IsReadOnly="True" Grid.Column="5" Grid.Row="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Text="sqlOperator" Width="172" Height="30"/>
                <TextBox IsReadOnly="True" Grid.Column="5" Grid.Row="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Text="sqlReferentAndMedical" Width="172" Height="30"/>
                <Button Grid.Column="6" Grid.Row="0" Content="duplicateButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Button Grid.Column="6" Grid.Row="1" Content="checkerButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Button Grid.Column="7" Grid.Row="0" Content="logButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Button Grid.Column="7" Grid.Row="1" Content="activableMission" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
                <Button Grid.Column="8" Grid.Row="0" Content="inheritedButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="172" Height="30"/>
            </Grid>
        </DockPanel>
        <TabControl Margin="0,64,0,201">
            <TabItem Header="TabItem">
                <Grid Background="#FFC6D7E7">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MaxWidth="35" MinWidth="35" Width="35"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="1" Content="callerEventTabPage" HorizontalContentAlignment="Center" HorizontalAlignment="Left" Width="197" Height="30" Margin="149,10,0,729" FontWeight="Bold" FontSize="16"/>
                    <Label Grid.Column="1" Content="patientsEventTabPage" HorizontalContentAlignment="Center" HorizontalAlignment="Left" Width="196" Height="30" Margin="637,10,0,729" FontWeight="Bold" FontSize="16"/>
                    <Label Grid.Column="1" Content="Tel #1" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="10,45,0,694"/>
                    <Label Grid.Column="1" Content="Tel #2" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="10,80,0,659"/>
                    <Label Grid.Column="1" Content="surname" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="10,115,0,624"/>
                    <Label Grid.Column="1" Content="name" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="10,150,0,589"/>
                    <TextBox Grid.Column="1" TextWrapping="Wrap" Height="30" Margin="90,45,1100,694"/>
                    <TextBox Grid.Column="1" TextWrapping="Wrap" Height="30" Margin="90,80,1100,659"/>
                    <TextBox Grid.Column="1" TextWrapping="Wrap" Margin="90,150,1030,589"/>
                    <TextBox Grid.Column="1" TextWrapping="Wrap" Height="30" Margin="90,115,1030,624"/>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="410,45,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_call.png"/>
                        </Button.Background>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="445,45,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_get_call.png"/>
                        </Button.Background>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="410,80,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_call.png"/>
                        </Button.Background>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="445,80,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_get_call.png"/>
                        </Button.Background>
                    </Button>
                    <Label Grid.Column="1" Content="Tel #1" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="510,45,0,694"/>
                    <Label Grid.Column="1" Content="Tel #2" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="510,80,0,659"/>
                    <Label Grid.Column="1" Content="surname" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="510,115,0,624"/>
                    <Label Grid.Column="1" Content="name" HorizontalContentAlignment="Right" HorizontalAlignment="Left" Width="80" Height="30" Margin="510,150,0,589"/>
                    <TextBox Grid.Column="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Height="30" Margin="590,45,600,694"/>
                    <TextBox Grid.Column="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Height="30" Margin="590,80,600,659"/>
                    <TextBox Grid.Column="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Height="30" Margin="590,115,530,624"/>
                    <TextBox Grid.Column="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextWrapping="Wrap" Height="30" Margin="590,150,530,589"/>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="910,45,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_call.png"/>
                        </Button.Background>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="945,45,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_get_call.png"/>
                        </Button.Background>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="910,80,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_call.png"/>
                        </Button.Background>
                    </Button>
                    <Button Grid.Column="1" HorizontalAlignment="Left" Margin="945,80,0,0" VerticalAlignment="Top" Height="30" Width="30">
                        <Button.Background>
                            <ImageBrush ImageSource="C:\Emergenza\icon\phone_get_call.png"/>
                        </Button.Background>
                    </Button>
                    <Image Grid.Column="1" HorizontalAlignment="Left" Margin="980,150,0,0" VerticalAlignment="Top" Width="30" Height="30" Source="/Resources/icons8-exclamation-mark-32.png"/>
                </Grid>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid Background="#FFC6D7E7"/>
            </TabItem>
        </TabControl>
        <TabControl Margin="0,861,0,0">
            <TabItem Header="TabItem">
                <Grid Background="#FFC6D7E7"/>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid Background="#FFC6D7E7"/>
            </TabItem>
        </TabControl>

    </Grid>
</Window>


1.png



2.png
 
Solution
As I see it the problem is with all of the Margin settings. If you drag and drop controls onto the view the IDE uses margins from the edge of the window to place them. Fixed values will always wreck your layout. Just type the control name and only use Margin="?,?,?,?" when you need to add space between controls or edges. Almost everything will try to use all of the available space it is given. You window is given a default container when you create a new window. It is the Grid. That grid will be a big as the available space. If you add a button to the grid without defining rows and columns the button will be as big as the window. Adjust its size by defining rows and columns and in that definition set the width of the columns and the...

Scottintexas

Member
Joined
Jun 21, 2018
Messages
18
Location
Texas
Programming Experience
5-10
As I see it the problem is with all of the Margin settings. If you drag and drop controls onto the view the IDE uses margins from the edge of the window to place them. Fixed values will always wreck your layout. Just type the control name and only use Margin="?,?,?,?" when you need to add space between controls or edges. Almost everything will try to use all of the available space it is given. You window is given a default container when you create a new window. It is the Grid. That grid will be a big as the available space. If you add a button to the grid without defining rows and columns the button will be as big as the window. Adjust its size by defining rows and columns and in that definition set the width of the columns and the height of the rows. As you build your UI you will add more containers in the main Grid (or Border, or some other container) to get things in the right place and looking good.

Start by deleting all of the margins that were defined when you dropped the control on the window. Go back to your column definitions and add the width values to make the first row of labels and text boxes look right. Make the text box fill the spaces with HorizontalAlignment="Stretch". Set the height of the rows and use VerticalAlignment="Stretch" you can eliminate the squishing problem you are having. Form there you will begin to see how to make it look right all over.
 
Solution
Top Bottom