Custom Template Linear Gauge Template Binding Question

[Adam]

In order to get rid of the large border around the linear gauge (OuterBackground) I have customized the control templates following the guidelines in the documentation.

However, in an effort to reproduce a similar look, I added some elements that gave that same glassy background look.  I get in trouble however, trying to figure out how to set the size of a an arcsegment that does the glassy white semi-circle at the top.

I can easily get the path and arcsegment to the right place, but I can't set it's width properly because an arcsegment takes a point, and I don't see how to set that.  For example.... I would want something like this:

<ArcSegment Point="{TemplateBinding Width}, 0" Size="10,7"/>

Obviously I can't do that. 

1. What's the best way to set that value considering it sits inside a border element that has a width?  Do I have to fully customize the control and add a new dependency property to that control?
2. Is there some easier method to hide that background border that I've missed?
3. Expression Blend can't seem to create the templates for the LinearGauge.  Am I doing something wrong?  it works fine on the other RadControls I've templated.

Thanks for any help!!!

Full Markup for the custom template:

<ControlTemplate x:Key="NewGaugeBackground" TargetType="ContentControl">
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="5"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="5"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="5"/>
        </Grid.RowDefinitions>
        <Border Grid.ColumnSpan="3" Grid.RowSpan="3" Background="#FF222222" />
        <Border Grid.Row="1" Grid.Column="1" Margin="5" Opacity=".25" CornerRadius="4">

            <Path StrokeThickness="1" Fill="White" Opacity=".5">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True" StartPoint="0,0" IsFilled="True">
                            <ArcSegment Point="Needs to be width, 0" Size="10,7"/>
                        </PathFigure >
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0.755"/>
                    <GradientStop Color="White"/>
                    <GradientStop Color="#FFCCCCCC" Offset="0.321"/>
                    <GradientStop Color="#FF2F2F2F" Offset="0.105"/>
                    <GradientStop Color="#FF8A8A8A" Offset="0.536"/>
                    <GradientStop Color="#FEB3B3B3" Offset="0.962"/>
                    <GradientStop Color="#FFBBBBBB" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Grid>
</ControlTemplate>

<ControlTemplate x:Key="NewGaugeForeground" TargetType="ContentControl">
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
</ControlTemplate>
<ControlTemplate x:Key="NewGaugeTemplate" TargetType="telerik:LinearGauge">
    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
        <Grid>
            <ContentControl Template="{StaticResource NewGaugeBackground}"/>
            <ItemsPresenter />
            <ContentControl Template="{StaticResource NewGaugeForeground}"/>
        </Grid>
    </Border>
</ControlTemplate>
<Style x:Key="NewGaugeStyle" TargetType="telerik:LinearGauge">
    <Setter Property="Template" Value="{StaticResource NewGaugeTemplate}" />
</Style>

 

[Sia]

Hello Adam,

Straight to your questions:

1. What's the best way to set that value considering it sits inside a border element that has a width?  Do I have to fully customize the control and add a new dependency property to that control?

In the attached project you can find how you can achieve the desired look - by adding two paths which stretch in their container. When you put a second Grid with Margin="5" you can have whatever you need in it and it won't overlay the border which has fixed width.

2. Is there some easier method to hide that background border that I've missed?

You can use the two properties of the LinearGauge: OuterBorderThickness="0" and OuterBackground="Transparent" and in that way you can avoid the need of retemplating the Gauge control.

3. Expression Blend can't seem to create the templates for the LinearGauge.  Am I doing something wrong?  it works fine on the other RadControls I've templated.

I confirm that there is a problem with getting the Gauge template in Blend. We will investigate what causes this. Thank you very much for sharing this with us. You can find your Telerik points updated. The issue is logged in our Public Issue Tracking system.

Regards,
Sia
the Telerik team

[Adam]

Thank you for the response.  Some good and bad news here:

1) Thank you for the project.  I will look it over and see if it helps me out.  I went ahead last week and just templated the whole linear gauge and gauge background out to do what I wanted.  It was a little tricky but it worked.  This allowed me to add the path's to the background using a new "point" dependency property.  Hopefully your solution will be more concise than mine.

2) Unfortunately, this is only half the solution.  Setting the OuterBackground to transparent does make it invisible, but it still consumes the same space.  The OuterBorderThickness does not apply to this area, but another border outside of it (OuterBorderBrush). To be clear, the OuterBackground refers to that "Brushed Steel" ring around the default control that has a white gradient at the top.  So I still can't recover that space.

I think the trick is going to be to expose more properties for that background so folks can easily manipulate it.

3) Thanks!  At least I know I'm not going crazy.

PS - I attached an image showing the parts I am referring to in #2

Adam

[Sia]

Hi Adam,

I understand what you mean in #2 and definitely adding more properties is something we will discuss during our next planning for future development. We appreciate your feedback. At the moment retemplating is the only possible option for your scenario.

I am looking forward to your comments regarding the proposed template. One additional note - you can remove the Foreground template, because you actually do not use it.

Kind regards,
Sia
the Telerik team