将 WPF 画布中的图像居中对齐

Align images in WPF canvas in center

提问by Karan Thakkar

I am developing an image viewer based on gestures using Kinect. I am using the following XAML code to display images on a canvas.

我正在使用 Kinect 开发基于手势的图像查看器。我正在使用以下 XAML 代码在画布上显示图像。

    <Canvas Background="Transparent" Height="732" VerticalAlignment="Top">
        <Image x:Name="next" Source="{Binding NextPicture}" StretchDirection="Both" Stretch="Uniform" ClipToBounds="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Opacity="0" Grid.ColumnSpan="2" Height="732" Width="Auto" HorizontalAlignment="Center" />
        <Image x:Name="previous" Source="{Binding PreviousPicture}" StretchDirection="Both" Stretch="Uniform" ClipToBounds="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Opacity="0" Grid.ColumnSpan="2" Height="732" Width="Auto" HorizontalAlignment="Center" />
        <Image x:Name="current" Source="{Binding Picture}" StretchDirection="Both" Stretch="Uniform" ClipToBounds="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2" Height="732" Width="Auto" HorizontalAlignment="Center" />
    </Canvas>

This is code that runs in the back:

这是在后面运行的代码：

    /// <summary>
    /// Gets the previous image displayed.
    /// </summary>
    public BitmapImage PreviousPicture { get; private set; }

    /// <summary>
    /// Gets the current image to be displayed.
    /// </summary>
    public BitmapImage Picture { get; private set; }

    /// <summary>
    /// Gets the next image displayed.
    /// </summary>
    public BitmapImage NextPicture { get; private set; }

Every time a gesture is recognized, the properties are changed as shown:

每次识别手势时，属性都会更改，如下所示：

    // Setup corresponding picture if pictures are available.
                this.PreviousPicture = this.Picture;
                this.Picture = this.NextPicture;
                this.NextPicture = LoadPicture(Index + 1);

                // Notify world of change to Index and Picture.
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, new PropertyChangedEventArgs("PreviousPicture"));
                    this.PropertyChanged(this, new PropertyChangedEventArgs("Picture"));
                    this.PropertyChanged(this, new PropertyChangedEventArgs("NextPicture"));
                }

The problem however is, the images that I display on the canvas get aligned randomly to the left or right. Also their aspect ratio changes sometimes. What I want is, the images should be displayed on the center of the canvas in their original aspect ratio. Can anyone help me in that regard?

然而问题是，我在画布上显示的图像随机向左或向右对齐。它们的纵横比有时也会发生变化。我想要的是，图像应该以其原始纵横比显示在画布的中心。任何人都可以在这方面帮助我吗？

Also, I am able to set the image to the center using the C# code as follows:

此外，我可以使用 C# 代码将图像设置为中心，如下所示：

    Canvas.SetLeft(current, (1249 - current.ActualWidth) / 2);
    Canvas.SetTop(current, 0);

where, 'current' is the name of the current image in the XAML code. But I want it to happen automatically. Is it possible in the XAML code? If not, how do I achieve it?

其中，“current”是 XAML 代码中当前图像的名称。但我希望它自动发生。在 XAML 代码中可能吗？如果没有，我该如何实现？

PS: I am not so good at C# or WPF. So please explain in layman terms if possible.

PS：我不太擅长 C# 或 WPF。所以如果可能的话，请用通俗的语言解释一下。

回答by Rachel

You could center the image in the XAML by binding the Canvas.Leftproperty using an IMultiValueConverterthat accepts parameters of your Canvas.Widthand Image.Width, and returns (Canvas.Width / 2) - (Image.Width / 2), however per your commentabove it sounds like you are allowing users to re-position an image using hand movements by setting Canvas.Leftof the Image, and this would overwrite your binding with the converter.

您可以通过结合中心在XAML图像Canvas.Left使用性质IMul​​tiValueConverter接受您的参数Canvas.Width和Image.Width，并返回(Canvas.Width / 2) - (Image.Width / 2)，但是每您的评论上述这听起来像你是通过设置使用手部动作让用户重新定位图像Canvas.Left的图像，这将覆盖您与转换器的绑定。

I would actually recommend using a Gridinstead of a Canvas, and positioning your image using HorizontalAlignment=Center, and allowing users to adjust the image's position by using a RenderTransform(Note that you need to use RenderTransform, not LayoutTransform, so the transformation gets applied at render time, not when WPF is trying to layout your objects).

我实际上建议使用 aGrid而不是 a Canvas，并使用 定位您的图像HorizontalAlignment=Center，并允许用户使用 a 调整图像的位置RenderTransform（请注意，您需要使用RenderTransform, not LayoutTransform，以便在渲染时应用转换，而不是在 WPF 时应用尝试布局您的对象）。

If that doesn't work, I would change the Picture properties from BitmapImages to an actual class representing that image, with properties for BitmapImage, Top, and Left. To move around images, you would alter the Picture.Leftproperty, and when the user switches pictures you can reset the Picture.Leftproperty to its original value

如果不行的话，我会改变从BitmapImages图片属性来表示图像的实际类，与性质BitmapImage，Top和Left。要移动图像，您需要更改Picture.Left属性，当用户切换图片时，您可以将Picture.Left属性重置为其原始值

回答by kbo4sho88

I would use canvas. Use a little method when the app starts to determine the center of your screen. Get the size of the window divide by two and then use that as a start for the position of the Images. For kinect controling I would definitly use canvas.

我会用画布。当应用程序开始确定屏幕中心时，请使用一个小方法。将窗口的大小除以二，然后将其用作图像位置的开始。对于 kinect 控制，我肯定会使用画布。