Mini Kabibi Habibi
<local:GaugesDemoModule x:Class="GaugesDemo.SymbolAnimation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:GaugesDemo"
mc:Ignorable="d" d:DesignHeight="676" d:DesignWidth="1375">
<dxdb:DemoModuleControl>
<dxdb:DemoModuleControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/GaugesDemo;component/Themes/generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</dxdb:DemoModuleControl.Resources>
<dxdb:DemoModuleControl.OptionsContent>
<StackPanel>
<dx:GroupFrame Header="Animation Direction" Margin="0,0,0,10">
<dxe:ListBoxEdit Name="lbeAnimationDirection" Background="{x:Null}" ShowBorder="False" SelectedIndex="0" EditValueChanged="lbeAnimationDirection_EditValueChanged">
<dxe:ListBoxEdit.StyleSettings>
<dxe:RadioListBoxEditStyleSettings />
</dxe:ListBoxEdit.StyleSettings>
<dxe:ListBoxEdit.Items>
<sys:String>Right to Left</sys:String>
<sys:String>Left to Right</sys:String>
</dxe:ListBoxEdit.Items>
</dxe:ListBoxEdit>
</dx:GroupFrame>
</StackPanel>
</dxdb:DemoModuleControl.OptionsContent>
<Grid x:Name="receiverGrid">
<Grid.RowDefinitions>
<RowDefinition Height="0.159*"/>
<RowDefinition Height="0.841*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2C2F36"/>
<GradientStop Color="#FF16171B" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock TextWrapping="Wrap" Text="Car Audio Receiver" Foreground="#FF54BCE3" HorizontalAlignment="Center" Grid.Column="1" Margin="0,40,0,0" VerticalAlignment="Center" FontSize="22"/>
<Grid Width="600" Height="300" Margin="0,0,0,50" Grid.Row="1" Grid.Column="1" FlowDirection="LeftToRight">
<Rectangle Fill="#FF27292F" RadiusX="18" RadiusY="18"/>
<Rectangle RadiusX="18" RadiusY="18" Margin="0,0,0,1">
<Rectangle.Fill>
<RadialGradientBrush Center="0.5,1.591" GradientOrigin="0.5,1.591" RadiusY="1.135" RadiusX="0.6">
<GradientStop Color="#FF1E1F25" Offset="0.95"/>
<GradientStop Color="#FF16181B" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="14" RadiusY="14" Margin="4,4,4,15" Fill="#FF41444C"/>
<Rectangle RadiusX="14" RadiusY="14" Margin="4,15,4,4" Fill="Black"/>
<Rectangle RadiusX="14" RadiusY="14" Margin="4,5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2D3239" Offset="0.004"/>
<GradientStop Color="#FF191B1E" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Margin="40,35,40,30">
<Grid Height="90" VerticalAlignment="Top">
<Rectangle HorizontalAlignment="Center" RadiusY="8" RadiusX="8" Width="520" Fill="#FF10151B" Margin="0,0,0,1"/>
<Rectangle HorizontalAlignment="Center" RadiusY="8" RadiusX="8" Width="520" Fill="#FF375462" Margin="0,1,0,0"/>
<Rectangle HorizontalAlignment="Center" RadiusY="8" RadiusX="8" Width="520" Margin="0,1">
<Rectangle.Fill>
<RadialGradientBrush Center="0.5,1.591" GradientOrigin="0.5,1.591" RadiusY="1.135" RadiusX="0.6">
<GradientStop Color="#FF003C57" Offset="0.951"/>
<GradientStop Color="#FF00293B" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Center" RadiusY="5" RadiusX="5" Width="514" Margin="0,3,0,4">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3FCFFF" Offset="0"/>
<GradientStop Color="#FF2BAAE6" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<dxga:DigitalGaugeControl x:Name="displayGauge"
HorizontalAlignment="Center" Width="514"
Text="{Binding PlayerText}" SymbolCount="17" TextDirection="RightToLeft">
<dxga:DigitalGaugeControl.SymbolView>
<dxga:FourteenSegmentsView Height="38" x:Name="symbolView" Animation="{Binding PlayerAnimation}">
<dxga:FourteenSegmentsView.Presentation>
<dxga:DefaultFourteenSegmentsPresentation FillActive="#FF2C2F36" FillInactive="Transparent"/>
</dxga:FourteenSegmentsView.Presentation>
</dxga:FourteenSegmentsView>
</dxga:DigitalGaugeControl.SymbolView>
</dxga:DigitalGaugeControl>
<Rectangle HorizontalAlignment="Center" RadiusY="5" RadiusX="5" Width="514" Margin="0,3,0,4" Opacity="0.32">
<Rectangle.Fill>
<RadialGradientBrush Center="0.5,0.032" GradientOrigin="0.5,0.032" RadiusY="0.535" RadiusX="0.783">
<GradientStop Color="#FFD4F5FF" Offset="0"/>
<GradientStop Color="#00D4F5FF" Offset="1"/>
<GradientStop Color="#7FD4F5FF" Offset="0.9999"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid x:Name="Buttons" Height="86" Margin="186,0,0,34" VerticalAlignment="Bottom" Width="198" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="0.609*"/>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.303*"/>
<ColumnDefinition Width="46"/>
<ColumnDefinition Width="46"/>
<ColumnDefinition Width="46"/>
</Grid.ColumnDefinitions>
<Button Content="SRC" Margin="0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Click="SrcButton_Click"/>
<Button Content="MUTE" Margin="0,6,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Row="1"/>
<Button Margin="6,0,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Column="1" Click="PreviousButton_Click">
<Image Source="../Images/SymbolAnimation/Previous.png" Height="86" Width="100" Stretch="None"/>
</Button>
<Button Margin="6,6,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Column="1" Grid.Row="1" Click="FirstButton_Click">
<Image Source="../Images/SymbolAnimation/First.png" Stretch="None" Height="86" Width="100"/>
</Button>
<Button Margin="6,0,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Column="2">
<Image Source="../Images/SymbolAnimation/Play.png" Height="86" Width="100" Stretch="None"/>
</Button>
<Button Margin="6,6,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Column="2" Grid.Row="1">
<Image Source="../Images/SymbolAnimation/Pause.png" Height="86" Width="100" Stretch="None"/>
</Button>
<Button Margin="6,0,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Column="3" Click="NextButton_Click">
<Image Source="../Images/SymbolAnimation/Next.png" Height="86" Width="100" Stretch="None"/>
</Button>
<Button Margin="6,6,0,0" Style="{StaticResource CarAudioReceiverButtonStyle}" Foreground="#FF79D8FF" Grid.Column="3" Grid.Row="1" Click="LastButton_Click">
<Image Source="../Images/SymbolAnimation/Last.png" Height="86" Width="100" Stretch="None"/>
</Button>
</Grid>
<Grid x:Name="Clock" HorizontalAlignment="Left" Height="90" Margin="0,0,0,34" VerticalAlignment="Bottom" Width="160">
<Rectangle RadiusY="8" RadiusX="8" Fill="#FF10151B" Margin="0,0,0,1"/>
<Rectangle RadiusY="8" RadiusX="8" Fill="#FF375462" Margin="0,1,0,0"/>
<Rectangle RadiusY="8" RadiusX="8" Margin="0,1">
<Rectangle.Fill>
<RadialGradientBrush Center="0.5,1.591" GradientOrigin="0.5,1.591" RadiusY="1.135" RadiusX="0.6">
<GradientStop Color="#FF003C57" Offset="0.913"/>
<GradientStop Color="#FF00293B" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusY="5" RadiusX="5" Margin="3">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3FCFFF" Offset="0"/>
<GradientStop Color="#FF2BAAE6" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<dxga:DigitalGaugeControl HorizontalAlignment="Center" VerticalAlignment="Center"
Text="{Binding TimeText}" SymbolCount="5" TextDirection="RightToLeft">
<dxga:DigitalGaugeControl.SymbolView>
<dxga:FourteenSegmentsView Height="32">
<dxga:FourteenSegmentsView.Presentation>
<dxga:DefaultFourteenSegmentsPresentation FillActive="#FF2C2F36" FillInactive="Transparent"/>
</dxga:FourteenSegmentsView.Presentation>
<dxga:FourteenSegmentsView.Animation>
<dxga:BlinkingAnimation RefreshTime="00:000:00.5" Enable="True" SymbolsStates="0 0 1 0 0">
</dxga:BlinkingAnimation>
</dxga:FourteenSegmentsView.Animation>
</dxga:FourteenSegmentsView>
</dxga:DigitalGaugeControl.SymbolView>
</dxga:DigitalGaugeControl>
<Rectangle RadiusY="5" RadiusX="5" Margin="3" Opacity="0.32">
<Rectangle.Fill>
<RadialGradientBrush Center="0.5,0.02" GradientOrigin="0.5,0.02" RadiusX="0.893" RadiusY="0.553">
<GradientStop Color="#FFD4F5FF" Offset="0"/>
<GradientStop Color="#00D4F5FF" Offset="1"/>
<GradientStop Color="#7FD4F5FF" Offset="0.9999"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid x:Name="Volume" HorizontalAlignment="Right" Height="132" VerticalAlignment="Bottom" Width="120" Margin="0,0,-3,2">
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="VOLUME" VerticalAlignment="Bottom" Foreground="#FF5C6478" Margin="0,0,0,-3"/>
<dxga:CircularGaugeControl Height="120" Width="120" VerticalAlignment="Top">
<dxga:CircularGaugeControl.Scales>
<dxga:ArcScale ShowLabels="False" ShowMajorTickmarks="False" ShowMinorTickmarks="False" EndAngle="45">
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle IsInteractive="True" Value="0">
<dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedleOptions EndOffset="0"/>
</dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedle.Presentation>
<dxga:CustomArcScaleNeedlePresentation NeedleTemplate="{StaticResource CarAudioReceiverNeedleTemplate}"/>
</dxga:ArcScaleNeedle.Presentation>
</dxga:ArcScaleNeedle>
</dxga:ArcScale.Needles>
<dxga:ArcScale.Layers>
<dxga:ArcScaleLayer>
<dxga:ArcScaleLayer.Presentation>
<dxga:CustomArcScaleLayerPresentation ScaleLayerTemplate="{StaticResource CarAudioReceiverScaleBackgroundTemplate}"/>
</dxga:ArcScaleLayer.Presentation>
</dxga:ArcScaleLayer>
</dxga:ArcScale.Layers>
</dxga:ArcScale>
</dxga:CircularGaugeControl.Scales>
</dxga:CircularGaugeControl>
</Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,135,-3">
<TextBlock TextWrapping="Wrap" Text="AUX" Foreground="#FF5C6478" Margin="0" Height="18" VerticalAlignment="Bottom" Width="24"/>
<Image Source="../Images/SymbolAnimation/Marker.png" Stretch="None" Height="18" VerticalAlignment="Bottom" Width="24"/>
</StackPanel>
</Grid>
</Grid>
</Grid>
</dxdb:DemoModuleControl>
</local:GaugesDemoModule>