UWP：显示完整尺寸的图像

Question

我在 UWP 应用程序中遇到问题，我试图在 ContentDialog 中显示图像。但是，图像在对话框中被裁剪，我希望它在没有任何裁剪的情况下显示。下面是我当前在 ContentDialog 中用于图像控件的 XAML 代码

<ContentDialog
    x:Class="eseua.Views.ImageEditorDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="using:eseua.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Width="Auto"
    Margin="5"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Stretch"
    CornerRadius="{StaticResource OverlayCornerRadius}"
    PrimaryButtonStyle="{StaticResource DefaultButtonStyle}"
    PrimaryButtonText="{helpers:ResourceString Name=ExportHistoryNoteDialog_PrimaryButtonText}"
    SecondaryButtonStyle="{StaticResource ThemeAwareContentDialogSecondaryButtonStyle}"
    SecondaryButtonText="{helpers:ResourceString Name=Edit_Note_Discard_Changes_Discard}"
    mc:Ignorable="d">
    <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical">

        <Grid x:Name="img_grid">
            <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">

                <Image x:Name="img" Stretch="Fill">
                    <Image.Source>
                        <BitmapImage x:Name="imageSource"  />
                    </Image.Source>
                </Image>

            </StackPanel>
        </Grid>

    </StackPanel>
</ContentDialog>

这就是我得到的

这就是我想要在对话框中显示的内容

我尝试将 Stretch 属性调整为“Uniform”，并将 HorizontalAlignment="Stretch" 和 VerticalAlignment="Stretch" 添加到 Image 控件，但问题仍然存在。如何修改XAML以确保图像在没有任何裁剪或剪裁的情况下显示

Answer 1

根据文档图像宽度和高度，

如果您不设置宽度和/或高度，并将图像保留为原样 自然尺寸，图像的 Stretch 属性可以控制 图像源文件将填充您指定的宽度和高度的空间。

例如，您共享的图像是1003x653，因此您的图像控件将自动变为该尺寸。但是，您的

img_grid

不是这个尺寸（可能是 400x500），所以您看不到完整的图片。

根据您提供的代码，解决方法是添加 ImageOpened 事件并在打开图像后调整图像大小。

<Grid x:Name="img_grid">
    <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">

        <Image x:Name="img" Stretch="Fill" ImageOpened="img_ImageOpened">
            <Image.Source>
                <BitmapImage x:Name="imageSource"  />
            </Image.Source>
        </Image>

    </StackPanel>
</Grid>

---

private void img_ImageOpened(object sender, RoutedEventArgs e)
{
    Image image = sender as Image;
    image.Height = img_grid.ActualHeight;
    image.Width = img_grid.ActualWidth;
}