Question

我正在使用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。所以请尽可能以外行的方式解释。

Answer 1

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

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

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

Answer 2

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

在中心的WPF画布中对齐图像

2 个答案: