用户控件中的图像属性

Question

I'd like to make a simple UserControl in WPF as follows : an image (let's say 128x128) with another image on it, smaller (48x48). Let's call them imgMain and imgOverlay (the small one).

Now I want to place my UserControl in any WPF app and be able to change the images and their size. I put two properties in my usercontrol and was happy to see them show up in the right form in the VS2010 designer. But when I try to put an image using the designer the control doesn't refresh and stays white. Same if I try to do it at runtime from code.

I read several posts about DependencyProperties and all (something I'm not really familiar with) but they always seem to want to have more logic in the even of an image changing. I want something really simple and only visual.

Here is what I did for the properties :

• the size of the overlay

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

• the Images for main and overlay

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

Answer 1

You really do have to go and do the whole DependencyProperty dance. Sorry about that. WPF introduces its own event system, its own property system and makes you use that. I found it confusing at first. And then just plain tedious. Wait... I'll see if I can dig up some similar code for you...

OK. This little class works as an Image control, that displays a different image depending on the value bound to it...

The xaml code:

<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>

And the code behind with the whole DependencyProperty dance...

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