WPF响应式设计（流式布局）

Question

我想将我的WPF应用程序制作成全响应式应用程序，我看了很多关于这个主题的帖子，但不幸的是所有这些帖子都没有帮助我完成我想要的目标。

我想做的就像一个网站一样使我的应用程序响应式...这意味着如果我有垂直排列的Buttons，并且我最小化了页面的宽度，则这两个Buttons应该水平排列。像这样:

正常窗口

调整大小后

在WPF中是否可能实现这一点？我想做的被称为“Liquid layout”，在这个问题中提到了吗？

- Abdulsalam Elsharif

---

请发布您的 XAML。 - TomerAgmon1

Answer 1

是的，实现这一点的方法之一是使用 WrapPanel 和一个巧妙的转换器来确保中间元素占据所有剩余空间：

<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>

转换器的作用是确保中间网格拉伸以占据所有剩余空间（wrapanel宽度-左侧边栏宽度-右侧边栏宽度）：

转换器的作用是确保中间的网格能够拉伸以占据所有剩余的空间(wrapanel宽度 - 左边栏宽度 - 右边栏宽度):

   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();
    }
}

注：您还可以使用多值转换器，并将左侧和右侧边栏的ActualWidths传递给转换器，而不是在转换器中硬编码它们的值。

结果：

- SamTh3D3v

---

确保绑定到ActualWidth而不是Width。 - SamTh3D3v

我复制粘贴了你的代码，但怎么设置ActualWidth的值呢？ - Abdulsalam Elsharif

尝试更改转换器中的解析方法，使用tryParse或显式转换。return ((int)value) - 200; - SamTh3D3v

OS Windows 10, VS 2017 - Abdulsalam Elsharif

让我们在聊天中继续这个讨论。 - SamTh3D3v