WPF How to center the Image.Source

I am developing a custom Image control in WPF .NET 3.5 and Visual Studio 2010.

In WinForms the PicutreBox control has the SizeMode property which includes "CenterImage".

I want my Image control to have that ability.

Is there anyway?

Thanks

My XAML code:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="768" Width="1024" xmlns:my="http://schemas.sharpsoft.net/xaml" xmlns:my1="clr-namespace:WpfApplication1">
    <Grid>
        <my1:CustomControl1
                    x:Name="customControl11"
                    Width="206"
                    Height="197"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Margin="18,58,0,0"
                    Stretch="Uniform"/>
    </Grid>
</Window>

My CustomControl code:

public class CustomControl1 : Image
{
    public CustomControl1()
    {
        // Bitmap to Stream
        Stream ms = new MemoryStream();
        Properties.Resources.webcam_background.Save(ms, ImageFormat.Png);

        // Stream to BitmapImage
        BitmapImage bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.StreamSource = ms;
        bitmap.EndInit();

        // Set it
        Source = bitmap;
    }
}

Where "webcam_backgroud" is a png image added by default visual studio resource editor.

Answers


Set Stretch to None.

<Image Source="..." Stretch="None" />

You should try and center the whole Image element itself using the alignments :

    <Grid>
        <Image Stretch="None"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" />
    </Grid>

This is my working solution:

<Image Name="PreviewImage" 
       HorizontalAlignment="Stretch" 
       Stretch="Uniform" 
       VerticalAlignment="Top" 
       Width="456"  
       Height="256"/>

Just give an x:name on the window, and retrieve information on its dimensions.

<Window x:Name="mainWindowContainer"
    x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="768" Width="1024" xmlns:my="http://schemas.sharpsoft.net
    [...]
</Window>

And then recall the information on the actual size of the windows from the code.Then, since you have the hosting size and the object size, it's just math. Stating a frame size all'around the background of 'frameWidth', the dimension of the image (destWidth,destHeight), you set:

        int wOffset = (((int)mainWindowContainer.ActualWidth - frameWidth * 2) - destWidth) / 2 + frameWidth;
        int hOffset = (((int)mainWindowContainer.ActualHeight - frameWidth * 2) - destHeight) / 2 + frameWidth;

        Canvas.SetLeft(image, wOffset);
        Canvas.SetTop(image, hOffset); 

Need Your Help

Text encoding problem between NSImage, NSData, and NSXMLDocument

objective-c encoding nsdata nsxml

I'm attempting to take an NSImage and convert it to a string which I can write in an XML document.

Add automatically an html code for every video in the blog

javascript jquery html

i have many video in the blog, with this classic code: