美好的一天。
悬停时，我有一个带有发光效果的功能区按钮。但是我想在每次悬停时都改变图像而不会失去发光效果。
任何人都可以帮我吗？
这是我到目前为止所做的。
<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>
此代码用于功能区按钮内的发光效果和图像。谢谢。
这是我更新的工作副本。每次运行我的应用程序时运行速度都很慢。我不知道如何解决这个问题。
<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>
答案 0 :(得分：1)
我确实尝试重写代码以便在悬停时交换图像。我也重构了一些代码，希望模板的目的只是显示图像和悬停动画
你可以用下面的代码替换问题中的整个代码，它将完全呈现相同的
<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只是一个示例，您可能需要提供实际的悬停图片。
尝试一下，同时我尝试准备一个给原始图像赋予阴影效果的例子
悬停时图像的着色
如果您只需要对原始图像进行着色而不是替换原始图像，则可以在上面的样式中使用此ControlTemplate
<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"边框是悬停在实际图像上的颜色，您可以根据需要进行更改。在这种情况下，您可以not require为悬停图片提供任何Tag。