如何使 WPF Image 控件具有与其 (BitmapImage) 源相同的尺寸? [英] How do I make a WPF Image control to have same dimensions as its (BitmapImage) Source?

问题描述

我正在用 XAML 设计一个视图，在布局的某个地方有一个 Image 元素，它将被放在 ViewBox、ScrollViewer 和 Inkcanvas 的某个组合中(还不确定顺序).目前早期的原型是这样的:

I am designing a View in XAML, and somewhere in the layout there is an Image element, which will be put inside some combination of ViewBox, ScrollViewer and Inkcanvas (not sure about the order yet). Current early prototype is like this:

<Window x:Class="InkCanvasTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        x:Name="ThisWindow">


    <DockPanel x:Name="root" DataContext="{Binding ElementName=ThisWindow}">
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="0,0,5,0">
            <StackPanel.Resources>
                <Style TargetType="{x:Type Button}" x:Key="EstiloBotão">
                    <Setter Property="Height" Value="40"/>
                    <Setter Property="Width" Value="130" />
                    <Setter Property="Margin" Value="5,5,0,5" />
                </Style>
            </StackPanel.Resources>
            <Button Content="Limpar Alterações" Style="{DynamicResource EstiloBotão}"/>
            <Button Content="Concluir" Style="{DynamicResource EstiloBotão}" Click="Concluir_Click" />
        </StackPanel>
            <!-- Magic Happens Here -->
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" PanningMode="Both" Width="752">
            <InkCanvas x:Name="cv" Cursor="Cross" Width="{Binding Width, ElementName=canvas_image}" Height="{Binding Height, ElementName=canvas_image}" >
                <Image x:Name="canvas_image" Stretch="Uniform" Source="C:\Users\helton\Desktop\franjas_binarizadas.png"/>   
            </InkCanvas>
        </ScrollViewer>     

    </DockPanel>
</Window>

我无法事先知道源图像的尺寸是多少，但我想确保 Image 元素的 Width 和 Height 正确设置".原因是我将在图像(位于 InkCanvas 元素内)上绘画，然后将结果保存为与源图像大小相同的图像.

I cannot know beforehand what will be the dimensions of the source image, but I want to be sure that the Image element has its Width and Height properly "setup". The reason is that I will paint over the image (which is inside an InkCanvas element) and then save the result as an image with the same size as the source image.

目前，我的保存"方法是这样做的:

Currently, my "Save" method does this:

    private void Concluir_Click(object sender, RoutedEventArgs e)
    {
        int dWidth = (int)cv.ActualWidth;  // SHOULD BE Width not ActualWidth, but is zero!!!
        int dHeight = (int)cv.ActualHeight;  // Here the same thing
        double dpiX = 96;
        double dpiY = 96;
        RenderTargetBitmap rtb = new RenderTargetBitmap(dWidth, dHeight, dpiX, dpiY, PixelFormats.Pbgra32);
        rtb.Render(cv);

        PngBitmapEncoder pnge = new PngBitmapEncoder();
        pnge.Frames.Add(BitmapFrame.Create(rtb));
        Stream stream = File.Create("franjas_binarizadas_limpas.png");
        pnge.Save(stream);
        stream.Close();
    }

问题:当我尝试读取宽度"或高度"时，它们为零.当我读取ActualHeight"或ActualWidth"时，有时它们不是我期望的值(由于 ScrollView 裁剪或 ViewBox 缩放布局变换).

THE PROBLEM: when I try to read "Width" or "Height", they are zero. When I read "ActualHeight" or "ActualWidth", sometimes they are not the value I am expecting (due to the ScrollView clipping, or the ViewBox scale layout transform).

目标:将 Image 的 Width 和 Height 属性设置为其源图像(通过绑定或其他方式)).

THE GOAL: Set the Image's Width and Height properties to be equal of its Source image (via binding, or somehow else).

有什么想法吗?

推荐答案

将 Stretch 属性设置为 None.这将使 Image 控件保持原始位图的大小.

Set the Stretch Property to None. That will make the Image control maintain the size of the original bitmap.

<Image Stretch="None"/>

这篇关于如何使 WPF Image 控件具有与其 (BitmapImage) 源相同的尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！