Question

我们有一幅需要显示为初始屏幕的图像。除非宽度或高度超过一定的最大值，否则应以实际尺寸显示该图像。在这种情况下，应缩放图像以适合窗口。

除了超过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的注释，最终解决方案是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>
"@

Answer 1

您可以在<Formik initialValues={{ toggle: false }} validateOnChange={false} validateOnBlur={false} onSubmit={(values, { validateForm }) => { validateForm().then(_errors => { console.log(values); }); }} > {({ values, handleChange, handleSubmit }) => ( <div> <form onChange={handleSubmit}> <label> Toggle <input name="toggle" type="checkbox" checked={values.toggle} onChange={handleChange} /> </label> </form> </div> )} </Formik>设置为key的情况下使用Uniform拉伸。

图像将被拉伸到其父面板施加的布局范围，但永远不会超过其原始大小。

StretchDirection

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

1 个答案: