Numeric Gauge Layouts

6 posts, 0 answers
  1. Sergey
    Sergey avatar
    3 posts
    Member since:
    Mar 2009

    Posted 07 Apr 2009 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 09 Apr 2009 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Duy
    Duy avatar
    5 posts
    Member since:
    Nov 2008

    Posted 10 Jan 2010 Link to this post

    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

     

  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 11 Jan 2010 Link to this post

    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.
  6. Duy
    Duy avatar
    5 posts
    Member since:
    Nov 2008

    Posted 14 Jan 2010 Link to this post

    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
  7. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 18 Jan 2010 Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready