WPF布局：在按比例缩小的图像下方显示按钮

问题描述

| 我有点难以实现一个相当简单的布局要求。我想显示一个图像，并在图像下方显示一个按钮。图像应整体显示-因此如有必要，应将其缩小，但不应放大。 这是我想要的： 看起来很简单，但我无法弄清楚在XAML中这是否有可能。显然，

Stackpanel

不起作用，

DockPanel

也不起作用，我也看不到see2ѭ的解决方案。 这是我对DockPanel的尝试：

<DockPanel>
    <Button DockPanel.Dock=\"Bottom\">Button</Button>
    <ViewBox 
        Stretch=\"Uniform\"
        MaxWidth=\"{Binding ElementName=bigImage,Path=ActualWidth}\" 
        MaxHeight=\"{Binding ElementName=bigImage,Path=ActualHeight}\">
        <Image x:Name=\"bigImage\"/>
    </ViewBox>
</DockPanel>

显然，图像视图框将始终填充剩余空间，因此按钮将始终位于整个容器的底部，而不是图像的底部。 有任何想法吗？     

解决方法

        这应该做您想要的：

  <Grid>  
    <DockPanel HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\">
        <Button DockPanel.Dock=\"Bottom\">Button</Button>
        <Image x:Name=\"bigImage\" StretchDirection=\"DownOnly\" />
    </DockPanel>
  </Grid>

    ,        

<Grid>
   <Grid.RowDefinitions>
     <RowDefinition Height=\"*\"/>
     <RowDefinition Height=\"Auto\"/>
   </Grid.RowDefinitions>
   <Image Source=\"photo.PNG\" Stretch=\"Uniform\" StretchDirection=\"DownOnly\"/>
   <Button Content=\"Button\" Grid.Row=\"1\" HorizontalAlignment=\"Left\"/>
</Grid>

您只能使用一个网格。将StretchDirection设置为DownOnly时，无需指定最大大小。