This is a migrated thread and some comments may be shown as answers.

Numeric Gauge Layouts

5 Answers 149 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Sergey
Top achievements
Rank 1
Sergey asked on 07 Apr 2009, 03:03 PM
Hi
I've been using widly RadGauges in my application, which acts as a monitoring dashboard.
I have found how to create very stylish radial and linear gauges, but I'm not successed in Numeric ones.
How you something like layout examples of Numeric gauges that can be desined (if there will be code - that's would be great :))? (except those ones in demo project).

Maybe some links, or screenshots, or examples - any help in this would be very appreciated.

I'm probably looking for creating 3D-Look Numeric Gauge (already I've made so that the text in gauge has a 3D shadow) - is that possible?

Thanks

5 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 09 Apr 2009, 02:21 PM
Hi Sergey,

The NumericScale class uses approach which allows you completely redesign appearance of the numbers which are shown in it. To do it you have to create set of the data templates. You have to create one template for every character will be shown (‘0’-‘9’, ’.’, ’.’).  All data templates should have common key prefix. This prefix specify name of the set and is used in NumericScale element to setup appearance of the numeric positions. Below you can find copy of the few data templates specified in one of the predefined themes:
<!-- Number position templates--> 
<Style x:Key="SummerSevenSegsThinRow" TargetType="{x:Type RowDefinition}">  
    <Setter Property="Height" Value="1*" /> 
</Style> 
 
<Style x:Key="SummerSevenSegsThickRow" TargetType="{x:Type RowDefinition}">  
    <Setter Property="Height" Value="5*" /> 
</Style> 
 
<Style x:Key="SummerSevenSegsNarrowColumn" TargetType="{x:Type ColumnDefinition}">  
    <Setter Property="Width" Value="1*" /> 
</Style> 
 
<Style x:Key="SummerSevenSegsWideColumn" TargetType="{x:Type ColumnDefinition}">  
    <Setter Property="Width" Value="5*" /> 
</Style> 
 
<Style x:Key="SummerSevenSegsShapeFill" TargetType="{x:Type Shape}">  
    <Setter Property="Stretch" Value="Fill" /> 
    <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:NumberPosition}, Path=Foreground}" /> 
</Style> 
 
<DataTemplate x:Key="SummerSevenSegs0">  
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsWideColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
        </Grid.ColumnDefinitions> 
 
        <Rectangle Grid.Row="0" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="1" Grid.Column="0" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="3" Grid.Column="0" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="4" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="3" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="1" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
    </Grid> 
</DataTemplate> 
 
<DataTemplate x:Key="SummerSevenSegs1">  
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsWideColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
        </Grid.ColumnDefinitions> 
 
        <Rectangle Grid.Row="1" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="3" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
    </Grid> 
</DataTemplate> 
 
<DataTemplate x:Key="SummerSevenSegs2">  
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsWideColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
        </Grid.ColumnDefinitions> 
 
        <Rectangle Grid.Row="0" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="1" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="2" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="3" Grid.Column="0" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="4" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
    </Grid> 
</DataTemplate> 
 
<DataTemplate x:Key="SummerSevenSegs3">  
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsWideColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
        </Grid.ColumnDefinitions> 
 
        <Rectangle Grid.Row="0" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="1" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="2" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="3" Grid.Column="2" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
        <Rectangle Grid.Row="4" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
    </Grid> 
</DataTemplate> 
 
<DataTemplate x:Key="SummerSevenSegs.">  
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThickRow}" /> 
            <RowDefinition Style="{StaticResource SummerSevenSegsThinRow}" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsWideColumn}" /> 
            <ColumnDefinition Style="{StaticResource SummerSevenSegsNarrowColumn}" /> 
        </Grid.ColumnDefinitions> 
 
        <Rectangle Grid.Row="3" Grid.Column="1" Style="{StaticResource SummerSevenSegsShapeFill}" /> 
    </Grid> 
</DataTemplate> 
 

As you can see all data templates have “SummerSevenSegs” prefix in their name. When you use NumericIndicator in your application you have to specify this prefix in the “TemplatePrefix” attribute:

<telerik:NumericIndicator x:Name="numericIndicator" 
      Format="{}{0:F2}" 
      Foreground="Blue" 
      Left="0.125" 
      Top="0.08" 
      RelativeWidth="0.75" 
      RelativeHeight="0.35" 
      TemplatePrefix="SummerSevenSegs">  
</telerik:NumericIndicator> 

Kind regards,
Andrey Murzov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Duy
Top achievements
Rank 1
answered on 10 Jan 2010, 09:24 AM
Dear Andrey,

I tried exactly as your sample code but Numeric Gauge didn't recognize DataTemplate, it shows number with small rectangle.
I changed "SummerSevenSegs" prefix to "HexagonalSevenSegs" or "Windows7HexagonalSevenSegs" but not help.
This is my code:

 

<telerik:NumericIndicator x:Name="numericIndicator" 
                                                    Format="{}{0:#,###;(#,###);-}" Left="0" Top="0" 
                                                    RelativeWidth="1" RelativeHeight="0.95" 
                                                    TemplatePrefix="HexagonalSevenSegs" 
                                                    Foreground="Red" 
                                                    Value="{Binding Path=QtyActual}">  
                                                    <telerik:StyleManager.Theme> 
                                                        <telerik:Windows7Theme /> 
                                                    </telerik:StyleManager.Theme> 
                                                    <telerik:NumberPosition/> 
                                                    <telerik:NumberPosition/> 
                                                    <telerik:NumberPosition/> 
                                                    <telerik:NumberPosition/> 
                                                    <telerik:NumberPosition/> 
                                                    <telerik:NumberPosition/> 
                                                </telerik:NumericIndicator> 

 

Could you please provide a sample working project. Can I name prefix to a different name like "My7Segs".

Thanks in advance
Duy Doan

 

0
Andrey
Telerik team
answered on 11 Jan 2010, 12:04 PM
Hello Duy,

I have attached a sample solution that uses the "My7Segs" prefix for numeric indicator. I hope it helps you to build your own templates to specifying the number position and characters appearance.

Greetings,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Duy
Top achievements
Rank 1
answered on 14 Jan 2010, 07:02 AM
Thanks Andrey very much. Is there anyway i can inherit Hexagon Shape fill? My purpose is quite simple: make HexagonSevenSegs having thicker segments.

And another problem found: if i put template in separated ResourceDictionary then merge with xaml file contains gauge, it didn't see TemplatePrefix.

Best Regards,

Duy Doan
0
Andrey
Telerik team
answered on 18 Jan 2010, 08:11 AM
Hello Duy,

Thank you for the feedback.
The data templates cannot be inherited in WPF, but I've attached the resource dictionary you can customize.

There is an actual problem with finding resources logic for specified template prefix. The resources from merged dictionaries are not found. We will fix it.
Currently as workaround you can move the custom seven segs dictionary nearer to the numeric indicator (as sample to the IndicatorList element resources).

All the best,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Gauges
Asked by
Sergey
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Duy
Top achievements
Rank 1
Share this question
or