Mini Kabibi Habibi
<local:GaugesDemoModule x:Class="GaugesDemo.CircularRanges"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxdb="http://schemas.devexpress.com/winfx/2008/xaml/demobase"
xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:GaugesDemo"
mc:Ignorable="d" d:DesignHeight="557" d:DesignWidth="887">
<dxdb:DemoModule.Resources>
<ResourceDictionary>
<dxga:ObjectToRangeValueConverter x:Key="RangeValueConverter" />
</ResourceDictionary>
</dxdb:DemoModule.Resources>
<dxdb:DemoModuleControl>
<dxdb:DemoModuleControl.OptionsContent>
<StackPanel MinWidth="200">
<dx:GroupFrame Header="Values" Margin="0,0,0,10">
<StackPanel>
<TextBlock Text="Pressure"/>
<dxe:TrackBarEdit x:Name="presureTrackBar" Minimum="960" Maximum="1040" Value="1000"/>
<TextBlock Text="Temperature"/>
<dxe:TrackBarEdit x:Name="temperatureTrackBar" Minimum="-40" Maximum="40" Value="0"/>
</StackPanel>
</dx:GroupFrame>
<dx:GroupFrame Header="Pressure Ranges" Margin="0,10,0,10">
<StackPanel>
<TextBlock Text="Start Value"/>
<dxe:TrackBarEdit x:Name="startValueTrackBar" Minimum="960" Maximum="980" Value="970"/>
<TextBlock Text="End Value"/>
<dxe:TrackBarEdit x:Name="endValueTrackBar" Minimum="1020" Maximum="1040" Value="1030"/>
</StackPanel>
</dx:GroupFrame>
</StackPanel>
</dxdb:DemoModuleControl.OptionsContent>
<Grid>
<Grid.Background>
<RadialGradientBrush Center="0.5,1.001" GradientOrigin="0.5,1.001" RadiusY="1.123" RadiusX="1.123">
<GradientStop Color="#FF374477" Offset="0"/>
<GradientStop Color="#FF281F44" Offset="1"/>
</RadialGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="15*"/>
<RowDefinition Height="75*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,5,0,0" Text="Weather Forecast" FontSize="22" Foreground="#D0C3eD"/>
<dxga:CircularGaugeControl Grid.Row="1" MaxHeight="400" MaxWidth="400">
<dxga:CircularGaugeControl.Model>
<dxga:CircularFutureModel/>
</dxga:CircularGaugeControl.Model>
<dxga:CircularGaugeControl.Scales>
<dxga:ArcScale StartValue="960" EndValue="1040"
MajorIntervalCount="8" MinorIntervalCount="5">
<dxga:ArcScale.Layers>
<dxga:ArcScaleLayer/>
<dxga:ArcScaleLayer/>
</dxga:ArcScale.Layers>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions Offset="-55" Orientation="Tangent"/>
</dxga:ArcScale.LabelOptions>
<dxga:ArcScale.Markers>
<dxga:ArcScaleMarker Value="{Binding ElementName=presureTrackBar, Path=Value, Mode=TwoWay}">
<dxga:ArcScaleMarker.Presentation>
<dxga:FutureArcScaleMarkerPresentation Fill="#FF6D96CC"/>
</dxga:ArcScaleMarker.Presentation>
<dxga:ArcScaleMarker.Options>
<dxga:ArcScaleMarkerOptions Offset="-40" FactorHeight="1.3" FactorWidth="1.3" />
</dxga:ArcScaleMarker.Options>
</dxga:ArcScaleMarker>
</dxga:ArcScale.Markers>
<dxga:ArcScale.Ranges>
<dxga:ArcScaleRange StartValue="{Binding ElementName=startValueTrackBar, Path=Value, Converter={StaticResource RangeValueConverter}}"
EndValue="40%"
IndicatorEnter="LowRangeIndicatorEnter" IndicatorLeave="LowRangeIndicatorLeave">
</dxga:ArcScaleRange>
<dxga:ArcScaleRange StartValue="40%" EndValue="60%"
IndicatorEnter="NormalRangeIndicatorEnter" IndicatorLeave="NormalRangeIndicatorLeave">
</dxga:ArcScaleRange>
<dxga:ArcScaleRange StartValue="60%" EndValue="{Binding ElementName=endValueTrackBar, Path=Value, Converter={StaticResource RangeValueConverter}}"
IndicatorEnter="HighRangeIndicatorEnter" IndicatorLeave="HighRangeIndicatorLeave">
</dxga:ArcScaleRange>
</dxga:ArcScale.Ranges>
<dxga:ArcScale.CustomLabels>
<dxga:ScaleCustomLabel Content="millibars" Value="1048" RenderTransformOrigin="0.5, 0.5" Offset="-50" FontSize="16" Foreground="#FFACA5C7"/>
</dxga:ArcScale.CustomLabels>
</dxga:ArcScale>
<dxga:ArcScale HorizontalAlignment="Center" Margin="25"
StartValue="720" EndValue="780"
MajorIntervalCount="6">
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions Orientation="Tangent" Offset="-55"/>
</dxga:ArcScale.LabelOptions>
<dxga:ArcScale.CustomLabels>
<dxga:ScaleCustomLabel Content="mm" Value="786" RenderTransformOrigin="0.5, 0.5" Offset="-50" FontSize="16" Foreground="#FFACA5C7"/>
</dxga:ArcScale.CustomLabels>
</dxga:ArcScale>
<dxga:ArcScale HorizontalAlignment="Center" Margin="80"
StartValue="-40" EndValue="40"
MajorIntervalCount="8">
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="{Binding ElementName=temperatureTrackBar, Path=Value, Mode=TwoWay}"/>
</dxga:ArcScale.Needles>
<dxga:ArcScale.Ranges>
<dxga:ArcScaleRange StartValue="-40" EndValue="0">
<dxga:ArcScaleRange.Presentation>
<dxga:DefaultArcScaleRangePresentation Fill="#FF6D96CC" />
</dxga:ArcScaleRange.Presentation>
<dxga:ArcScaleRange.Options>
<dxga:RangeOptions Offset="-71" Thickness="4"/>
</dxga:ArcScaleRange.Options>
</dxga:ArcScaleRange>
<dxga:ArcScaleRange StartValue="0" EndValue="40" IndicatorEnter="HighTemperatureIndicatorEnter" IndicatorLeave="HighTemperatureIndicatorLeave">
<dxga:ArcScaleRange.Options>
<dxga:RangeOptions Offset="-71" Thickness="4"/>
</dxga:ArcScaleRange.Options>
</dxga:ArcScaleRange>
</dxga:ArcScale.Ranges>
<dxga:ArcScale.CustomLabels>
<dxga:ScaleCustomLabel Value="48" RenderTransformOrigin="0.5, 0.5" Offset="-50" FontSize="20" Foreground="#FFACA5C7" Content="°C"/>
</dxga:ArcScale.CustomLabels>
</dxga:ArcScale>
</dxga:CircularGaugeControl.Scales>
</dxga:CircularGaugeControl>
<dxga:StateIndicatorControl Grid.Row="1" x:Name="stateIndicator" VerticalAlignment="Center" HorizontalAlignment="Center">
<dxga:StateIndicatorControl.AdditionalStates>
<dxga:State>
<dxga:State.Presentation>
<dxga:CustomStatePresentation>
<dxga:CustomStatePresentation.StateTemplate>
<ControlTemplate>
<Image VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" Source="../Images/CircularRanges/Cloudy.png"/>
</ControlTemplate>
</dxga:CustomStatePresentation.StateTemplate>
</dxga:CustomStatePresentation>
</dxga:State.Presentation>
</dxga:State>
<dxga:State>
<dxga:State.Presentation>
<dxga:CustomStatePresentation>
<dxga:CustomStatePresentation.StateTemplate>
<ControlTemplate>
<Image VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" Source="../Images/CircularRanges/Snowy.png"/>
</ControlTemplate>
</dxga:CustomStatePresentation.StateTemplate>
</dxga:CustomStatePresentation>
</dxga:State.Presentation>
</dxga:State>
<dxga:State>
<dxga:State.Presentation>
<dxga:CustomStatePresentation>
<dxga:CustomStatePresentation.StateTemplate>
<ControlTemplate>
<Image VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" Source="../Images/CircularRanges/Rainy.png"/>
</ControlTemplate>
</dxga:CustomStatePresentation.StateTemplate>
</dxga:CustomStatePresentation>
</dxga:State.Presentation>
</dxga:State>
<dxga:State>
<dxga:State.Presentation>
<dxga:CustomStatePresentation>
<dxga:CustomStatePresentation.StateTemplate>
<ControlTemplate>
<Image VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" Source="../Images/CircularRanges/Sunny.png"/>
</ControlTemplate>
</dxga:CustomStatePresentation.StateTemplate>
</dxga:CustomStatePresentation>
</dxga:State.Presentation>
</dxga:State>
</dxga:StateIndicatorControl.AdditionalStates>
</dxga:StateIndicatorControl>
</Grid>
</dxdb:DemoModuleControl>
</local:GaugesDemoModule>