Telerik blogs

I recently posted an entry regarding the Radial Gauge for WPF where I demonstrated how you can create a half circle gauge.  Not long after that post, I received a question asking about Linear Gauges and how to use multiple scales in a single Linear Gauge.  It is not that there is a functional difference, but rather a visual difference.  The Office Black theme (shown below) has a border area in the middle where the linear gauges were overlapping causing a visual collision. 

image

There are a number of ways that you can accomplish a task and I think one of the easiest ways is to get this working is to remove the internal border.  You can change the Telerik themes quite easily if you are familiar with styles, but I thought I would show you how you can use Expression Blend to accomplish this task.  Yes, I know Expression Blend is supposed to be for the “Designer”, but I suspect that if you are reading this, you are wearing that hat as well.  So you will see above that I have a Window with a Linear Gauge and three Linear Scales.  Just for reference here is the XAML.

<Window x:Class="WpfApplication7.Window1"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    Title="Window1" Height="300" Width="300" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    <Grid> 
        <telerik:LinearGauge> 
            <telerik:LinearScale HorizontalAlignment="Left" Margin="55,0,0,0" /> 
            <telerik:LinearScale /> 
            <telerik:LinearScale HorizontalAlignment="Right" Margin="0,0,55,0"/> 
        </telerik:LinearGauge> 
    </Grid>  
</Window> 
 

Now, you will want to start Expression Blend and open your Visual Studio project file.

image

As you can see, the Linear Gauge is displayed as expected in Expression Blend.

image

If you direct your attention to the bottom left of the application, you will see the Objects and Timeline tool window.  From this tool window you can see all the items that are being used on your Window.  As you can see in the screenshot below, the Grid, Linear Gauge and Linear Scales are displayed in a tree hierarchy.

image

Right click on the Linear Gauge and in the context menu select Edit Control Parts (Template) | Edit a Copy.  The screen below will be displayed and will allow you to Name your new Style as well as determine where you want the XAML to reside.  I will keep it in my Window XAML, but in a production project, you will want to use a Resource dictionary to separate your code.

image

After clicking Ok, you will see that your Objects and Timeline tool window is showing a different hierarchy.  We are now looking at the Linear Gauge Template and can make changes accordingly. The first thing to do is to remove the white rectangle background. To do this we want to edit the first Content Control template, so right click on that entry and select Edit Control Parts (Template) | Edit Template.

image

Again, our Objects and Timeline tool window has changed and shows us the makeup of the Content Control Template.  Now before we remove anything, I wanted to point out a feature of Expression Blend.  If you look to the right of the Grid I have highlighted in the screenshot below, you will see an eye icon.  If you click on this it hides or shows that object in the design view, so you can see exactly what will be removed visually from the Window.  Try it out.  This can be helpful if you have layers of items and want to see a more clean design surface in Expression Blend.  Ok, now that you can see that this Grid holds the rectangle simply right click and delete that from the template. 

image image

We still have the shine gradient that was displayed over the rectangle though.  This is actually located under the previous template, so we need to get back to there in order to remove that.  In the screenshot below, you will see that I have the Content Control Template highlighted.  If you click on this, you will be returned to the Linear Gauge Template we are working on. 

image

Now that we are back at the Linear Gauge Template, we can remove the shine from the template.  This is located in the last ContentControl of the Grid, which I have highlighted for you below.  Right click on that object and delete it from the template.

image image

And there you have it, we no longer have our rectangle in the Linear Gauge and all our Linear Scales are displayed with the Office Black theme.  Again, all of this can be accomplished manually through the use of XAML.  The end result of the XAML generated by Expression Blend is below.

<Window x:Class="WpfApplication7.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
     <Window.Resources> 
          <Style x:Key="LinearGaugeStyle1" TargetType="{x:Type telerik:LinearGauge}"
              <Style.BasedOn> 
                   <Style TargetType="{x:Type telerik:LinearGauge}"
                        <Setter Property="Template"
                             <Setter.Value> 
                                  <ControlTemplate TargetType="{x:Type telerik:LinearGauge}"
                                      <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                           <Grid> 
                                                <ContentControl> 
                                                     <ContentControl.Template> 
                                                          <ControlTemplate TargetType="{x:Type ContentControl}"
                                                              <Grid> 
                                                                   <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" BorderThickness="2,2,2,2" CornerRadius="6,6,6,6"
                                                                        <Border.RenderTransform> 
                                                                             <TransformGroup> 
                                                                                  <ScaleTransform ScaleX="-1" ScaleY="-1"/> 
                                                                             </TransformGroup> 
                                                                         </Border.RenderTransform> 
                                                                        <Border.Background> 
                                                                             <LinearGradientBrush EndPoint="0.974451988955925,0.491356224416577" StartPoint="0.07,0.777113682471078"
                                                                                  <GradientStop Color="#FF7D7D7D" Offset="0.032501"/> 
                                                                                  <GradientStop Color="#FF4D4D4D" Offset="0.036112000000000033"/> 
                                                                                  <GradientStop Color="#FF454545" Offset="0.381"/> 
                                                                                  <GradientStop Color="#FF9F9F9F" Offset="0.54500001668930054"/> 
                                                                                  <GradientStop Color="#FF656565" Offset="0.065002"/> 
                                                                                  <GradientStop Color="#FF1C1C1C" Offset="0.66"/> 
                                                                                  <GradientStop Color="#FF454545" Offset="0.068613000000000035"/> 
                                                                                  <GradientStop Color="#FF353535" Offset="0.72841"/> 
                                                                                  <GradientStop Color="#FF050505" Offset="0.987361"/> 
                                                                             </LinearGradientBrush> 
                                                                        </Border.Background> 
                                                                        <Border.BorderBrush> 
                                                                             <LinearGradientBrush EndPoint="0.703,0.957" StartPoint="0.297,0.043"
                                                                                  <GradientStop Color="#FF828689" Offset="1"/> 
                                                                                  <GradientStop Color="#FFB2B3B4" Offset="0"/> 
                                                                             </LinearGradientBrush> 
                                                                        </Border.BorderBrush> 
                                                                   </Border> 
                                                                   <Grid> 
                                                                        <Grid.ColumnDefinitions> 
                                                                             <ColumnDefinition Width="20*"/> 
                                                                             <ColumnDefinition Width="68*"/> 
                                                                             <ColumnDefinition Width="20*"/> 
                                                                        </Grid.ColumnDefinitions> 
                                                                        <Grid.RowDefinitions> 
                                                                             <RowDefinition Height="8*"/> 
                                                                             <RowDefinition Height="130*"/> 
                                                                             <RowDefinition Height="107*"/> 
                                                                        </Grid.RowDefinitions> 
                                                                   </Grid> 
                                                              </Grid> 
                                                          </ControlTemplate> 
                                                     </ContentControl.Template> 
                                                </ContentControl> 
                                                <ItemsPresenter/> 
                                           </Grid> 
                                      </Border> 
                                  </ControlTemplate> 
                             </Setter.Value> 
                        </Setter> 
                        <Setter Property="ItemsPanel"
                             <Setter.Value> 
                                  <ItemsPanelTemplate> 
                                      <Grid IsItemsHost="True"/> 
                                  </ItemsPanelTemplate> 
                             </Setter.Value> 
                        </Setter> 
                   </Style> 
              </Style.BasedOn> 
          </Style> 
     </Window.Resources> 
    <Grid> 
        <telerik:LinearGauge Style="{DynamicResource LinearGaugeStyle1}"
            <telerik:LinearScale HorizontalAlignment="Left" Margin="55,0,0,0" /> 
            <telerik:LinearScale /> 
            <telerik:LinearScale HorizontalAlignment="Right" Margin="0,0,55,0"/> 
        </telerik:LinearGauge> 
    </Grid> 
</Window> 
 


Comments

Comments are disabled in preview mode.