How to keep image in original aspect ratio and not overflowing parent control?

Question

I have a WPF Application, the main Layout is based on grid. In Column, I Have an Image inside a stackpanel, but the source is too big (vertically). The problem is, that it is cutted on the bottom where the parent element ends. If I resize the window down, the image eventually shows itself and stays in the center, that's fine. However, when resizing to right, the image resizes, and underflows it's parent. I'm looking for a way to have it that:

When the cell is too small, it will stretch to fit completely in original aspect ratio
When resizing the window to the right, the image won't resize, unless it fits allright.

Is that possible, somehow?

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

Don't use a StackPanel as the inner Panel, because it will not resize its children vertically. Use an inner Grid instead. — Clemens

The One The One · Accepted Answer · 2016-12-05T20:20:42

You want something like this?

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

You need to remove that image from the StackPanel because the StackPanel will always grow vertically as much as the height of the contents, then you can play with the ViewBox

How to keep image in original aspect ratio and not overflowing parent control?

1 Answers