WPF 响应式设计（液体布局）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51578656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WPF responsive design (Liquid layout)
提问by Abdulsalam Elsharif
I want to make my WPF application fully responsive application, I read a lot of posts about this topic, but unforchantly all of these postes does not helped my to acomplish what I want.
我想让我的 WPF 应用程序完全响应应用程序，我阅读了很多关于这个主题的帖子，但很明显，所有这些帖子都没有帮助我完成我想要的。
What I want to do is to make my application responsive like a website .. that mean if I have to Buttonsarranged vertically and I minimize the width of the page, then the two Buttonsshould arranged horizontally. Like this:
我想要做的是让我的应用程序像网站一样响应......这意味着如果我必须垂直排列按钮并且我最小化页面的宽度，那么两个按钮应该水平排列。像这样：
Normal Window
普通窗口
After Resize
调整大小后
Is that possible in WPF? Is what I want to do called"Liquid layout" that mentioned inThisquestion?
这在 WPF 中可能吗？我想要做的就是这个问题中提到的“液体布局”吗？
回答by ELH
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:
是的，实现这一目标的一种方法是使用WrapPanel, 和 hacky 转换器来确保中间元素占用所有剩余空间：
<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):
转换器的作用是确保中间网格拉伸以占用所有剩余空间（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();
}
}
Ps: you can also use a multivalue converter and pass the left and right sidebars' ActualWidthsinstead of hard coding their values in the converter.
Ps：您还可以使用多值转换器并传递左右侧边栏，ActualWidths而不是在转换器中硬编码它们的值。
Result:
结果：
