如何让我的自定义 UserControl 设置嵌套椭圆的颜色？答案

【问题标题】：How do I get my custom UserControl to set the colour of a nested ellipse?如何让我的自定义 UserControl 设置嵌套椭圆的颜色？
【发布时间】：2015-01-12 22:35:49
【问题描述】：

我一直在寻找各种链接，但我不知道我是否需要 DependencyProperty、INotifyPropertyChanged、某种绑定或其他东西。

我正在开发我的第一个 UserControl 以供重复使用。我有一个包含标签和彩色椭圆的 UserControl。我希望能够在设计时在 Windows XAML 中设置椭圆颜色。我在 Visual Studio 2013 社区中有以下代码：

<UserControl x:Class="DMS2.LegendLabel"
         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">
<StackPanel Orientation="Horizontal">
    <Ellipse Name="Indicator" Height="10" Width="10" Margin="5" Fill="Aqua"/>
    <Label> value </Label>
</StackPanel>

namespace DMS2
{
    public partial class LegendLabel : UserControl
    {      
        public LegendLabel()
        {
            InitializeComponent();
        }

        private Brush ellipse_color = Brushes.Azure;

        public Brush LegendColor
        {
            get { return ellipse_color;  }
            set { ellipse_color = value; Indicator.Fill = ellipse_color; }
        }
    }
}


<Window x:Class="DMS2.ReportMonitor"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:custom_controls="clr-namespace:DMS2"
        Title="Report Monitor" Height="450" Width="850">
    <StackPanel Orientation="Vertical" Name="MainPanel">

        <StackPanel Orientation="Horizontal" Name="ButtonPanel">
            <Button Height="25" Margin="30,0"> Refresh List</Button>
            <CheckBox Margin="10"> show Reports From All Users</CheckBox>
            <Grid Margin="10" Width="300">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <custom_controls:LegendLabel LegendColor="Red">Pending</custom_controls:LegendLabel>
                <custom_controls:LegendLabel Grid.Column="1" LegendColor="Green">Viewed</custom_controls:LegendLabel>
                <custom_controls:LegendLabel Grid.Column="2" LegendColor="Blue">Active</custom_controls:LegendLabel>
                <Label Grid.Row="1">Done</Label>
                <Label Grid.Column="1" Grid.Row="1">Error</Label>
                <Label Grid.Column="2" Grid.Row="2">Closed</Label>
            </Grid>
            <Button Height="25" Margin="30,0">Close</Button>

        </StackPanel>

    </StackPanel>
</Window>

使用如下图所示的 LegendColor 现在已经生效。我怎样才能使以下工作？

<custom_controls:LegendLabel LegendColor="Red">Pending</custom_controls:LegendLabel>

【问题讨论】：

标签： c# wpf xaml user-controls

【解决方案1】：

是的，您通常会在此处使用DependencyProperty（sn-p：propdp）。

    public Brush LegendColor
    {
        get { return (Brush)GetValue(LegendColorProperty); }
        set { SetValue(LegendColorProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LegendColorProperty =
        DependencyProperty.Register("LegendColor", typeof(Brush), typeof(LegendLabel), new PropertyMetadata(null, HandleBrushChange));

一旦你有了它，你就可以在PropertyChanged 处理程序（元数据的第二个参数）中执行你的设置：

private static void HandleBrushChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
   LegendLabel local = (LegendLabel)d;

   local.Indicator.Fill = e.NewValue as Brush;
}

【讨论】：