Customizing the NumericIndicator

[Brian]

I have taken your NumericIndicator inside a RadialScale and added a label.  But its not working.

I created a templated control and inherited from NumericIndicator.  I then updated the ControlTemplate with my extra TextBlock and Grid pattern.  I added a new DependencyProperty to support this extra label.  I thought I had set it all up correctly but obviously not.  Blend nor Visual Studio will render the custom NumericIndicator and at runtime the NumericIndicator is missing.  I'm not sure what I did wrong.  Please help.

Generic.xaml

<Style TargetType="local:DescriptiveNumericIndicator">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DescriptiveNumericIndicator">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
                               Background="{TemplateBinding Background}"
                               CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding DisplayName}" FontSize="12" HorizontalAlignment="Center"/>
                        <ItemsPresenter Grid.Row="1"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

DescriptiveNumericIndicator.cs

public class DescriptiveNumericIndicator : NumericIndicator
{
    public DescriptiveNumericIndicator()
    {
        this.DefaultStyleKey = typeof(DescriptiveNumericIndicator);
    }
    public string DisplayName
    {
        get { return (string)GetValue(DisplayNameProperty); }
        set { SetValue(DisplayNameProperty, value); }
    }
    // Using a DependencyProperty as the backing store for DisplayName.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DisplayNameProperty =
        DependencyProperty.Register("DisplayName", typeof(string), typeof(DescriptiveNumericIndicator), new PropertyMetadata("Label"));
}

MyGauge.xaml

<local:DescriptiveNumericIndicator CornerRadius="5" Format="{}{0:F1}" Value="{Binding InnerGaugeCurrentValue}" Top=".5" Left=".45" FontSize="24" RelativeHeight=".3" RelativeWidth=".25" DisplayName="{Binding InnerGaugeName}">

Thanks for any help.

[Andrey]

Hi Brian,

There are a couple of possible problems in your content template:

1. Since you are binding to the dependency property of the template control the Text=”{Binding DisplayName}” must be Text="{TemplateBinding DisplayName}".

2. Since the DescriptiveNumericIndicator is inherited from the NumericIndicator it is ItemsControl and it should have setter for ItemsPanel in its style for proper functioning.

The prospective style could look like the following (at least it works for me):

<Style TargetType="local:DescriptiveNumericIndicator">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DescriptiveNumericIndicator">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0"
                            Text="{TemplateBinding DisplayName}"
                            FontSize="12"
                            HorizontalAlignment="Center"/>
                        <ItemsPresenter Grid.Row="1" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now I should talk about major problem with restyling of the numeric indicator. The size of every number position in the indicator is calculated using total width and height of the control. So, when you add some elements around the ItemsPresenter in the template the calculation of the position size will take into the account size of this element (height of the TextBlock in your case). So actual size (height in your case) of the number position will be more then size of the second row in the Grid. As result decoration of the numeric position (background and so on) will be truncated at the bottom. As a quick solution I could recommend to set transparent background and top vertical alignment for number position:

<local:DescriptiveNumericIndicator Top="0.5"
                   Left="0.2"
                   RelativeHeight="0.3"
                   RelativeWidth="0.5"
                   DisplayName="My Label"
                   Value="10"
                   BorderBrush="White"
                   BorderThickness="1">
    <telerik:NumberPosition Background="Transparent" VerticalAlignment="Top"/>
    <telerik:NumberPosition Background="Transparent" VerticalAlignment="Top"/>
    <telerik:NumberPosition Background="Transparent" VerticalAlignment="Top"/>
    <telerik:NumberPosition Background="Transparent" VerticalAlignment="Top"/>
    <telerik:NumberPosition Background="Transparent" VerticalAlignment="Top"/>
</local:DescriptiveNumericIndicator>

Best wishes,
Andrey Murzov
the Telerik team