用户控件中的图像属性

Question

我想在 WPF 中制作一个简单的 UserControl，如下所示：一个图像（比如说 128x128），上面有另一个图像，更小（48x48）。我们称它们为 imgMain 和 imgOverlay（小的）。

现在我想将我的 UserControl 放在任何 WPF 应用程序中，并能够更改图像及其大小。我在我的用户控件中放置了两个属性，很高兴看到它们在 VS2010 设计器中以正确的形式显示。但是当我尝试使用设计器放置图像时，控件不会刷新并保持白色。如果我尝试在运行时从代码中执行此操作也是如此。

我阅读了几篇关于 DependencyProperties 和所有（我不太熟悉的东西）的帖子，但即使图像发生变化，他们似乎也总是希望有更多的逻辑。我想要一些非常简单且只有视觉效果的东西。

这是我为这些属性所做的：

• 叠加层的大小

  public Size OverlaySize
  {
     get
     {
        return new Size(imgOverlay.Width, imgOverlay.Height);
     }
     set
     {
        imgOverlay.Width = value.Width;
        imgOverlay.Height = value.Height;
     }
  }
  

• 主图像和叠加图像

  public Image ImageMain
  {
      get
      {
          return imgMain;
      }
      set
      {
          imgMain = value;
      }
  }
  
  public Image ImageOverlay
  {
      get
      {
          return imgOverlay;
      }
      set
      {
          imgOverlay = value;
      }
  }
  

Answer 1

你真的必须去跳整个DependencyProperty 舞蹈。对于那个很抱歉。 WPF 引入了它自己的事件系统、它自己的属性系统并让你使用它。一开始我觉得很困惑。然后就很乏味了。等等……我看看能不能给你挖出一些类似的代码……

好的。这个小类用作 Image 控件，根据绑定的值显示不同的图像...

xaml 代码：

<UserControl x:Class="DesignPerformanceViewer.Controls.BooleanImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
       <Image Name="image" Height="11" VerticalAlignment="Center" HorizontalAlignment="Center" SnapsToDevicePixels="True"/>
    </Grid>
</UserControl>

以及整个DependencyProperty舞蹈背后的代码......

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;

namespace DesignPerformanceViewer.Controls
{
    /// <summary>
    /// Interaction logic for BooleanImage.xaml
    /// </summary>
    public partial class BooleanImage : UserControl
    {
        private static readonly DependencyProperty TrueSourceProperty = DependencyProperty.Register("TrueSource", typeof(ImageSource), typeof(BooleanImage));
        private static readonly DependencyProperty TrueToolTipProperty = DependencyProperty.Register("TrueToolTip", typeof(string), typeof(BooleanImage));
        private static readonly DependencyProperty FalseSourceProperty = DependencyProperty.Register("FalseSource", typeof(ImageSource), typeof(BooleanImage));
        private static readonly DependencyProperty FalseToolTipProperty = DependencyProperty.Register("FalseToolTip", typeof(string), typeof(BooleanImage));
        private static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(bool), typeof(BooleanImage),
            new PropertyMetadata(false, new PropertyChangedCallback(OnValuePropertyChanged), new CoerceValueCallback(OnValueCoerceValueCallback)),
            new ValidateValueCallback(OnValueValidateValueCallback));

        public ImageSource TrueSource {  get { return (ImageSource)GetValue(TrueSourceProperty); } 
            set 
            { 
                SetValue(TrueSourceProperty, value);
            } 
        }
        public ImageSource FalseSource { get { return (ImageSource)GetValue(FalseSourceProperty); } set { SetValue(FalseSourceProperty, value); } }
        public string TrueToolTip { get { return (string)GetValue(TrueToolTipProperty); } set { SetValue(TrueToolTipProperty, value); } }
        public string FalseToolTip { get { return (string)GetValue(FalseToolTipProperty); } set { SetValue(FalseToolTipProperty, value); } }
        public bool Value 
        { 
            get { return (bool)GetValue(ValueProperty); } 
            set 
            { 
                SetValue(ValueProperty, value);
            } 
        }

        public BooleanImage()
        {
            InitializeComponent();
        }

        private static void OnValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var self = (BooleanImage) d;
            var newValue = (bool) e.NewValue;
            self.image.Source = newValue ? self.TrueSource : self.FalseSource;
            self.ToolTip = newValue ? self.TrueToolTip : self.FalseToolTip;
        }       

        private static object OnValueCoerceValueCallback(DependencyObject d, object baseValue)
        {
            if (!(baseValue is bool))
            {
                return false;
            }
            var boolValue = (bool) baseValue;
            var self = (BooleanImage)d;
            self.image.Source = boolValue ? self.TrueSource : self.FalseSource;
            self.ToolTip = boolValue ? self.TrueToolTip : self.FalseToolTip;
            return boolValue;
        }
        private static bool OnValueValidateValueCallback(object value)
        {
            return true;
        }
    }
}