如何保持图像的原始纵横比而不溢出父控件？答案

【问题标题】：How to keep image in original aspect ratio and not overflowing parent control?如何保持图像的原始纵横比而不溢出父控件？
【发布时间】：2016-12-05 20:05:43
【问题描述】：

我有一个 WPF 应用程序，主布局基于网格。在列中，我在堆栈面板中有一个图像，但源太大（垂直）。问题是，它在父元素结束的底部被切割。如果我向下调整窗口大小，图像最终会显示出来并保持在中心，这很好。但是，当向右调整大小时，图像会调整大小并使其下溢。我正在寻找一种方法来获得它：

当单元格太小时，它会拉伸以完全适应原始纵横比
向右调整窗口大小时，图像不会调整大小，除非合适。

这可能吗？

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel>
        <Label Margin="10,20,10,0" Content="Name:" />
        <TextBox Margin="10,0" Name="nameTextBox" TabIndex="0" FontSize="16" />
        <Label Margin="10,20,10,0" Content="Pass:" />
        <TextBox Margin="10,0" Name="passTextBox" TabIndex="1" FontSize="16" />
        <Image Name="logoImage" Margin="10" Source="pics/icon.png"/>
    </StackPanel>
</Grid>

【问题讨论】：

不要使用 StackPanel 作为内部面板，因为它不会垂直调整其子级的大小。请改用内部网格。

标签： c# wpf image stretch

【解决方案1】：

你想要这样的东西吗？

<DockPanel>
  <StackPanel DockPanel.Dock="Top">
      <Label Margin="10,20,10,0" Content="Name:" />
      <TextBox Margin="10,0" Name="nameTextBox" TabIndex="0" FontSize="16" />
      <Label Margin="10,20,10,0" Content="Pass:" />
      <TextBox Margin="10,0" Name="passTextBox" TabIndex="1" FontSize="16" />
   </StackPanel>
   <Viewbox Stretch="Uniform" DockPanel.Dock="Bottom">
       <Image Name="logoImage" Margin="10" Source="pics/text.png"/>
   </Viewbox>
</DockPanel>

您需要从 StackPanel 中删除该图像，因为 StackPanel 将始终垂直增长与内容的高度一样多，然后您可以使用 ViewBox

【讨论】：

ViewBox 是多余的，因为 Image 控件已经根据您设置其 Stretch 属性的方式拉伸其内容。默认为Stretch.Uniform。
DockPanel 是否也在左右（可能还居中）？我有一个带有水平对齐 Stackpanel 的应用程序，它也是一样的 :(
感谢您接受我的回答，但请考虑@Clemmens 关于 ViewBox 冗余的评论