TemplateBinding in ColumnDefinition doesn't work

[Miha Markic]

I am looking at needle customization documentation topic: "Customizing appearance of the radial gauge " and the following template:

<Style x:Key="TriangleNeedleTemplate" TargetType="{x:Type telerik:Needle}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:Needle}">
                            <Grid Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{TemplateBinding ActualHeight}"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{TemplateBinding ActualHeight}" />
                                </Grid.RowDefinitions>
                                <Border Background="Red" />
                                <Polygon Grid.ColumnSpan="2" Points="0,0 1,0.5 0,1 0,0" Stretch="Fill"
                                         Fill="White" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

produces templatebinding (attached) picture. Note the red rectangle that should be ActualHeight x ActualHeight big, yet it is much wider (1/2 of the grid).
However, the "should be equivalent" binding

{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}

produces the correct result (see expandedbinding picture).
Correct style:

<Style x:Key="TriangleNeedleTemplate" TargetType="{x:Type telerik:Needle}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:Needle}">
                            <Grid Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" />
                                </Grid.RowDefinitions>
                                <Border Background="Red" />
                                <Polygon Grid.ColumnSpan="2" Points="0,0 1,0.5 0,1 0,0" Stretch="Fill"
                                         Fill="White" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

[Andrey]

Hi Miha Markic,

I'm sorry for documentation. It is a bit late. We've changed default template of the needle so both Silverlight and WPF versions has same one and operates consistently. The triangle needle template which corresponds to the new needle structure should looks like the following:

<Style x:Key="TriangleNeedleTemplate" TargetType="{x:Type telerik:Needle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:Needle}">
                <Grid x:Name="PART_Grid"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <!-- Column 0 - tail -->
                        <ColumnDefinition Width="*"/>
                        <!-- Column 1 - pin point -->
                        <ColumnDefinition Width="*"/>
                        <!-- Column 2 - arrow -->
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border Grid.Column="1" Background="Red" />
                    <Polygon Grid.Column="1"
                         Grid.ColumnSpan="2"
                         Points="0,0 1,0.5 0,1 0,0"
                         Stretch="Fill"
                         Fill="White" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Best wishes,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.