我想将我的WPF应用程序制作成全响应式应用程序,我看了很多关于这个主题的帖子,但不幸的是所有这些帖子都没有帮助我完成我想要的目标。
我想做的就像一个网站一样使我的应用程序响应式...这意味着如果我有垂直排列的Buttons
,并且我最小化了页面的宽度,则这两个Buttons
应该水平排列。像这样:
正常窗口
调整大小后
在WPF中是否可能实现这一点?我想做的被称为“Liquid layout”,在这个问题中提到了吗?
我想将我的WPF应用程序制作成全响应式应用程序,我看了很多关于这个主题的帖子,但不幸的是所有这些帖子都没有帮助我完成我想要的目标。
我想做的就像一个网站一样使我的应用程序响应式...这意味着如果我有垂直排列的Buttons
,并且我最小化了页面的宽度,则这两个Buttons
应该水平排列。像这样:
正常窗口
调整大小后
在WPF中是否可能实现这一点?我想做的被称为“Liquid layout”,在这个问题中提到了吗?
是的,实现这一点的方法之一是使用 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
传递给转换器,而不是在转换器中硬编码它们的值。
结果:
return ((int)value) - 200;
- SamTh3D3v