CODEWITHSUNDEEP
wpfxaml
heltonbiker
heltonbiker

Reputation: 27615

How do I make a WPF Image control to have same dimensions as its (BitmapImage) Source?

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>

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();
    }

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).

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

Any ideas?

Upvotes: 2

Views: 2296

Answers (1)

Fede
Fede

Reputation: 44068

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

<Image Stretch="None"/>

Upvotes: 4

Related Questions