鼠标悬停时WPF功能区按钮发光效果
我试图在悬停时创建带有发光效果的功能区菜单。 WPF功能区按钮有可能吗？像这样http://tympanus.net/Development/IconHoverEffects/#set-8
如果有，是否有人知道如何？谢谢。
这是我到目前为止所拥有的。
<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>
以下是我想要实现的风格的截图。
1 个答案:
答案 0 :(得分：3)
我尝试通过WPF从问题中提到的链接复制悬停动画
这是一个使用样式，触发器和放大器的工作示例。动画
<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>
结果
上面的示例基于标准Button，但它适用于WPF中的任何控件。由于我没有WPF Ribbon Button，所以我不能尝试相同的。您可以根据需要调整模板/动画。
RibbonButton示例
<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>
结果
以上只是您可以根据需要调整的示例
在按钮中显示图片
查看除标签之外的其他内容
更改模板中的以下内容
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,-2,0,0"
ContentSource="Label" />
到
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5"/>
我只是移除了ContentSource="Label"，因此它会使用内容属性来显示内容并设置Margin="5"以使图片远离边框
现在应用图片
更改按钮
<RibbonButton Label="B" />
到
<RibbonButton>
<Image Source="image.jpg" />
</RibbonButton>
因此图像现在设置为内容，模板将相应地显示它，您可以根据需要设置任何内容，它可以是文本，图像或您可能想要的任何其他元素。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？