Skip to main content

CustomSevenSegmentsPresentation.SymbolTemplate Property

Gets or sets a template that configures the symbol appearance. This is a dependency property.

Namespace: DevExpress.Xpf.Gauges

Assembly: DevExpress.Xpf.Gauges.v24.1.dll

NuGet Package: DevExpress.Wpf.Gauges

Declaration

public ControlTemplate SymbolTemplate { get; set; }

Property Value

Type Description
ControlTemplate

A control template that specifies the symbol visual structure.

Example

This example demonstrates how to define a custom seven segments presentation.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:GaugesDemoApp"
        xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges" 
        x:Class="GaugesDemoApp.MainWindow"
        Title="MainWindow" Height="200" Width="300">
    <Window.Resources>
        <dxga:SymbolStateToVisibilityConverter x:Key="VisibilityConverter"/>
    </Window.Resources>
    <Grid>
        <dxga:DigitalGaugeControl Text="12:45">
            <dxga:DigitalGaugeControl.SymbolView>
                <dxga:SevenSegmentsView>
                    <dxga:SevenSegmentsView.Presentation>
                        <dxga:CustomSevenSegmentsPresentation>
                            <dxga:CustomSevenSegmentsPresentation.SymbolTemplate>
                                <ControlTemplate>
                                    <Viewbox Stretch="Fill">
                                        <Canvas Width="74" Height="122">
                                            <Border CornerRadius="5" Width="35.1277" Height="10" Canvas.Left="19.4362" Canvas.Top="56" Background="LightGray" />
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="8" Canvas.Top="15.436" Background="LightGray" />
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="8" Canvas.Top="67.436" Background="LightGray" />
                                            <Border CornerRadius="5" Width="39.1277" Height="10" Canvas.Left="17.4362" Canvas.Top="106" Background="LightGray" />
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="56" Canvas.Top="67.436" Background="LightGray"/>
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="56" Canvas.Top="15.436" Background="LightGray"/>
                                            <Border CornerRadius="5" Width="39.1277" Height="10" Canvas.Left="17.4362" Canvas.Top="6" Background="LightGray"/>
                                            <Rectangle Width="10" Height="10" Canvas.Left="64" Canvas.Top="112" Fill="LightGray" />
                                            <Rectangle Width="10" Height="10" Canvas.Left="64" Canvas.Top="0" Fill="LightGray" />
                                            <Rectangle Width="10" Height="10" Canvas.Left="32" Canvas.Top="31" Fill="LightGray" />
                                            <Rectangle Width="10" Height="10" Canvas.Left="32" Canvas.Top="81" Fill="LightGray" />

                                            <Border CornerRadius="5" Width="35.1277" Height="10" Canvas.Left="19.4362" Canvas.Top="56" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='6'}"/>
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="8" Canvas.Top="15.436" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='5'}"/>
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="8" Canvas.Top="67.436" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='4'}"/>
                                            <Border CornerRadius="5" Width="39.1277" Height="10" Canvas.Left="17.4362" Canvas.Top="106" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='3'}"/>
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="56" Canvas.Top="67.436" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='2'}"/>
                                            <Border CornerRadius="5" Width="10" Height="39.1279" Canvas.Left="56" Canvas.Top="15.436" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='1'}"/>
                                            <Border CornerRadius="5" Width="39.1277" Height="10" Canvas.Left="17.4362" Canvas.Top="6" Background="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='0'}"/>
                                            <Rectangle Width="10" Height="10" Canvas.Left="64" Canvas.Top="112" Fill="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='7'}"/>
                                            <Rectangle Width="10" Height="10" Canvas.Left="64" Canvas.Top="0" Fill="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='9'}"/>
                                            <Rectangle Width="10" Height="10" Canvas.Left="32" Canvas.Top="31" Fill="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='8'}"/>
                                            <Rectangle Width="10" Height="10" Canvas.Left="32" Canvas.Top="81" Fill="Red" Visibility="{Binding Path=SymbolState, Converter={StaticResource VisibilityConverter}, ConverterParameter='8'}"/>
                                        </Canvas>
                                    </Viewbox>
                                </ControlTemplate>
                            </dxga:CustomSevenSegmentsPresentation.SymbolTemplate>
                        </dxga:CustomSevenSegmentsPresentation>
                    </dxga:SevenSegmentsView.Presentation>
                </dxga:SevenSegmentsView>
            </dxga:DigitalGaugeControl.SymbolView>
        </dxga:DigitalGaugeControl>
    </Grid>
</Window>

The image below illustrates the result.

See Also