WPF - 拉伸图像以适合区域

Question

我试图根据图像的形状（蓝色块）来显示以下内容：

我遇到了一些问题：

• 图像拉伸应限制在其可用区域内，由窗口边框和文本框顶部确定（根据需要获取尽可能多的行，具有固定的字符大小，并水平拉伸和换行）。相反，它会拉伸到宽度并忽略窗口顶部的约束。
• 低于大约 500 宽度，图像停止缩小，忽略窗口右边缘作为约束；文本的行为类似，此时它停止换行。
• 起始高度应该是这样的：如果图像是“宽”的，则其上方或下方不应有额外的边距 - 否则为屏幕高度的百分比。我不知道如何同时完成这两件事。

窗口属性：

WindowStartupLocation="Manual"
Top="100"
Left="100"
Width="700"
SizeToContent="Height"
ResizeMode="CanResize"
MaxWidth="{x:Static SystemParameters.PrimaryScreenWidth}"
MaxHeight="{x:Static SystemParameters.PrimaryScreenHeight}"

图像、文本和按钮：

<StackPanel VerticalAlignment="Bottom" Margin="10">
    <Image Name="IW" VerticalAlignment="Center" Source="{Binding Image}" />
    <TextBlock Margin="0,10,0,10" HorizontalAlignment="Stretch" Background="{StaticResource Container2}">
        <TextBlock Margin="10" TextWrapping="Wrap" FontSize="{Binding FontSize}" Foreground="{StaticResource PrimaryText}"  Background="{StaticResource Container2}" Text="{Binding Text}"/>
    </TextBlock>
    <StackPanel Orientation="Horizontal" Width="auto" HorizontalAlignment="Right">
        <Button Visibility="{Binding YesVisibility}" x:Name="YES" Margin="0,0,20,0" Height="40" Width="150" FontSize="22" FontWeight="DemiBold" Content="YES" Foreground="{StaticResource CTAPrimary2}" Click="Button_Click"/>
        <Button Visibility="{Binding NoVisibility}" x:Name="NO" Margin="0,0,20,0" Height="40" Width="150" FontSize="22" FontWeight="DemiBold" Content="NO" Foreground="{StaticResource CTAPrimary2}" Click="Button_Click"/>
        <Button Visibility="{Binding ContinueVisibility}" x:Name="CONTINUE" Margin="0,0,20,0" Height="40" Width="150" FontSize="22" FontWeight="DemiBold" Content="CONTINUE" Foreground="{StaticResource CTAPrimary2}" Click="Button_Click"/>
        <Button Visibility="{Binding ExitVisibility}" x:Name="EXIT" Margin="0,0,0,0" Height="40" Width="150" FontSize="22" FontWeight="DemiBold" Content="EXIT" Foreground="{StaticResource PrimaryText}" Click="Button_Click"/>
    </StackPanel>
</StackPanel>

Answer 1

使用网格作为顶层布局面板：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Image Grid.Row="0"
           Source="{Binding Image}"/>
    <TextBlock Grid.Row="1"
               Margin="10" TextWrapping="Wrap" Text="{Binding Text}" .../>
    <StackPanel Grid.Row="2"
                Orientation="Horizontal" HorizontalAlignment="Right">
        <Button .../>
        <Button .../>
        <Button .../>
        <Button .../>
    </StackPanel>
</Grid>