'How can I improve the layout for this Input Screen?

Right now I have this XAML layout for my WPF application:

<Window x:Class="Cabrillo_Editor.MainWindow"
        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:Cabrillo_Editor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_Exit" Click="ExitApplication"/>
            <MenuItem Header="_New"/>
            <MenuItem Header="_Save" Click="SaveCabrilloFile"/>
        </Menu>
        <StackPanel>
            <GroupBox Height="Auto" Header="General">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="185"/>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="5"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <DockPanel Grid.Row="0" Grid.Column="0" Margin="0,0,0,5">
                        <Label>My Call:</Label>
                        <TextBox Width="120" Name="CallsignTextBox" HorizontalAlignment="Right" CharacterCasing="Upper"/>
                    </DockPanel>
                    <DockPanel Grid.Row="2" Grid.Column="0">
                        <Label>My Grid:</Label>
                        <TextBox Width="120" Name="GridTextBox" HorizontalAlignment="Right"/>
                    </DockPanel>
                    <DockPanel Grid.Row="0" Grid.Column="2">
                        <Label>Contest:</Label>
                        <ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0"/>
                    </DockPanel>
                    <DockPanel Grid.Row="2" Grid.Column="2">
                        <Label>Assisted:</Label>
                        <CheckBox VerticalAlignment="Center" Name="AssistedCheckBox" Margin="5,0,0,0"/>
                    </DockPanel>
                    <DockPanel Grid.Row="0" Grid.Column="4">
                        <Label>Band:</Label>
                        <ComboBox Width="150" Name="BandComboBox" Margin="5,0,0,0"/>
                    </DockPanel>
                </Grid>
            </GroupBox>
        </StackPanel>
    </DockPanel>
</Window>

And it looks like this: Window

Why, for example, is are the ComboBoxes so streched if I set the row height to "Auto" (same for the TextBoxes)?

Is there a better way to make consistent horizontal space between the columns?

c++sharpwpfxamllayout


Solution 1:[1]

This is occurring because those controls will stretch to fill their parent container by default. To override this, simply set the VeriticalAlignment property and Height property (if needed).

<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0" VerticalAlignment=Top/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tronald

Related Questions