WPF responsive design (Liquid layout)

Question

I want to make my WPF application fully responsive application, I read a lot of posts about this topic, but unfortunately all of these postes does not helped my to accomplish what I want.

What I want to do is to make my application responsive like a website .. that mean if I have to Buttons arranged vertically and I minimize the width of the page, then the two Buttons should arranged horizontally. Like this:

Normal Window

After Resize

Is that possible in WPF? Is what I want to do called "Liquid layout" that mentioned in This question?

Answer 1

Yes, one way to achieve that is by using a WrapPanel, and a hacky converter to ensure that the middle element takes all the remaining space:

<Window.Resources>
    <local:WpConverter x:Key="WpConverter"/>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Fill="BlueViolet" Height="75" HorizontalAlignment="Stretch"/>
    <WrapPanel x:Name="wp" Grid.Row="1" HorizontalAlignment="Stretch" Orientation="Horizontal">
        <StackPanel Width="100">
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
            <Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
        </StackPanel>
        <Grid HorizontalAlignment="Stretch" Width="{Binding Path=ActualWidth, ElementName=wp,Converter={StaticResource WpConverter}}"></Grid>
        <Rectangle Margin="3" Fill="CornflowerBlue" Width="94" Height="200" ></Rectangle>
    </WrapPanel>
    <Rectangle Margin="3" Grid.Row="2" Fill="Cyan" Height="50" HorizontalAlignment="Stretch"/>

</Grid>

The role of the converter is to make sure that the midle grid streatch to take all the remainning space (wrapanel width - left sidebar width - right sidebar width):

   public class WpConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Int32.Parse(value.ToString()) - 200;
    }

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

Ps: you can also use a multivalue converter and pass the left and right sidebars' ActualWidths instead of hard coding their values in the converter.

Result: