How to dynamically re-size user control and contents? - wpf

Question

I have a user control that is contained in a Window. But I noticed when I maximize and re-size the window, the user control and UI elements don't adjust accordingly as shown here.
What I did try is wrapping the grid in a ViewBox following this tutorial, but the content doesn't re-size accordingly and seems pushed together.
Does anyone know how to resolve this re-sizing issue?
An example of the user control xaml definition:
<UserControl x:Class="MongoDBApp.Views.CustomerDetailsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:email_validator="clr-namespace:MongoDBApp.Validator"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Width="800"
Height="500">
<Viewbox>
<xctk:BusyIndicator IsBusy="{Binding ButtonEnabled}">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height=".50*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height=".2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="17*" />
<ColumnDefinition Width="142*" />
<ColumnDefinition Width="29*" />
<ColumnDefinition Width="171*" />
<ColumnDefinition Width="342*" />
<ColumnDefinition Width="85*" />
</Grid.ColumnDefinitions>
<DockPanel>
<ToolBarTray DockPanel.Dock="Top" Orientation="Horizontal">
<ToolBar>
<Button Command="{Binding RefreshCommand}" ToolTip="Refreshes the customer records.">
<Image Width="30"
Height="30"
Source="/MongoDBApp;component/Images/refresh.png" />
</Button>
</ToolBar>
</ToolBarTray>
</DockPanel>
<DataGrid x:Name="customersgrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="4"
AutoGenerateColumns="False"
ItemsSource="{Binding Customers}"
SelectedItem="{Binding SelectedCustomer}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Id}" Header="ID" />
<DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
<DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
<DataGridTextColumn Binding="{Binding Email}" Header="Email" />
<DataGridTextColumn Binding="{Binding Address}" Header="Address" />
<DataGridTextColumn Binding="{Binding Country}" Header="Country" />
</DataGrid.Columns>
</DataGrid>
<Label Grid.Row="4"
Grid.Column="1"
Margin="51,0,20.672,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox x:Name="fNameTbx"
Grid.Row="4"
Grid.Column="3"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.FirstName}"
TextWrapping="Wrap" />
<TextBlock x:Name="iDTbx"
Grid.Row="4"
Grid.Column="4"
Width="180"
Height="23"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.Id}"
TextWrapping="Wrap" />
<Label Grid.Row="6"
Grid.Column="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Country:" />
<ComboBox Grid.Row="6"
Grid.Column="4"
Width="180"
Height="30"
Margin="84,9,84,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
DisplayMemberPath="Name"
ItemsSource="{Binding Countries}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Text="{Binding SelectedCustomer.Country}" />
<Button x:Name="addBtn"
Grid.Row="7"
Grid.Column="1"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Command="{Binding AddCommand}"
Content="Add" />
</Grid>
</Grid>
</xctk:BusyIndicator>
</Viewbox>
</UserControl>
And the Window that holds the UserControl:
<Window x:Class="MongoDBApp.Views.ApplicationView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:MongoDBApp.Views"
xmlns:vm="clr-namespace:MongoDBApp.ViewModels"
Title="ApplicationView"
Width="800"
Height="500">
<Window.Resources>
<DataTemplate DataType="{x:Type vm:CustomerDetailsViewModel}">
<views:CustomerDetailsView />
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<vm:ApplicationViewModel />
</Window.DataContext>
<TabControl ItemsSource="{Binding PageViewModels}"
SelectedItem="{Binding CurrentPageViewModel}"
TabStripPlacement="Top">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Setter Property="IsEnabled" Value="{Binding IsEnabled}" />
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</Window>

Answer 1

At first, it is not correct to set Height of RowDefinition large numbers cause you want resizable Window and so you need declare Height and Width in proportion. There are no proportion like Height="70*" or Width=342*.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<DockPanel>
<ToolBarTray DockPanel.Dock="Top" Orientation="Horizontal">
<ToolBar>
<Button Command="{Binding RefreshCommand}" ToolTip="Refreshes the customer records.">
<Image Width="30"
Height="30"
/>
</Button>
</ToolBar>
</ToolBarTray>
</DockPanel>
<DataGrid x:Name="customersgrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="4"
AutoGenerateColumns="False"
ItemsSource="{Binding Customers}"
SelectedItem="{Binding SelectedCustomer}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Id}" Header="ID" />
<DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
<DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
<DataGridTextColumn Binding="{Binding Email}" Header="Email" />
<DataGridTextColumn Binding="{Binding Address}" Header="Address" />
<DataGridTextColumn Binding="{Binding Country}" Header="Country" />
</DataGrid.Columns>
</DataGrid>
<Label Grid.Row="4"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox x:Name="fNameTbx"
Grid.Row="4"
Grid.Column="3"
MinWidth="20"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.FirstName}"
TextWrapping="Wrap" />
<TextBlock x:Name="iDTbx"
Grid.Row="4"
Grid.Column="4"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.Id}"
TextWrapping="Wrap" />
<Label Grid.Row="6"
Grid.Column="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Country:" />
<ComboBox Grid.Row="6" Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
DisplayMemberPath="Name"
ItemsSource="{Binding Countries}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Text="{Binding SelectedCustomer.Country}" />
<Button x:Name="addBtn"
Grid.Row="7"
Grid.Column="1"
HorizontalAlignment="Left"
Command="{Binding AddCommand}"
Content="Add" />
</Grid>
Then, it is not necessary to set size for your UserControl, if you want to be UserControl resizable. So remove this settings:
Width="800"
Height="500"
Good example of Resizable Window:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
<Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
<Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
<Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right"
MinWidth="80" Margin="3" Content="Send" />
</Grid>
See this tutorial.

Answer 2

You've got specified:
Width="800"
Height="500"
in the UserControl. Maybe it's the reason of such behavior.