Question

I’m trying to create a simple custom control that shows a circle. This control has a Radius property but unfortunately it doesn’t apply to the control. Here is a template:

<Style TargetType="local:SizedCircle">
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:SizedCircle">
                <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <Ellipse Width="{TemplateBinding Radius}" Height="{TemplateBinding Radius}">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="Red"/>
                        </Ellipse.Fill>
                    </Ellipse>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And

    namespace CustomControls
{
    public sealed class SizedCircle : Control
    {
        public SizedCircle()
        {
            this.DefaultStyleKey = typeof(SizedCircle);
        }

        public string Radius
        {
            get { return (string)GetValue(RadiusProperty); }
            set { SetValue(RadiusProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Radius.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RadiusProperty =
            DependencyProperty.Register("Radius", typeof(string), typeof(SizedCircle), new PropertyMetadata(null));
}
}

Then I try to use this control:

 <local:SizedCircle Radius="50" />

But I see nothing on the screen. This Radius property is not applyed. What am I douing wrong?

Answer 1

Try changing the property type to double instead of string.