问题
Good day.
I have a ribbon button with glowing effects when hover. But I wanted also to change the image every time I hover it without losing the glowing effects.
Can anyone help me with this?
This is 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="#111111">
<my:RibbonButton Name="rb_new" Margin="0,40,0,0">
<Image Source="Images/new_.png" Height="27" Opacity="0.2" />
</my:RibbonButton>
<my:RibbonButton Name="rb_edit" Margin="0,10,0,0">
<Image Source="Images/edit_.png" Height="27" Opacity="0.2"/>
</my:RibbonButton>
<my:RibbonButton Name="rb_save" Margin="0,10,0,0">
<Image Source="Images/save_.png" Height="27" Opacity="0.2"/>
</my:RibbonButton>
<my:RibbonButton Name="rb_abort" Margin="0,10,0,0">
<Image Source="Images/cancel_.png" Height="27" Opacity="0.2"/>
</my:RibbonButton>
<my:RibbonButton Name="rb_delete" Margin="0,10,0,0">
<Image Source="Images/delete_.png" Height="27" Opacity="0.2"/>
</my:RibbonButton>
<my:RibbonButton Name="rb_search" Margin="0,10,0,0">
<Image Source="Images/search_.png" Height="27" Opacity="0.2"/>
</my:RibbonButton>
<my:RibbonButton Name="rb_print" Margin="0,10,0,0">
<Image Source="Images/print_.png" Height="27" Opacity="0.2"/>
</my:RibbonButton>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</pbwpf:Window.Resources>
<StackPanel Orientation="Vertical">
<my:Ribbon Height="720" Name="ribbon1" Width="90">
<my:Ribbon.ApplicationMenu>
<my:RibbonApplicationMenu Visibility="Collapsed"></my:RibbonApplicationMenu>
</my:Ribbon.ApplicationMenu>
<my:Ribbon.Resources>
<Style TargetType="my:RibbonButton">
<Style.Resources>
<sys:Double x:Key="buttonSize">60</sys:Double>
<CornerRadius x:Key="buttonRadius">30</CornerRadius>
<sys:Double x:Key="scaleOffset">30</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="my: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="5" />
</Border>
<Ellipse x:Name="ring" StrokeThickness="15" Opacity="0" IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.83" />
<GradientStop Color="LightGray" 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>
</my:Ribbon.Resources>
</my:Ribbon>
</StackPanel>
This code is for glowing effects and image inside the ribbon button. Thank you.
Here is my updated working copy. That running very slow every time I run my application. I don't know how I might going to resolve this issue.
<pbwpf:Window x:Class="w_main" x:ClassModifier="internal" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls" PBTitle="" PBHeight="2000" PBWidth="2500" MinBox="True" MaxBox="True" TitleBar="True" ControlMenu="True" Center="True" Resizable="True" Uid="6" Height="800" Width="1024" WindowStyle="None" AllowsTransparency="True" Background="Transparent" MenuName="m_menu" WindowType="Mdi" xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" VirtualizingStackPanel.VirtualizationMode="Recycling">
<Grid SnapsToDevicePixels="True" Height="770" Width="1009" Background="Transparent">
<Grid.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" Direction="100" ShadowDepth="1" RenderingBias="Quality" />
</Grid.Effect>
<Border Background="White" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="680" />
<ColumnDefinition Width="69" />
<ColumnDefinition Width="170" />
</Grid.ColumnDefinitions>
<Border UseLayoutRounding="True" Grid.Row="0" Grid.Column="2" Background="#2cb6d9" BorderBrush="#25a6c7" BorderThickness="1,0,1,1">
<Grid>
<Button Name="button_lgout">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter TextElement.Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<StackPanel HorizontalAlignment="Center">
<Image Source="Images/logout.png" Height="21" HorizontalAlignment="Center" Margin="0,5,0,0" />
<Label Name="lbl_lgout" Content="LOGOUT" FontSize="12" Foreground="White" FontFamily="Calibri" HorizontalAlignment="Center" Height="27" />
</StackPanel>
</Button>
</Grid>
</Border>
<Border Grid.Row="0" Grid.Column="3" Background="#2cb6d9" BorderBrush="#25a6c7" BorderThickness="0,0,0,1">
<Grid VerticalAlignment="Center">
<Image Source="Images/ics.png" UseLayoutRounding="True" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,-10,0" Height="90" />
<Label Name="lbl_usr" Content="HELLO , I S G ! " FontFamily="Calibri" FontSize="13" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,52,0" Width="98"></Label>
</Grid>
</Border>
<Border Grid.Row="0" Grid.Column="1" Background="#2cb6d9" BorderBrush="#25a6c7" BorderThickness="0,0,0,1"></Border>
<Border Grid.Row="1" Grid.Column="0" Background="#dedede" BorderBrush="#d9dcdf" BorderThickness="0,0,1,0">
<StackPanel Orientation="Vertical" Height="750" Background="#111111">
<StackPanel.Resources>
<Style TargetType="my:RibbonButton" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Style.Resources>
<sys:Double x:Key="buttonSize">60</sys:Double>
<CornerRadius x:Key="buttonRadius">30</CornerRadius>
<sys:Double x:Key="scaleOffset">30</sys:Double>
</Style.Resources>
<Setter Property="Margin" Value="0,10,0,0" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="my:RibbonButton">
<Border Background="Transparent" Width="{StaticResource buttonSize}" Height="{StaticResource buttonSize}" CornerRadius="{StaticResource buttonRadius}">
<Grid>
<Border Background="#22ffffff" CornerRadius="{StaticResource buttonRadius}" x:Name="content">
<Image Height="27" x:Name="image" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"></Image>
</Border>
<Ellipse x:Name="ring" StrokeThickness="15" Opacity="0" IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.83" />
<GradientStop Color="LightGray" 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 Property="Opacity" Value="0.2" />
<Setter TargetName="content" Property="RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="{StaticResource scaleOffset}" CenterY="{StaticResource scaleOffset}" ScaleX=".9" ScaleY=".9" />
</Setter.Value>
</Setter>
<Setter TargetName="image" Property="Source" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="1" />
<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>
<my:RibbonButton Name="rb_new" Margin="0,10,0,0" Content="Images/new_light.png" Tag="Images/new_hover.png">
</my:RibbonButton>
<my:RibbonButton Name="rb_edit" Margin="0,10,0,0" Content="Images/edit_light.png" Tag="Images/edit_.png"></my:RibbonButton>
<my:RibbonButton Name="rb_save" Margin="0,10,0,0" Content="Images/save_light.png" Tag="Images/save_.png"></my:RibbonButton>
<my:RibbonButton Name="rb_abort" Margin="0,10,0,0" Content="Images/cancel_light.png" Tag="Images/cancel_red.png"></my:RibbonButton>
<my:RibbonButton Name="rb_trash" Margin="0,10,0,0" Content="Images/delete_light.png" Tag="Images/delete_.png"></my:RibbonButton>
<my:RibbonButton Name="rb_search" Margin="0,10,0,0" Content="Images/search_light.png" Tag="Images/search_.png"></my:RibbonButton>
<my:RibbonButton Name="rb_print" Margin="0,10,0,0" Content="Images/print_light.png" Tag="Images/print_.png"></my:RibbonButton>
</StackPanel>
</Border>
<Border Grid.Row="1" Grid.Column="1">
<pbwpf:MDIClient Visibility="Visible" Name="mdi_1" Margin="0" Background="#ffffff" Width="920"></pbwpf:MDIClient>
</Border>
</Grid>
<!--<ScrollViewer VerticalScrollBarVisibility="Auto" Name="main_panel" Grid.Column="1" Width="1024" BorderThickness="0">-->
<!--</ScrollViewer>-->
</Grid>
回答1:
I did try to rewrite your code for swapping the image on hover. I did refactor some of the code as well, hoping that the purpose of the template is just to show the image and the hover animation
you may replace the whole code in the question with the code below, it will be exactly rendering the same
<StackPanel Orientation="Vertical" Height="750" Background="#111111">
<StackPanel.Resources>
<Style TargetType="Button" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Style.Resources>
<sys:Double x:Key="buttonSize">60</sys:Double>
<CornerRadius x:Key="buttonRadius">30</CornerRadius>
<sys:Double x:Key="scaleOffset">30</sys:Double>
</Style.Resources>
<Setter Property="Margin" Value="0,10,0,0" />
<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="{StaticResource buttonSize}" Height="{StaticResource buttonSize}" CornerRadius="{StaticResource buttonRadius}">
<Grid>
<Border Background="#22ffffff" CornerRadius="{StaticResource buttonRadius}" x:Name="content">
<Image Height="27" Opacity=".2" x:Name="image"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="5" Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
<Ellipse x:Name="ring" StrokeThickness="15" Opacity="0" IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.83" />
<GradientStop Color="LightGray" 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>
<Setter TargetName="image" Property="Source" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
<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 Name="rb_new" Margin="0,40,0,0"
Content="Images/new_.png" Tag="Images/new_hover.png" />
<Button Name="rb_edit"
Content="Images/edit_.png" Tag="Images/edit_hover.png" />
<Button Name="rb_save"
Content="Images/save_.png" Tag="Images/save_hover.png" />
<Button Name="rb_abort"
Content="Images/cancel_.png" Tag="Images/cancel_hover.png" />
<Button Name="rb_delete"
Content="Images/delete_.png" Tag="Images/delete_hover.png" />
<Button Name="rb_search"
Content="Images/search_.png" Tag="Images/search_hover.png" />
<Button Name="rb_print"
Content="Images/print_.png" Tag="Images/print_hover.png" />
</StackPanel>
hover images i.e. Images/new_hover.png are just an example, you may need to provide the actual hover images.
give it a try, meanwhile I try to prepare an example of giving the shading effect to original image
Colorization of image on hover
if you simply need to colorize the original image instead of replacing the original, you may use the this ControlTemplate in above style
<ControlTemplate TargetType="Button">
<Border Background="Transparent" Width="{StaticResource buttonSize}" Height="{StaticResource buttonSize}" CornerRadius="{StaticResource buttonRadius}">
<Grid>
<Border Background="#22ffffff" CornerRadius="{StaticResource buttonRadius}" x:Name="content">
<Grid Height="27" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" >
<Image Opacity=".2" x:Name="image"
Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border Background="Red" Opacity=".2" x:Name="overlay" Visibility="Hidden">
<Border.OpacityMask>
<ImageBrush ImageSource="{Binding Source,ElementName=image}"/>
</Border.OpacityMask>
</Border>
</Grid>
</Border>
<Ellipse x:Name="ring" StrokeThickness="15" Opacity="0" IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.83" />
<GradientStop Color="LightGray" 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>
<Setter TargetName="overlay" Property="Visibility" Value="Visible"/>
<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>
Background="Red" in the overlay Border is the color which will be hovering the actual image, you may change it as desired. in this case you may not require to provide any Tag for hover image.
来源：https://stackoverflow.com/questions/25736511/wpf-ribbon-button-glowing-effects-and-changing-image-when-hover