Student Student - 27 days ago 13
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

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>
Comments