CODEWITHSUNDEEP
wpfgrid
DarkLite1
DarkLite1

Reputation: 14695

Scale an image to its proper size but with a maximum width/heigth

We have an image that needs to be shown as a splash screen. This image should be displayed in its actual size unless the width or height passes a certain maximum. In that case the image should be scaled to fit the window.

What we currently have is working fine except when the MaxWidth (or MaxHeight) is exceeded. In that case it just cuts of the image instead of scaling it.

I found a similar issue but it's not exactly the same. Is there a way to overcome this?

[XML]$Xaml = @"
<Window
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='Window'
    WindowStartupLocation='CenterScreen' ResizeMode='NoResize'
    SizeToContent='WidthAndHeight' MaxWidth='600' MaxHeight='400'
    Title='Splash' WindowStyle='None'
>

<Grid>
    <!-- Use a grid with auto height and width to set the window to the size of the image -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <!-- Use a grid in the button to set the size of the counter and the pause/resume label -->
    <Image Source='$Path'/>
    <Button Name='TimerButton' VerticalAlignment='Top' HorizontalAlignment='Right' Margin='0,3,3,0'>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="15"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6"/>
                <ColumnDefinition Width="26"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Grid.Row="0" Name='ResumePauseLabel' Padding='0' HorizontalContentAlignment='Left' Content='II'/>
            <Label Grid.Column="1" Grid.Row="0" Name='TimerLabel' Padding='0' HorizontalContentAlignment='Center' Content='$Seconds'/>
        </Grid>
    </Button>
    </Grid>
</Window>
"@

Even when trying this, the image is still getting cut off:

<Image Source='$Path' Stretch='None' MaxHeight='400' MaxWidth='1800'/>

Final solution thanks to the comments of @mm8 and @Clemens was a change in the Grid and setting extra properties for the image:

        [XML]$Xaml = @"
<Window
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='Window'
    WindowStartupLocation='CenterScreen' ResizeMode='NoResize'
    SizeToContent='WidthAndHeight' MaxWidth='1600 ' MaxHeight='1600'
>

<Grid>
        <Image Stretch="Uniform" StretchDirection="DownOnly"  Source='$Path'/>
    <Button Name='TimerButton' VerticalAlignment='Top' HorizontalAlignment='Right' Margin='0,3,3,0'>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="15"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6"/>
                <ColumnDefinition Width="26"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Grid.Row="0" Name='ResumePauseLabel' Padding='0' HorizontalContentAlignment='Left' Content='II'/>
            <Label Grid.Column="1" Grid.Row="0" Name='TimerLabel' Padding='0' HorizontalContentAlignment='Center' Content='$Seconds'/>
        </Grid>
    </Button>
    </Grid>
</Window>
"@

Upvotes: 0

Views: 943

Answers (1)

Clemens
Clemens

Reputation: 128061

You may use Uniform stretching with StretchDirection set to DownOnly.

The Image will be stretched to the layout bounds imposed by its parent Panel, but never grow larger than its native size.

<Image Stretch="Uniform" StretchDirection="DownOnly" .../>

Upvotes: 1

Related Questions