WPF - 简单用户控件中的绑定

时间:2009-07-08 00:21:41

标签: wpf user-controls binding

我的问题肯定在我脸上,但我看不出来......

我正在构建一个非常简单的用户控件 - 一个3D椭圆 - 我公开了两个属性:LightColor和DarkColor。我需要将这些属性绑定到我的用户控件中的渐变,但它根本不显示任何颜色。这是我的usercontrol:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestBrushes"
mc:Ignorable="d"
x:Class="TestBrushes._3DEllipse"
x:Name="UserControl"
d:DesignWidth="200" d:DesignHeight="200">
    <Grid x:Name="LayoutRoot">
        <Ellipse Name="MainEllipse" Stroke="{x:Null}">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,1.1">
                    <GradientStop Color="{Binding ElementName=UserControl, Path=LightColor}" Offset="1"/>
                    <GradientStop Color="{Binding ElementName=UserControl, Path=DarkColor}"  Offset="0"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse Name="TopReflectionEllipse" Stroke="{x:Null}" Margin="38,0,38,0" VerticalAlignment="Top" Height="90">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                            <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#A5FFFFFF" Offset="0"/>
                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</UserControl>

这是我的代码隐藏:

public partial class _3DEllipse
{
    public _3DEllipse()
    {
        InitializeComponent();
    }

    public Color DarkColor { get; set; }
    public Color LightColor { get; set; }
}

如果我指定颜色而不是代码中显示的绑定,它可以正常工作,但我想使用我公开的属性。我做错了什么?

谢谢!

1 个答案:

答案 0 :(得分:3)

您的问题可能是您没有通知UserControl对DarkColor和LightColor属性的值所做的更改。为此,您需要实现INotifyPropertyChanged接口。此接口的目的是使UI组件知道它们绑定的值何时更新;他们订阅了通过实现接口公开的PropertyChanged事件。

下面是一个示例实现,我单独留下了DarkColor属性,但它将以相同的方式更新。

public partial class _3DEllipse : INotifyPropertyChanged
{

    private Color _lightColor;


    public _3DEllipse()
    {
        InitializeComponent();
    }

    // interface implementation
    public event PropertyChangedEventHandler PropertyChanged;

    public Color DarkColor { get; set; }
    public Color LightColor
    {
        get { return _lightColor; }
        set
        {
            // only update value if its changed
            if ( _lightColor == value )
            {
                return;
            }

            _lightColor = value;
            OnPropertyChanged("LightColor");
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if ( PropertyChanged == null ) return;

        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}