Mini Kabibi Habibi

<local:GaugesDemoModule x:Class="GaugesDemo.CircularModels"
        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>
            <local:DemoValuesProvider x:Key="DemoValuesProvider" />
            <local:PredefinedElementKindToCircularGaugeModel x:Key="GaugeModelConverter" />
        </ResourceDictionary>
    </dxdb:DemoModule.Resources>
    <dxdb:DemoModuleControl>
        <dxdb:DemoModuleControl.OptionsContent>
            <StackPanel>
                <dx:GroupFrame Header="Model" Margin="0,0,0,10">
                    <dxe:ListBoxEdit Name="lbModel" Background="{x:Null}" ShowBorder="False" ItemsSource="{Binding PredefinedCircularGaugeModelKinds, Source={StaticResource DemoValuesProvider}}" >
                        <dxe:ListBoxEdit.StyleSettings>
                            <dxe:RadioListBoxEditStyleSettings />
                        </dxe:ListBoxEdit.StyleSettings>
                    </dxe:ListBoxEdit>
                </dx:GroupFrame>
            </StackPanel>
        </dxdb:DemoModuleControl.OptionsContent>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.04*"/>
                <RowDefinition Height="0.46*"/>
                <RowDefinition Height="70"/>
                <RowDefinition Height="0.46*"/>
                <RowDefinition Height="0.04*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.48*"/>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="0.48*"/>
            </Grid.ColumnDefinitions>
            <dxga:CircularGaugeControl Grid.Row="3" Grid.Column="2" x:Name="gauge" MaxHeight="300" MaxWidth="300" Model="{Binding ElementName=lbModel, Path=SelectedItem, Converter={StaticResource GaugeModelConverter}}" EnableAnimation="True" HorizontalAlignment="Left" VerticalAlignment="Top">
                <dxga:CircularGaugeControl.Scales>
                    <dxga:ArcScale HorizontalAlignment="Center">
                        <dxga:ArcScale.Layers>
                            <dxga:ArcScaleLayer/>
                            <dxga:ArcScaleLayer/>
                        </dxga:ArcScale.Layers>
                        <dxga:ArcScale.Needles>
                            <dxga:ArcScaleNeedle Value="{Binding NeedleValue}"/>
                        </dxga:ArcScale.Needles>
                        <dxga:ArcScale.Markers>
                            <dxga:ArcScaleMarker Value="{Binding MarkerValue}"/>
                        </dxga:ArcScale.Markers>
                        <dxga:ArcScale.RangeBars>
                            <dxga:ArcScaleRangeBar Value="{Binding RangeBarValue}"/>
                        </dxga:ArcScale.RangeBars>
                        <dxga:ArcScale.Ranges>
                            <dxga:ArcScaleRange StartValue="0%" EndValue="33%"/>
                            <dxga:ArcScaleRange StartValue="33%" EndValue="67%"/>
                            <dxga:ArcScaleRange StartValue="67%" EndValue="100%"/>
                        </dxga:ArcScale.Ranges>
                    </dxga:ArcScale>
                </dxga:CircularGaugeControl.Scales>
            </dxga:CircularGaugeControl>
            <dxga:CircularGaugeControl Grid.Row="1" Grid.Column="2" x:Name="gaugeHalfTop" MaxHeight="300" MaxWidth="300" Model="{Binding ElementName=lbModel, Path=SelectedItem, Converter={StaticResource GaugeModelConverter}}" EnableAnimation="True" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                <dxga:CircularGaugeControl.Scales>
                    <dxga:ArcScale HorizontalAlignment="Center" StartAngle="180" EndAngle="360" MajorIntervalCount="5">
                        <dxga:ArcScale.Layers>
                            <dxga:ArcScaleLayer/>
                            <dxga:ArcScaleLayer/>
                        </dxga:ArcScale.Layers>
                        <dxga:ArcScale.Needles>
                            <dxga:ArcScaleNeedle Value="{Binding NeedleValue}"/>
                        </dxga:ArcScale.Needles>
                        <dxga:ArcScale.Markers>
                            <dxga:ArcScaleMarker Value="{Binding MarkerValue}"/>
                        </dxga:ArcScale.Markers>
                        <dxga:ArcScale.RangeBars>
                            <dxga:ArcScaleRangeBar Value="{Binding RangeBarValue}"/>
                        </dxga:ArcScale.RangeBars>
                        <dxga:ArcScale.Ranges>
                            <dxga:ArcScaleRange StartValue="0%" EndValue="33%"/>
                            <dxga:ArcScaleRange StartValue="33%" EndValue="67%"/>
                            <dxga:ArcScaleRange StartValue="67%" EndValue="100%"/>
                        </dxga:ArcScale.Ranges>
                    </dxga:ArcScale>
                </dxga:CircularGaugeControl.Scales>
            </dxga:CircularGaugeControl>
            <dxga:CircularGaugeControl Grid.Row="1" Grid.Column="0" x:Name="gaugeQuarterTopLeft" MaxHeight="210" MaxWidth="210" Model="{Binding ElementName=lbModel, Path=SelectedItem, Converter={StaticResource GaugeModelConverter}}" EnableAnimation="True" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,50,0">
                <dxga:CircularGaugeControl.Scales>
                    <dxga:ArcScale HorizontalAlignment="Center" StartAngle="180" EndAngle="270" MajorIntervalCount="2">
                        <dxga:ArcScale.Layers>
                            <dxga:ArcScaleLayer/>
                            <dxga:ArcScaleLayer/>
                        </dxga:ArcScale.Layers>
                        <dxga:ArcScale.Needles>
                            <dxga:ArcScaleNeedle Value="{Binding NeedleValue}"/>
                        </dxga:ArcScale.Needles>
                        <dxga:ArcScale.Markers>
                            <dxga:ArcScaleMarker Value="{Binding MarkerValue}"/>
                        </dxga:ArcScale.Markers>
                        <dxga:ArcScale.RangeBars>
                            <dxga:ArcScaleRangeBar Value="{Binding RangeBarValue}"/>
                        </dxga:ArcScale.RangeBars>
                        <dxga:ArcScale.Ranges>
                            <dxga:ArcScaleRange StartValue="0%" EndValue="33%"/>
                            <dxga:ArcScaleRange StartValue="33%" EndValue="67%"/>
                            <dxga:ArcScaleRange StartValue="67%" EndValue="100%"/>
                        </dxga:ArcScale.Ranges>
                    </dxga:ArcScale>
                </dxga:CircularGaugeControl.Scales>
            </dxga:CircularGaugeControl>
            <dxga:CircularGaugeControl Grid.Row="3" Grid.Column="0" x:Name="gaugeThreeQuarters" MaxHeight="300" MaxWidth="300" Model="{Binding ElementName=lbModel, Path=SelectedItem, Converter={StaticResource GaugeModelConverter}}" EnableAnimation="True" HorizontalAlignment="Right" VerticalAlignment="Top">
                <dxga:CircularGaugeControl.Scales>
                    <dxga:ArcScale HorizontalAlignment="Center" StartAngle="135" EndAngle="405">
                        <dxga:ArcScale.Layers>
                            <dxga:ArcScaleLayer/>
                            <dxga:ArcScaleLayer/>
                        </dxga:ArcScale.Layers>
                        <dxga:ArcScale.Needles>
                            <dxga:ArcScaleNeedle Value="{Binding NeedleValue}"/>
                        </dxga:ArcScale.Needles>
                        <dxga:ArcScale.Markers>
                            <dxga:ArcScaleMarker Value="{Binding MarkerValue}"/>
                        </dxga:ArcScale.Markers>
                        <dxga:ArcScale.RangeBars>
                            <dxga:ArcScaleRangeBar Value="{Binding RangeBarValue}"/>
                        </dxga:ArcScale.RangeBars>
                        <dxga:ArcScale.Ranges>
                            <dxga:ArcScaleRange StartValue="0%" EndValue="33%"/>
                            <dxga:ArcScaleRange StartValue="33%" EndValue="67%"/>
                            <dxga:ArcScaleRange StartValue="67%" EndValue="100%"/>
                        </dxga:ArcScale.Ranges>
                    </dxga:ArcScale>
                </dxga:CircularGaugeControl.Scales>
            </dxga:CircularGaugeControl>
        </Grid>

    </dxdb:DemoModuleControl>
</local:GaugesDemoModule>