Resources/XAML/ResourceDictionaries/Button.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="BtnStyle" TargetType="RadioButton"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Margin" Value="0,5,0,0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RadioButton"> <Border x:Name="border" Height="50" Width="228" BorderThickness="0"> <!--// background of each sidebar button //--> <Border.Background> <LinearGradientBrush x:Name="BorderBackground" StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="#272B2F" Offset="0.0" /> <GradientStop Color="#3E434A" Offset="1.0" /> </LinearGradientBrush> </Border.Background> <Grid> <Border x:Name="Indicator" Height="35" Width="4" HorizontalAlignment="Left" VerticalAlignment="Center" Background="#f953c6" Visibility="Collapsed" CornerRadius="2" /> <ContentPresenter /> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Visibility" TargetName="Indicator" Value="Visible" /> </Trigger> <EventTrigger RoutedEvent="Border.MouseEnter" SourceName="border"> <BeginStoryboard> <Storyboard> <!--// gradient color of the sidebar button when mouse/touch hovers over //--> <ColorAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="GradientStops[0].Color" From="#272B2F" To="#3E434A" Duration="0:0:0.3" /> <ColorAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="GradientStops[1].Color" From="#3E434A" To="#272B2F" Duration="0:0:0.3" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Border.MouseLeave" SourceName="border"> <BeginStoryboard> <Storyboard> <!--// revert gradient color of the sidebar button when mouse/touch leaves it //--> <ColorAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="GradientStops[0].Color" From="#3E434A" To="#272B2F" Duration="0:0:0.3" /> <ColorAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="GradientStops[1].Color" From="#272B2F" To="#3E434A" Duration="0:0:0.3" /> </Storyboard> </BeginStoryboard> </EventTrigger> <Trigger Property="IsChecked" Value="True"> <!--// gradient color of the currently selected/active sidebar button //--> <Setter Property="Background" TargetName="border"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="#f953c6" Offset="0.0" /> <GradientStop Color="#272B2F" Offset="0.1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Visibility" TargetName="Indicator" Value="Visible" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> |