-
Notifications
You must be signed in to change notification settings - Fork 27
The Meter SubMenu
As mentioned in the Custom Menu section, MeterSubMenu can be attached to any RadialMenu
's CustomMenu
property. A MeterSubMenu can display a meter with any number of ranges of values.
Use the following XAML to create a MeterSubMenu for a CustomMenu:
<rmb:RadialMenuButton x:Name="Pen1StrokeButton" IconImage="Icons/stroke.png" Label="Stroke">
<rmb:RadialMenuButton.CustomMenu>
<rm:MeterSubMenu x:Name="Pen1StrokeMenu"
CenterButtonBorder="Black"
MeterEndValue="72"
MeterStartValue="5"
MeterRadius="80"
StartAngle="-90"
MeterPointerLength="80"
RoundSelectValue="True"
OuterEdgeBrush="#383739"
/>
</rmb:RadialMenuButton.CustomMenu>
</rmb:RadialMenuButton>
Meter Range Intervals are a collection of objects which describe a value range to be assigned to a specified degree range of the meter circle, from 0 and 259 degrees. Each degree range has a value range and an interval for that range which is used to draw the ticks you see in the menu below:
Using code behind, you can specify these ranges for this example like this:
Pen1StrokeMenu.Intervals = new List<MeterRangeInterval>()
{
new MeterRangeInterval
{
StartValue = 5,
EndValue = 11,
TickInterval = 1,
StartDegree = 0,
EndDegree = 90
},
new MeterRangeInterval
{
StartValue = 11,
EndValue = 12,
TickInterval = 1,
StartDegree = 90,
EndDegree = 110
},
new MeterRangeInterval
{
StartValue = 12,
EndValue = 28,
TickInterval = 2,
StartDegree = 110,
EndDegree = 250
},
new MeterRangeInterval
{
StartValue = 28,
EndValue = 36,
TickInterval = 8,
StartDegree = 250,
EndDegree = 280
},
new MeterRangeInterval
{
StartValue = 36,
EndValue = 48,
TickInterval = 12,
StartDegree = 280,
EndDegree = 300
},
new MeterRangeInterval
{
StartValue = 48,
EndValue = 72,
TickInterval = 24,
StartDegree = 300,
EndDegree = 320
}
};
You can easily do one or two-way binding onto the MeterSubMenu by specifying bind-attr
tags onto the the XAML. For example, if you wanted to bind to the LockedValue
property of the menu, which specifies what the target value of the meter is you can do this:
<userControl:MeterSubMenu x:Name="Pen1OpacityMenu" CenterButtonBorder="Black" MeterEndValue="100" MeterStartValue="0" MeterRadius="80" StartAngle="-90" MeterPointerLength="80"
LockedValue="{Binding MyLockedValue, Mode=TwoWay}" RoundSelectValue="True" OuterEdgeBrush="#383739" />
Given a variable MyLockedValue
, changes to this variable will changed the locked value on the MeterSubMenu, and changes from the MeterSubMenu will change the value of MyLockedValue
.