wpfwpf-controlsribbon-control
WPF Ribbon Buttons Glowing Effects when Mouse Over
I'm trying to create a ribbon menu with a glowing effects when hover. Does it possible in WPF Ribbon Button? like this http://tympanus.net/Development/IconHoverEffects/#set-8
If yes does anyone knows how? Thank you.
Here's what i have so far.
<pbwpf:Window.Resources>
<Style TargetType="{x:Type my:Ribbon}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type my:Ribbon}">
<StackPanel Orientation="Vertical" Height="750" Background="#171f22">
<my:RibbonButton Name="rb_edit" Label="Edit" Margin="0,20,0,0">
<Button.Template>
<ControlTemplate>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Images/rb_add4.png" Width="43" Height="43" />
</Border>
</ControlTemplate>
</Button.Template>
</my:RibbonButton>
<my:RibbonButton Name="rb_save" Label="Save" Margin="0,20,0,0">
<Button.Template>
<ControlTemplate>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Images/rb_add4.png" Width="43" Height="43" />
</Border>
</ControlTemplate>
</Button.Template>
</my:RibbonButton>
<my:RibbonButton Name="rb_abort" Label="Abort" Margin="0,20,0,0">
<Button.Template>
<ControlTemplate>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Images/rb_add4.png" Width="43" Height="43"></Image>
</Border>
</ControlTemplate>
</Button.Template>
</my:RibbonButton>
<my:RibbonButton Name="rb_delete" Label="Delete" Margin="0,20,0,0">
<Button.Template>
<ControlTemplate>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Images/rb_add4.png" Width="43" Height="43"></Image>
</Border>
</ControlTemplate>
</Button.Template>
</my:RibbonButton>
<my:RibbonButton Name="rb_search" Label="Search" Margin="0,20,0,0">
<Button.Template>
<ControlTemplate>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Images/rb_add4.png" Width="43" Height="43"></Image>
</Border>
</ControlTemplate>
</Button.Template>
</my:RibbonButton>
<my:RibbonButton Name="rb_print" Label="Print" Margin="0,20,0,0">
<Button.Template>
<ControlTemplate>
<Border VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Images/rb_add4.png" Width="43" Height="43"></Image>
</Border>
</ControlTemplate>
</Button.Template>
</my:RibbonButton>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Label">
<Setter Property="FontFamily" Value="Lubalin" />
<Setter Property="Foreground" Value="#338e8f" />
<Setter Property="FontSize" Value="18" />
<!--<Setter Property="Opacity" Value="0.2" />-->
</Style>
</pbwpf:Window.Resources>
<Grid>
<Border BorderBrush="#9ac3cb" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="55" />
<RowDefinition Height="745" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="55" />
<ColumnDefinition Width="969" />
</Grid.ColumnDefinitions>
<Border Name="bms" Grid.Row="0" Grid.Column="0" Background="#3fb5af">
<Label Name="lbl_bms" Content="BMS " VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<Border Name="header" Grid.Row="0" Grid.Column="1" Background="#ecf0f1" BorderBrush="Gray" BorderThickness="0,0,0,1"></Border>
<Border Name="btn_clse" Grid.Row="0" Grid.Column="1" Background="#ecf0f1" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="0,0,0,1">
<Image Source="Images/c_lose.png" Height="40" Width="40"></Image>
</Border>
<pbwpf:StaticText Grid.Row="0" Grid.Column="1" Height="21" HorizontalAlignment="Left" Margin="10,20,0,0" Name="st_dte" Text="Main Form" TextSize="-10" VerticalAlignment="Top" Width="88" PBHeight="84" PBWidth="402" X="46" Y="80" />
<Border Name="sidebar" Grid.Row="1" Grid.Column="0" Background="#171e24">
<StackPanel VerticalAlignment="Top" Orientation="Vertical" HorizontalAlignment="Left">
<my:Ribbon Height="745" Name="ribbon1" TabIndex="10" Width="55">
<my:Ribbon.ApplicationMenu>
<my:RibbonApplicationMenu Visibility="Collapsed" />
</my:Ribbon.ApplicationMenu>
</my:Ribbon>
</StackPanel>
</Border>
<Border Grid.Row="1" Grid.Column="1">
<!--<pbwpf:MDIClient Name="mdi1" Background="white"></pbwpf:MDIClient>-->
</Border>
</Grid>
</Border>
</Grid>
Here is the screenshot of the style I want to achieve.
Solution
I attempted to replicate the hover animation from the link mentioned in the question via WPF
here is a working sample for the same using style, triggers & animation
<StackPanel Orientation="Horizontal"
Background="#3851bc">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin"
Value="20" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontSize"
Value="20" />
<Setter Property="FontWeight"
Value="SemiBold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent"
Width="100"
Height="100"
CornerRadius="50">
<Grid>
<Border Background="#22ffffff"
CornerRadius="50"
x:Name="content">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,-2,0,0" />
</Border>
<Ellipse x:Name="ring"
StrokeThickness="15"
Opacity="0"
IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent"
Offset="0.83" />
<GradientStop Color="#55ffffff"
Offset="0.84" />
<GradientStop Color="Transparent"
Offset="0.85" />
<GradientStop Color="Transparent"
Offset=".93" />
<GradientStop Color="#55ffffff"
Offset=".97" />
<GradientStop Color="#55ffffff"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Stroke>
<Ellipse.RenderTransform>
<ScaleTransform CenterX="50"
CenterY="50"
x:Name="ringScale" />
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter TargetName="content"
Property="RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50"
CenterY="50"
ScaleX=".9"
ScaleY=".9" />
</Setter.Value>
</Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:2">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ring"
To="1"
Duration="0:0:0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ring"
From="1"
To="0" />
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="ringScale"
From="1"
To="1.5" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="ringScale"
From="1"
To="1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Content="A" />
<Button Content="B" />
<Button Content="C" />
<Button Content="D" />
<Button Content="E" />
<Button Content="F" />
</StackPanel>
result
Example above is based on standard Button but it is applicable any control in WPF. Since I did not have the WPF Ribbon Button so I could not try on the same. you may adjust the template/animations as desired.
RibbonButton example
<Ribbon>
<Ribbon.Resources>
<Style TargetType="RibbonButton">
<Style.Resources>
<sys:Double x:Key="buttonSize">40</sys:Double>
<CornerRadius x:Key="buttonRadius">20</CornerRadius>
<sys:Double x:Key="scaleOffset">20</sys:Double>
</Style.Resources>
<Setter Property="Margin"
Value="10" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontSize"
Value="20" />
<Setter Property="FontWeight"
Value="SemiBold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RibbonButton">
<Border Background="Transparent"
Width="{StaticResource buttonSize}"
Height="{StaticResource buttonSize}"
CornerRadius="10">
<Grid>
<Border Background="#22ffffff"
CornerRadius="{StaticResource buttonRadius}"
x:Name="content">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,-2,0,0"
ContentSource="Label" />
</Border>
<Ellipse x:Name="ring"
StrokeThickness="15"
Opacity="0"
IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent"
Offset="0.83" />
<GradientStop Color="#55ffffff"
Offset="0.84" />
<GradientStop Color="Transparent"
Offset="0.85" />
<GradientStop Color="Transparent"
Offset=".93" />
<GradientStop Color="#55ffffff"
Offset=".97" />
<GradientStop Color="#55ffffff"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Stroke>
<Ellipse.RenderTransform>
<ScaleTransform CenterX="{StaticResource scaleOffset}"
CenterY="{StaticResource scaleOffset}"
x:Name="ringScale" />
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter TargetName="content"
Property="RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="{StaticResource scaleOffset}"
CenterY="{StaticResource scaleOffset}"
ScaleX=".9"
ScaleY=".9" />
</Setter.Value>
</Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:2">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ring"
To="1"
Duration="0:0:0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ring"
From="1"
To="0" />
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="ringScale"
From="1"
To="1.5" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="ringScale"
From="1"
To="1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Ribbon.Resources>
<RibbonTab Header="File">
<RibbonGroup Header="Group"
Background="#3851bc"
Width="auto">
<RibbonButton Label="A" />
<RibbonButton Label="B" />
<RibbonButton Label="C" />
<RibbonButton Label="D" />
<RibbonButton Label="E" />
<RibbonButton Label="F" />
</RibbonGroup>
</RibbonTab>
</Ribbon>
result
above is just an example you may adjust as per your needs
Display image in button
to see other content apart from the Label
change the following in the template
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,-2,0,0"
ContentSource="Label" />
to
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5"/>
I simply removed the ContentSource="Label" so it will use the content property to display the content and set Margin="5" to keep the image away from border
now to apply the image
change the button
<RibbonButton Label="B" />
to
<RibbonButton>
<Image Source="image.jpg" />
</RibbonButton>
so the image is now set as content and template will display it accordingly, you can set any content as desire, it can be text, image or any other element you may desire.