How do you get XAML elements to scale to fit their containers?

Question

I understand that there are a variety of ways to size child elements according to parent elements. If you're using a grid for example, you can use row and column definitions and you get lots of freedom regarding automatic sizes or fixed sizes or "star" sizes. However, if the child elements themselves have a fixed width and height then it won't matter if the parent tells the child to fill all available space. The child element will remain the same size.

I have a window that was designed to always display its contents at the same pixel dimensions no matter what size the window is resized to. Rather than go and change every single child element in every XAML page so that it doesn't have a fixed size, I'd like to get the main Grid to just scale to fit the window. So far the only way to get elements with fixed dimensions to display at different sizes is to use Transform scaling, either with a RenderTransform or a LayoutTransform. But if I go that route, I'll have to code the scaling in C# to respond to resizing events rather than have it happen automatically. Is there some native builtin way to do this in XAML? This feels like the kind of thing I should be able to do with some special property, or perhaps a ContentControl or ContentPresenter.

I've seen 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? and that has the same problem though the second answer at least talks about handling resizing events.

Here's a simplified example of a fixed-dimension child element not resizing as desired:

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

Actual results:

Desired results:

As you can see, what I'm looking for is a sort of letterboxing effect, meaning I want the aspect ratio to be maintained. However, I haven't found a way to get automatic scaling even without worrying about the aspect ratio, so I thought I'd consider the letterboxing as a sort of second phase that I'd worry about later.

Answer 1

您正在寻找的控件是一个Viewbox. 它会增长以填充其容器（您可以为信箱设置拉伸样式）并相应地缩放其所有内容。只需将其作为应用程序的根元素（或任何您想要拉伸的元素）：

<Viewbox>
    <Grid> //Or whatever
         <OtherStuff>
    </Grid>
</Viewbox>

请注意，由于 viewbox 正在缩放其内容，因此传统Grid行为和类似行为将停止工作，因为内容的大小实际上从未改变。