Question Xaml layout problem

S

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
S
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...
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
Solution

Similar threads

gciraman2024
  • Question
How to display values from the combo box in wpf ui?
Replies
1
Views
516
Skydiver
Skydiver
gciraman2024
  • Question
How to reproduce wpf ui control on a form from the mock-up?
Replies
0
Views
447
gciraman2024
gciraman2024
gciraman2024
  • Question
How to put dottedline around textbox in wpf ui?
Replies
1
Views
723
Skydiver
Skydiver
skanie
  • Question
Question How to set a custom font style for a button
Replies
0
Views
530
skanie
skanie
S
  • Solved
ErrorCode XDG0003
Replies
2
Views
2K
simsenVejle
S

Share this page

Latest posts

Back
Top Bottom