# .NET and More > WPF, WCF, WF >  WPF Form Resize event in VB>NET 2010

## stigma327

Hey guys,

What is the procedure for resizing controls in response to a form-resize event in WPF.  There doesn't seem to be  "resize" event, and I tried the "SizeChanged" event, as well as the "LayoutUpdated" event and they did not work.  Is this not as simple as handling an event and adjusting the ".width" and ".height" properties of the controls in question?

I would just use WinForms, but I'm having a heck of a time getting ribbons to work in WinForms and the WPF one seems to work pretty well.

Thanks!

EDIT: VB.NET (duh), typos :P

----------


## techgnome

well, WPF is XAML... which is HTML on steroids... so if you wanted to make a div tag 50&#37; of the screen... no matter how wide the screen is, you would set the width to "50%" ... right? I'll say it again.... XAML is HTML on steroids...

one of the features of WPF and XAML is that a designer could develop a CSS and interface independent from the developer... 

-tg

----------


## stigma327

Thanks techgnome.  The percent method didn't work (I got an error that said the percentage could not be converted), but you set me on the right line of thinking.  With some grid controls and property tweaking, I got all the controls properly stretching/resizing.

I'm liking this XAML stuff more and more as I use it.  I really disliked it at first, but it's certainly growing on me.

----------


## dee-u

Can't you use the HorizontalAlignment and VerticalAlignment properties of the control just like Anchors in WinForms? And I think this is better suited in the WPF section.

----------


## si_the_geek

Agreed... _Thread moved from the 'VB.Net' forum to the 'WPF, WCF, WF' forum_

----------


## Sitten Spynne

In general, you don't manually resize controls in a WPF application. WPF applications are meant to be laid out more like a web page than a picture. Instead of specifying exact pixel values, it's better to express control sizes in terms of percentages and other relative values.

So far, it's hard for us to help you because you aren't showing us what you tried. "I got an error" doesn't help us figure out what happened. I assure you percentage sizing isn't a half-baked feature that doesn't work. If you got an error you did something wrong. A post without code is useless.

Percentage sizing in a WPF grid is a bit... interesting. You accomplish it with "star sizing". To get the percent you want, you have to deal with ratios.

For example, this set of column definitions specifies a 2-column grid where both columns occupy 50&#37; of the space:


```
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
```

How do I know they take up 50%? There are 2 stars in total. Each column takes up 1 star. Thus, each column occupies 1/2 = 50% of the space.

Here's a grid where the first column takes up 33% and the second uses 66%:


```
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
```

There's 3 stars total, and the first column is 1/3 = 33%. Here's another way to look at it: the second column is twice as big as the first.

This can get quite complicated:


```
Width="*"
Width="3*"
Width="4*"
Width="*"
```

The column widths are, in order: 11.1%, 33.3%, 44.4%, 11.1%. At this point it's silly to express the percentages. Column 1 is 3x as large as columns 0 and 3. Column 2 is 4 times as large as the other two. Thus Column 3 is 25% larger than column 2.

Another neat sizing mode is Auto. This size lets the control take up as much space as it asks for. This is not so useful for input controls like TextBox, but for static controls like Label it can be neat. Note that since Auto takes up an unknown amount of space, it becomes impossible to talk about star sizes in terms of percentages once you're in there. For example, here's how I might lay out the columns for a two-column data entry form with a label and a textbox for each column:


```
Width="Auto"
Width="*"
Width="Auto"
Width="*"
```

The following XAML demonstrates that layout. Note how the labels remain the same size no matter what, but the text boxes resize as the form resizes *and* they are always the same size relative to each other.


```
<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" /> <!-- 1/8 or 12.5% -->
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto"/> <!-- 3/8 or 37.5%-->
            <ColumnDefinition Width="*"/> <!-- 4/8 or 50.0%-->
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!-- I'm not doing vertical sizing. Assigning an automatic height so my labels/textboxes don't eat up all the space. -->
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        
        <!-- first 'column', first row -->
        <Label Content="First Name:" HorizontalAlignment="Right" /> <!-- By default in row/column 0,0 -->
        <TextBox Grid.Column="1" />

        <!-- first 'column', second row -->
        <Label 
            Grid.Row="1"
            Content="Last Name:" 
            HorizontalAlignment="Right" />
        <TextBox 
            Grid.Column="1"
            Grid.Row="1"/>
        
        <!-- second 'column', first row -->
        <Label 
            Grid.Column="2"
            Content="Favorite Color:"
            HorizontalAlignment="Right"/>
        <TextBox
            Grid.Column="3" />

        <!-- second 'column', second row -->
        <Label 
            Grid.Column="2"
            Grid.Row="1"
            Content="Favorite Band:"
            HorizontalAlignment="Right"/>
        <TextBox
            Grid.Column="3"
            Grid.Row="1"/>
    </Grid>
</Window>
```

Things can get much more complicated than that, but having a firm grasp of how the grid sizes objects is a good first step.

If you could describe what you want your layout to look like and how you want your controls to be resized with the form, I'm sure we could show you how to do it without handling resize events. But you have to give us some information to work with. Most of the time my crystal ball's quite dusty; I'm too lazy to keep it polished.

----------


## Lightning

That last post is very usefull!

----------

