Krepsy 3
Krepsy 3

Reputation: 73

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

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:

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>

Upvotes: 1

Views: 1237

Answers (1)

The One
The One

Reputation: 4784

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>

enter image description here

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

Upvotes: 1

Related Questions