Log in to like this post! 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: Technorati Tags: Silverlight,xamWebSegmentedDisplay