WPF grid — resize columns in certain order - wpf

Question

I have a problem with WPF grid. Need some help.
I have a grid splitted in two columns (e.g. "col1" and "col2" from left to right). This grid is bound to the window edges with no padding:
|--- col1 ---|--- col2 ---| ← right window border
How can I make these columns resize together with the app window in certain order?
I mean this:
when I shrink the window from the right border I need col2 to resize in first place. When col2 reaches its MinWidth — then col1 begins to shrink (I continue to move the right border of the window).
Is it possible to define the order in which columns change their size?
Or may be I need something else but the grid?
Thanks.

Answer 1

Understanding how to handle events and fire off your own is a cornerstone of understanding C# so I highly recommend you read up on it. That being said, this will get you started, although I'm not sure this is exactly what you want... See example code below. I leave writing code for when the window width is increased as an exercise to you.. Good luck =).
On my MainWindow I set Height="250" Width="600" and the Grid inside it gets two columns...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="_col1" MinWidth="200" />
<ColumnDefinition x:Name="_col2" MinWidth="150"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="_txtCol1Width"
Grid.Column="0"
Background="Crimson" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock x:Name="_txtCol2Width"
Grid.Column="1"
Background="Turquoise" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
x
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += MainWindow_Loaded;
this.SizeChanged += MainWindow_SizeChanged;
}
void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (this.IsLoaded && e.WidthChanged)
{
double changeInWindowWidth = e.NewSize.Width - e.PreviousSize.Width;
if (changeInWindowWidth < 0)
{
if (_col2.ActualWidth + changeInWindowWidth >= _col2.MinWidth)
{
// col 2 has not yet reached its minimum (decrease col2, no change for col1)
_col2.Width = new GridLength(_col2.ActualWidth + changeInWindowWidth, GridUnitType.Pixel);
_col1.Width = new GridLength(_col1.ActualWidth + 0, GridUnitType.Pixel);
}
else if (_col1.ActualWidth + changeInWindowWidth >= _col1.MinWidth)
{
// col 2 has reached its minimum, but col1 has not (decrease col1, no change for col2)
_col1.Width = new GridLength(_col1.ActualWidth + changeInWindowWidth, GridUnitType.Pixel);
_col2.Width = new GridLength(_col2.ActualWidth + 0, GridUnitType.Pixel);
}
else
{
// both columns have reached their minimum, so decrease width of both equally
_col1.MinWidth = _col1.ActualWidth + 0.5 * changeInWindowWidth;
_col2.MinWidth = _col2.ActualWidth + 0.5 * changeInWindowWidth;
_col1.Width = new GridLength(_col1.MinWidth, GridUnitType.Pixel);
_col2.Width = new GridLength(_col2.MinWidth, GridUnitType.Pixel);
}
}
else
{
// todo: handle window width increased ...
}
UpdateTexts();
}
}
void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
UpdateTexts();
}
private void UpdateTexts()
{
_txtCol1Width.Text = String.Format("column {0}\nActualWidth: {1}\n(MinWidth: {2})", 1, _col1.ActualWidth, _col1.MinWidth);
_txtCol2Width.Text = String.Format("column {0}\nActualWidth: {1}\n(MinWidth: {2})", 2, _col2.ActualWidth, _col2.MinWidth);
}
}