Resources/XAML/ResourceDictionaries/Label.xaml
|
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Modern Label Style with Sparkling Line Hover Effect --> <Style x:Key="ModernLabelStyle" TargetType="Label"> <!-- Basic Settings --> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="FontSize" Value="16" /> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="Foreground" Value="#272B2F" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Margin" Value="0,0,10,0" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="Width" Value="300" /> <Setter Property="Height" Value="70" /> <!-- Background with gradient --> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="#FFAFBD" Offset="0.0" /> <GradientStop Color="#ffc3a0" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <!-- Rounded Corners and Border --> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Label"> <Grid> <!-- Clipping the Grid to a Rounded Rectangle so it doesn't stick out --> <Grid.Clip> <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,300,70" /> </Grid.Clip> <!-- Main Background Border --> <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10" /> <!-- Sparkling Layer Effect --> <Border x:Name="SparkleLine" Width="300" Height="70" Opacity="0" CornerRadius="10" RenderTransformOrigin="0.5,0.5"> <Border.RenderTransform> <TranslateTransform X="-300" /> </Border.RenderTransform> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="#00FFFFFF" Offset="0.0" /> <GradientStop Color="#FFFFFFFF" Offset="0.5" /> <GradientStop Color="#00FFFFFF" Offset="1.0" /> </LinearGradientBrush> </Border.Background> </Border> <!-- Content Presenter with Text Wrapping --> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"> <ContentPresenter.ContentTemplate> <DataTemplate> <TextBlock Text="{Binding}" TextWrapping="Wrap" TextAlignment="Center" /> </DataTemplate> </ContentPresenter.ContentTemplate> </ContentPresenter> </Grid> <ControlTemplate.Triggers> <!-- Trigger for mouse hover --> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <!-- Sparkling line opacity animation --> <DoubleAnimation Storyboard.TargetName="SparkleLine" Storyboard.TargetProperty="Opacity" From="0" To="0.8" Duration="0:0:0.1" /> <!-- Sparkling line movement (Straight from left to right) --> <DoubleAnimation Storyboard.TargetName="SparkleLine" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="-300" To="300" Duration="0:0:0.8" /> <!-- Sparkling line fade out --> <DoubleAnimation Storyboard.TargetName="SparkleLine" Storyboard.TargetProperty="Opacity" From="0.8" To="0" Duration="0:0:0.1" BeginTime="0:0:0.8" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- Defining a custom style for ListViewItem to remove border and highlight --> <Style x:Key="CustomListViewItemStyle" TargetType="ListViewItem"> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Margin" Value="0"/> <Setter Property="Padding" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentSource="Content"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> |