Student Student - 9 months ago 75
Vb.net Question

VB.NET WPF How to center multiple controls in window/forms?

I am much more familiar with WinForms as it is not so punishing. In WinForms, you can select 3 controls right away and click Format > Align > Center in form and bam! Job done.

But in WPF I am not able to find it in the Format tab anymore. So was wondering if I overlooked it somewhere? Have been searching google for hours already and finally decided to ask here.

Here is a picture to further explain my question.
If I choose Middles, the controls will overlap one another. How can I make sure all 3 will be centered nicely in the form/grid/groupbox?

QUESTION 2 = Also how can I make sure the textboxes have equal space between one another instead of calculating the position every single time?
enter image description here

Answer Source

With WPF you have to think differently. I created the following Window.xaml that hopefully illustrates what I mean. I have grids within grids (gridception?) to get things aligned properly. I use StackPanels for some controls. There are no calculations that need to be made when resizing. I added some colors just to show where the different grids are.

Sample Xaml with grids

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ThrowAwayWpfApplication.Window2"
        Title="Window2" Height="480" Width="640">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Vertical">
                <Label>Development Type</Label>                
                <ComboBox Margin="5,2,5,2"></ComboBox>
                <Label>Development Type</Label>
                <ComboBox Margin="5,2,5,2"></ComboBox>
                <Label>Development Type</Label>
                <ComboBox Margin="5,2,5,2"></ComboBox>
                <Label>Development Type</Label>
                <ComboBox Margin="5,2,5,2"></ComboBox>
                <Label>Development Type</Label>
                <ComboBox Margin="5,2,5,2"></ComboBox>
            </StackPanel>
            <Border Grid.Column="1" Margin="5" BorderThickness="2" BorderBrush="Red" Background="Aqua">
                <Canvas Grid.Column="1" Margin="10" />
            </Border>
        </Grid>
        <Grid Grid.Row="1" Background="AliceBlue">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Vertical" Margin="5">
                <Label>Permanent Number</Label>                
                <TextBox Margin="5,2,5,2" />
            </StackPanel>
            <StackPanel Grid.Column="1" Orientation="Vertical" Margin="5">
                <Label>Quotation Number</Label>
                <TextBox Margin="5,2,5,2" />
            </StackPanel>
            <StackPanel Grid.Column="2" Orientation="Vertical" Margin="5">
                <Label>Invoice Number</Label>
                <TextBox Margin="5,2,5,2" />
            </StackPanel>
        </Grid>
    </Grid>
</Window>

When setting the heights/widths of columns/rows, you can also use percentages to make one row always take up 20% of the height of the grid:

<Grid.RowDefinitions>
    <RowDefinition Height=2*></RowDefinition>
    <RowDefinition Height="8*"></RowDefinition>
</Grid.RowDefinitions>