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

【问题标题】：Align images in WPF canvas in center将 WPF 画布中的图像居中对齐
【发布时间】：2012-10-03 14:42:05
【问题描述】：

我正在使用 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>

这是在后面运行的代码：

    /// <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; }

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

    // 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"));
                }

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

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

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

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

PS：我不太擅长 C# 或 WPF。所以请尽可能通俗地解释一下。

【问题讨论】：

您使用Canvas 来包含您的控件是否有原因？ Grid 会更好，因为您可以简单地将图像的HorizontalAlignment 和VerticalAlignment 设置为Center。
@Rachel，是的。我实际上是将我的手坐标转换为相对于屏幕的位置，然后通过在我的代码中设置“Canvas.Left”和“Canvas.Top”属性来平移缩放图像。我尝试使用“翻译转换”，但我找不到使用它的方法。

标签： c# wpf xaml canvas

【解决方案1】：

您可以通过使用IMultiValueConverter 绑定Canvas.Left 属性在XAML 中居中图像，该属性接受Canvas.Width 和Image.Width 的参数，并返回(Canvas.Width / 2) - (Image.Width / 2)，但是根据上面的your comment 听起来就像您允许用户通过设置图像的Canvas.Left 来使用手部动作重新定位图像，这将覆盖您与转换器的绑定。

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

如果这不起作用，我会将图片属性从 BitmapImages 更改为代表该图像的实际类，并具有 BitmapImage、Top 和 Left 的属性。要在图像中移动，您可以更改Picture.Left 属性，当用户切换图片时，您可以将Picture.Left 属性重置为其原始值

【讨论】：

我在使用渲染变换时犯了一个愚蠢的错误。它现在工作。感谢您的提示:)

【解决方案2】：

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

【讨论】：