如何让 XAML 元素缩放以适合其容器?
How do you get XAML elements to scale to fit their containers?
我知道有多种方法可以根据父元素调整子元素的大小。例如,如果您使用网格,则可以使用行和列定义,并且您可以自由选择自动大小或固定大小或 "star" 大小。但是,如果子元素本身具有固定的宽度和高度,那么父元素是否告诉子元素填充所有可用的元素都没有关系 space。子元素将保持相同大小。
我有一个 window,旨在始终以相同的像素尺寸显示其内容,无论 window 调整到什么大小。我不想去更改每个 XAML 页面中的每个子元素以使其没有固定大小,而是想让主 Grid
只缩放以适应 window.到目前为止,让具有固定尺寸的元素以不同尺寸显示的唯一方法是使用变换缩放,使用 RenderTransform
或 LayoutTransform
。但如果我走那条路,我将不得不在 C# 中编写缩放比例以响应调整大小事件,而不是让它自动发生。在 XAML 中是否有一些原生的内置方法可以做到这一点?这感觉像是我应该能够用一些特殊的 属性 或者 ContentControl
或 ContentPresenter
.
来做的事情
我见过 Resize WPF Window and contents depening on screen resolution but it's asking about conventional resizing and not scaling fixed elements. I've also seen How to make all controls resize accordingly proportionally when window is maximized? 并且有同样的问题,尽管第二个答案至少谈到了处理调整大小事件。
这是一个固定尺寸子元素未按需要调整大小的简化示例:
<Window x:Class="WpfTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Window1" Height="200" Width="300" Background="LightBlue">
<Grid>
<Frame Background="Blue" Width="200" Height="100">
</Frame>
</Grid>
</Window>
实际结果:
想要的结果:
如您所见,我正在寻找一种信箱效果,这意味着我希望保持纵横比。但是,我还没有找到一种无需担心宽高比即可实现自动缩放的方法,因此我认为我会考虑将信箱设置作为一种我稍后会担心的第二阶段。
您要找的控件是Viewbox
。它会增长以填充其容器(您可以为信箱设置拉伸样式)并相应地缩放其所有内容。只需将其作为您应用程序的根元素(或任何您想要扩展的元素):
<Viewbox>
<Grid> //Or whatever
<OtherStuff>
</Grid>
</Viewbox>
请注意,由于视图框正在缩放其内容,传统 Grid
行为和类似行为将 停止工作 因为内容的大小实际上从未改变。
另一种选择是使用 MultiValueConverter 来设置高度和宽度。
您可以为转换器提供根容器的 ActualWidth 和 ActualHeight als 参数,并让它计算所需的纵横比。
描述 MultiValueConverter 的教程:
http://www.wpftricks.com/2017/05/wpf-multivalueconverter.html
我知道有多种方法可以根据父元素调整子元素的大小。例如,如果您使用网格,则可以使用行和列定义,并且您可以自由选择自动大小或固定大小或 "star" 大小。但是,如果子元素本身具有固定的宽度和高度,那么父元素是否告诉子元素填充所有可用的元素都没有关系 space。子元素将保持相同大小。
我有一个 window,旨在始终以相同的像素尺寸显示其内容,无论 window 调整到什么大小。我不想去更改每个 XAML 页面中的每个子元素以使其没有固定大小,而是想让主 Grid
只缩放以适应 window.到目前为止,让具有固定尺寸的元素以不同尺寸显示的唯一方法是使用变换缩放,使用 RenderTransform
或 LayoutTransform
。但如果我走那条路,我将不得不在 C# 中编写缩放比例以响应调整大小事件,而不是让它自动发生。在 XAML 中是否有一些原生的内置方法可以做到这一点?这感觉像是我应该能够用一些特殊的 属性 或者 ContentControl
或 ContentPresenter
.
我见过 Resize WPF Window and contents depening on screen resolution but it's asking about conventional resizing and not scaling fixed elements. I've also seen How to make all controls resize accordingly proportionally when window is maximized? 并且有同样的问题,尽管第二个答案至少谈到了处理调整大小事件。
这是一个固定尺寸子元素未按需要调整大小的简化示例:
<Window x:Class="WpfTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Window1" Height="200" Width="300" Background="LightBlue">
<Grid>
<Frame Background="Blue" Width="200" Height="100">
</Frame>
</Grid>
</Window>
实际结果:
想要的结果:
如您所见,我正在寻找一种信箱效果,这意味着我希望保持纵横比。但是,我还没有找到一种无需担心宽高比即可实现自动缩放的方法,因此我认为我会考虑将信箱设置作为一种我稍后会担心的第二阶段。
您要找的控件是Viewbox
。它会增长以填充其容器(您可以为信箱设置拉伸样式)并相应地缩放其所有内容。只需将其作为您应用程序的根元素(或任何您想要扩展的元素):
<Viewbox>
<Grid> //Or whatever
<OtherStuff>
</Grid>
</Viewbox>
请注意,由于视图框正在缩放其内容,传统 Grid
行为和类似行为将 停止工作 因为内容的大小实际上从未改变。
另一种选择是使用 MultiValueConverter 来设置高度和宽度。 您可以为转换器提供根容器的 ActualWidth 和 ActualHeight als 参数,并让它计算所需的纵横比。
描述 MultiValueConverter 的教程: http://www.wpftricks.com/2017/05/wpf-multivalueconverter.html