Metro Elements Weekly Update 2

The main focus of this weeks Metro Elements update is the new RadialGauge control. As you’ll see below, this fully-composable control lets you display values in a radial shape however which way you want. To use this control, you simply populate the RadialGauge with the sub-components you want. There are different types of pre-built parts that we provide which are for rendering labels, tick-marks and value indicators. You can mix-n-match whatever components you want, and customize each of their radial positions within the gauge. Of course each component also has it’s own specific customization options. Lets take a quick look at the various value indicators:

Arc Indicator

Arc Indicator

Needle Indicator

Needle Indicator

Segment Indicator

Segment Indicator

Documentation, samples, toolbox items and design time support are on the way, but while you’re waiting, why not play around with this new control right now and see what you can come up with. Here’s some code to get you started.

<!-- Arc Indicator demo -->
<ms:RadialGauge>
  <ms:RadialGaugeArcIndicator Value="{Binding Value, Mode=TwoWay}" RadiusScale="0.8" ArcThickness="40" ArcBrush="White" TrackBrush="#AAAAAA" />
  <ms:RadialGaugeArcIndicator Value="{Binding Value2, Mode=TwoWay}" RadiusScale="0.4" ArcBrush="Red" />
</ms:RadialGauge>
 
<!-- Needle Indicator demo -->
<ms:RadialGauge>
  <ms:RadialGaugeNeedleIndicator Value="{Binding Value, Mode=TwoWay}" RadiusScale="0.6" />
  <ms:RadialGaugeLabelsControl RadiusScale="0.8" LabelSpacing="20" />
  <ms:RadialGaugeTickMarksControl RadiusScale="0.65" MajorTickSpacing="10" />
</ms:RadialGauge>
 
<!-- Segment Indicator demo -->
<ms:RadialGauge StartAngle="0" SweepAngle="360">
  <ms:RadialGaugeSegmentIndicator Value="{Binding Value2, Mode=TwoWay}" RadiusScale="0.7" SegmentCount="60">
    <ms:RadialGaugeSegmentIndicator.SegmentTemplate>
      <DataTemplate>
        <Border Width="6" Height="40" Background="{Binding Brush}" Margin="-2,-20,2,20" />
      </DataTemplate>
    </ms:RadialGaugeSegmentIndicator.SegmentTemplate>
    <ms:RadialGaugeSegmentIndicator.InactiveSegmentTemplate>
      <DataTemplate>
        <Border />
      </DataTemplate>
    </ms:RadialGaugeSegmentIndicator.InactiveSegmentTemplate>
    <ms:RadialGaugeSegmentIndicator.SegmentColorSelector>
      <ms:RadialGaugeColorSelector>
        <ms:RadialGaugeColorDefinition Value="0" Color="Green" />
        <ms:RadialGaugeColorDefinition Value="5" Color="Yellow" />
        <ms:RadialGaugeColorDefinition Value="20" Color="Orange" />
        <ms:RadialGaugeColorDefinition Value="40" Color="Red" />
        <ms:RadialGaugeColorDefinition Value="100" Color="LightPink" />
      </ms:RadialGaugeColorSelector>
    </ms:RadialGaugeSegmentIndicator.SegmentColorSelector>
  </ms:RadialGaugeSegmentIndicator>
</ms:RadialGauge>

As well as the new RadialGauge control, there are also a couple of small improvements to the DateTimePicker culture support and layout.

Stay tuned for another update next week! If you have any questions about Metro Elements, let us know in the forum. And if you have any control or feature requests, we’d love to hear about them in the Think Tank.

Get the latest update of the beta now!

Tagged as Metro Elements

Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top