将图像缩放到适当的大小，但具有最大宽度/高度答案

【问题标题】：Scale an image to its proper size but with a maximum width/heigth将图像缩放到适当的大小，但具有最大宽度/高度
【发布时间】：2019-10-24 22:03:25
【问题描述】：

我们有一张图片需要显示为启动画面。此图像应以其实际大小显示，除非宽度或高度超过某个最大值。在这种情况下，应缩放图像以适合窗口。

除了MaxWidth（或MaxHeight）超出时，我们目前的工作正常。在这种情况下，它只是剪切图像而不是缩放它。

我找到了similar issue，但它并不完全相同。有没有办法克服这个问题？

[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>
"@

即使尝试这样做，图像仍然会被截断：

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

感谢@mm8 和@Clemens 的cmets 的最终解决方案是更改Grid 并为图像设置额外属性：

        [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>
"@

【问题讨论】：

您是否尝试过使用ViewBox？
不，我是wpf 的新手，从StackPanel 开始，现在我们在Grid。
将图像包裹在ViewBox 中并将其放置在Grid.So Grid->ViewBox->Image
当我在Grid 中尝试<Viewbox Stretch="Uniform"><Image Source='$Path'/></Viewbox> 时，它仍在剪切图像
你在ViewBox上设置了MaxWidth和MaxHeight吗？

标签： wpf grid

【解决方案1】：

您可以使用Uniform 拉伸并将StretchDirection 设置为DownOnly。

图像将被拉伸到其父 Panel 施加的布局边界，但永远不会大于其原始大小。

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

【讨论】：

确保父面板布局正确，即设置最大尺寸。
终于成功了！这是您的答案与<RowDefinition Height="*"/> <ColumnDefinition Width="*"/> 而不是Auto 的组合，或者只是完全删除了该部分
当然，Auto表示单元格宽度或高度获取单元格中元素的原生大小。