Create an LED-style for xamWebSegmentedDisplay

[Infragistics] Devin Rader / Saturday, February 28, 2009

The following sample shows how to use a ControlTemplate to change the style of the xamWebSegmentedDisplay control to an LED style display:

 

<igGauge:XamWebSegmentedDisplay Text="1234567890" Digits="10"
      SegmentMode="SevenSegment" TextForeground="#FFFF3A00"
      TextForegroundUnlit="#FF353232" Background="#FF000000"
      Height="100" Width="500">
  <igGauge:XamWebSegmentedDisplay.DigitStyle>
    <Style TargetType="igGauge:SevenSegmentDigit">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="igGauge:SevenSegmentDigit">
            <Canvas x:Name="RootElement">
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z"
                    Canvas.Top="69" x:Name="leftBottom"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z" 
                    x:Name="leftTop"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M45.5,9.5 C45.5,14.470563 41.02285,
                    18.5 35.5,18.5 C29.977152,18.5 25.5,14.470563 25.5,
                    9.5 C25.5,4.5294371 29.977152,0.5 35.5,0.5 C41.02285,
                    0.5 45.5,4.5294371 45.5,9.5 z" 
                    Canvas.Top="115" Canvas.Left="23" x:Name="bottom"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M45.5,9.5 C45.5,14.470563 41.02285,
                    18.5 35.5,18.5 C29.977152,18.5 25.5,14.470563 25.5,
                    9.5 C25.5,4.5294371 29.977152,0.5 35.5,0.5 C41.02285,
                    0.5 45.5,4.5294371 45.5,9.5 z" 
                    Canvas.Left="23" x:Name="top"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M45.5,9.5 C45.5,14.470563 41.02285,
                    18.5 35.5,18.5 C29.977152,18.5 25.5,14.470563 25.5,
                    9.5 C25.5,4.5294371 29.977152,0.5 35.5,0.5 C41.02285,
                    0.5 45.5,4.5294371 45.5,9.5 z" 
                    Canvas.Top="58" Canvas.Left="23" x:Name="middle"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z" 
                    Canvas.Left="71" x:Name="rightTop"/>
              <Path Data="M20.5,9.5 C20.5,14.470563 16.022848,18.5 10.5,
                    18.5 C4.9771523,18.5 0.5,14.470563 0.5,9.5 C0.5,
                    4.5294371 4.9771523,0.5 10.5,0.5 C16.022848,0.5 20.5,
                    4.5294371 20.5,9.5 z M20.5,32.5 C20.5,37.470562 16.022848,
                    41.5 10.5,41.5 C4.9771523,41.5 0.5,37.470562 0.5,
                    32.5 C0.5,27.529438 4.9771523,23.5 10.5,23.5 C16.022848,
                    23.5 20.5,27.529438 20.5,32.5 z M20.5,55.5 C20.5,
                    60.470562 16.022848,64.5 10.5,64.5 C4.9771523,64.5 0.5,
                    60.470562 0.5,55.5 C0.5,50.529438 4.9771523,46.5 10.5,
                    46.5 C16.022848,46.5 20.5,50.529438 20.5,55.5 z" 
                    Canvas.Top="69" Canvas.Left="71" x:Name="rightBottom"/>
              <Ellipse Width="20" Height="20" Canvas.Left="96"
                       Canvas.Top="115" x:Name="dotBottom"/>
              <Ellipse Width="20" Height="20" Canvas.Left="96"
                       Canvas.Top="69" x:Name="dotTop"/>
            </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </igGauge:XamWebSegmentedDisplay.DigitStyle>
</igGauge:XamWebSegmentedDisplay>

 

Using this custom template results in a display style like the following:

image