WPF float like behaviour in wrappanel

Question

I cannot figure out how to do deserved stuff while changing window size

For better explain I draw picture where you can see how my program behaves with small window (#1) and how when maximized (#2).

I would like to as if is possible (and how?) to make it behave like #3 when maximized - to add horizontal spacer that moves my wrappanel left and grid right

I have following code in xaml:

<Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- In this example row 0 and 2 have no data -->

        <WrapPanel Name="TopMenu" Width="auto" HorizontalAlignment="Center" Grid.Row="1"> 
            <WrapPanel HorizontalAlignment="Center" Height="160" Margin="10,10,0,0">
                content 1
            </WrapPanel>        

            <Grid x:Name="InfoTable" MinWidth="600" Margin="20,20,20,0">
                content 2
            </Grid>
        </WrapPanel>
</Grid>

Thanks Blažek

Answer 1

What you are looking for doesn't exist out of the box. You have to manually set a control to fill the width, otherwise, the wrappanel just lays out from left to right with everything justified left. But here's some code you can play around with that gets you going in the right direction.

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication4"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:WidthConverter x:Key="WidthConverter" />
    </Window.Resources>
    <WrapPanel>
        <Button Content="Button1" Width="150"  Height="20"    />
        <TextBlock Width="{Binding Converter={StaticResource WidthConverter}, Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" Text=" "/>
        <Button Content="Button2" Width="150"  Height="20"   />
    </WrapPanel>
</Window>

And the converter you need to fill the space looks like this:

namespace WpfApplication4 {
    public class WidthConverter : IValueConverter {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
            Console.WriteLine(value.GetType());
            var w = (double)value;
            return w - 350;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
            throw new NotImplementedException();
        }
    }
}

The important thing to note is that we have hardcoded the number (350) to be a value greater than the width's of all controls on the row. So 150 for each button and some more for the padding around the controls. It will get more difficult once there are other controls on the row, but you could add another converter to calculate their widths as well.