How to make all controls proportionally proportionally changeable when the window is maximized?

Question

When I pressed the maximize button, the window is maximized, but the controls do not change proportionately. What is the best way to resize controls? I am using MVVM. Thank,

Edit:

Here is my code.

<Window x:Class="DataTransfer.View.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Icon="/DataTransfer;component/View/Images/ms_msnexplore.gif" ResizeMode="CanResizeWithGrip" Title="Window1" Height="500" Width="600"> <!--Style="{DynamicResource OfficeStyle}"--> <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!--<ResourceDictionary Source="/DataTransfer;component/View/WindowBase.xaml" />--> <!--<ResourceDictionary Source="/DataTransfer;component/Themes/WPFThemes/CalendarResource.xaml" />--> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width ="*" /> </Grid.ColumnDefinitions> <Button Content="Button" HorizontalAlignment="Left" Margin="52,28,0,0" VerticalAlignment="Top" Width="75" Height="22" /> <DatePicker Name="dp" HorizontalAlignment="Left" Margin="175,25,0,0" VerticalAlignment="Top" Width="123" Text="aaa" GotFocus="DateGotFocused" LostFocus="OnLeaveArchiveDate"/> <Calendar HorizontalAlignment="Left" Margin="47,162,0,0" VerticalAlignment="Top"/> <TextBox Name="t1" HorizontalAlignment="Left" Height="23" Margin="337,23,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" LostFocus="LeaveField" /> <RadioButton Content="RadioButton" HorizontalAlignment="Left" Margin="88,92,0,0" VerticalAlignment="Top"/> <CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="252,96,0,0" VerticalAlignment="Top"/> <ComboBox Name="combo" IsEditable="False" Text="aaa" IsReadOnly="True" HorizontalAlignment="Left" Margin="337,89,0,0" VerticalAlignment="Top" Width="120" Focusable="True" GotFocus="ComboBoxGotFocused" > <ComboBoxItem>January</ComboBoxItem> <ComboBoxItem>February</ComboBoxItem> </ComboBox> <TextBlock HorizontalAlignment="Left" Height="40" Margin="260,184,0,0" TextWrapping="Wrap" Text="Text_Block" VerticalAlignment="Top" Width="257"/> </Grid> </Window> 

Answer 1

WPF has certain “container” controls that automatically resize content, and there are some that don't.

Here are some that do not resize the content (I assume you are using one or more of them):

 StackPanel WrapPanel Canvas TabControl 

Here are some that resize content:

 Grid UniformGrid DockPanel 

Therefore, it is almost always preferable to use a Grid instead of a StackPanel if you do not want to automatically resize. Note that it is still possible that the Grid does not change its internal controls ... it all depends on your settings for Grid.RowDefinition and Grid.ColumnDefinition :

 <Grid> <Grid.RowDefinitions> <RowDefinition Height="100" /> <!--<<< Exact Height... won't resize --> <RowDefinition Height="Auto" /> <!--<<< Will resize to the size of contents --> <RowDefinition Height="*" /> <!--<<< Will resize taking all remaining space --> </Grid.RowDefinitions> </Grid> 

For more information about the Grid control, see the Grid Class page on MSDN. You can also learn more about these container controls on the WPF Container Controls Overview page on MSDN.

Further resizing can be achieved using the FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment properties. The default value for these properties is Stretch , which stretches the elements according to the size of their controls. However, when they are set to any other value, the elements will not stretch.

UPDATE →>

In response to the questions in your comment:

Use the settings of Grid.RowDefinition and Grid.ColumnDefinition to first organize the basic structure ... usually you need to add Grid controls to cells of external Grid controls, if necessary. You can also use the Grid.ColumnSpan and Grid.RowSpan properties to enable controls for placing multiple columns and / or rows of the Grid .

It is most common to have at least one row / column with Height / Width of "*" that will fill the entire remaining space, but you can have two or more with this parameter, in which case the remaining space will be divided between two (or more) rows / columns. "Auto" is a good setting for rows / columns that are not set to "* *", but it really depends on how you want the layout to be.

There are no Auto settings that you can use in the controls in the cells, but it's just as good because we want the Grid determine the sizes of the controls for us ... so we don’t want to set the Height or Width these controls at all.

What I did about the FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment properties was just to let you know that they exist ... since their default value is already Stretch , you usually don't need to set them explicitly.

The Margin property is usually just used to evenly distribute your controls ... if you drag controls from the Visual Studio Toolbox, VS sets the Margin property to place your control exactly where you reset it, but usually it’s not what we want, as it will be useless with automatic selection of controls. If you do, simply delete or edit the Margin property to suit your needs.

Answer 2

Well, it's pretty simple to do.

In the resize event handler window, calculate how many windows have grown / shrunk, and use this fraction to adjust 1) Height, 2) Width, 3) Canvas.Top, 4) Canvas.Left properties for the entire child control elements inside the canvas.

Here is the code:

 private void window1_SizeChanged(object sender, SizeChangedEventArgs e) { myCanvas.Width = e.NewSize.Width; myCanvas.Height = e.NewSize.Height; double xChange = 1, yChange = 1; if (e.PreviousSize.Width != 0) xChange = (e.NewSize.Width/e.PreviousSize.Width); if (e.PreviousSize.Height != 0) yChange = (e.NewSize.Height / e.PreviousSize.Height); foreach (FrameworkElement fe in myCanvas.Children ) { /*because I didn't want to resize the grid I'm having inside the canvas in this particular instance. (doing that from xaml) */ if (fe is Grid == false) { fe.Height = fe.ActualHeight * yChange; fe.Width = fe.ActualWidth * xChange; Canvas.SetTop(fe, Canvas.GetTop(fe) * yChange); Canvas.SetLeft(fe, Canvas.GetLeft(fe) * xChange); } } } 

Answer 3

You can also use the HorizontalAlignment, VerticalAlignment, and Margin values ​​to keep the controls inside the stack pane where you want them to be