WPF功能区按钮在悬停时发光效果和更改图像 [英] WPF Ribbon Button glowing effects and changing image when hover
本文介绍了WPF功能区按钮在悬停时发光效果和更改图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
美好的一天.
我有一个在悬停时会发光的功能区按钮.但我也想在每次悬停时更改图像而不会失去发光效果.
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?
这是我目前所拥有的.
<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.
这是我更新的工作副本.每次运行我的应用程序时都运行得很慢.我不知道如何解决这个问题.
<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>
推荐答案
我确实尝试重写您的代码以在悬停时交换图像.我也重构了一些代码，希望模板的目的只是为了显示图像和悬停动画
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>
悬停图片，即 Images/new_hover.png 只是一个例子，您可能需要提供实际的悬停图片.
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
悬停时图像的着色
如果您只是需要对原始图像进行着色而不是替换原始图像，则可以使用上述样式中的此 ControlTemplate
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" 叠加层中的边框是将悬停在实际图像上的颜色，您可以根据需要更改它.在这种情况下，您可以不需要为悬停图像提供任何Tag.
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.
这篇关于WPF功能区按钮在悬停时发光效果和更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
