鼠标悬停时 WPF 功能区按钮发光效果答案

【问题标题】：WPF Ribbon Buttons Glowing Effects when Mouse Over鼠标悬停时 WPF 功能区按钮发光效果
【发布时间】：2014-09-05 10:58:15
【问题描述】：

我正在尝试创建一个在悬停时具有发光效果的功能区菜单。在 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>

这是我想要实现的样式的截图。

【问题讨论】：

标签： wpf wpf-controls ribbon-control

【解决方案1】：

我试图通过 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"，因此它将使用 content 属性来显示内容并设置Margin="5" 以使图像远离边框

现在应用图像

更改按钮

    <RibbonButton Label="B" />

到

    <RibbonButton>
        <Image Source="image.jpg" />
    </RibbonButton>

所以图像现在被设置为内容，模板将相应地显示它，您可以根据需要设置任何内容，它可以是文本、图像或您可能需要的任何其他元素。

【讨论】：

是的，确实有可能。你能给我一个你正在使用的图书馆的链接吗，我可以试一试吗？同时您可以将样式的目标类型更改为功能区按钮，看看是否符合需要，您可以根据需要调整模板。
我很抱歉没有包含命名空间，sys: 指的是System，因此您可以将xmlns:sys="clr-namespace:System;assembly=mscorlib" 添加到您的窗口元素中。因为我要使按钮大小比以前的模板小，所以我想是否可以将这些值保存在一个位置以便于修改。
ContentPresenter 是显示Label 内容的内容，您可以进行相同的调整。除了 ContentPresenter 之外，悬停效果还需要一切。您可能希望在不同的按钮上显示不同的图像。由于 RibbonButton 还支持 Content 属性，您可以利用它。如果您可以就所需的按钮外观分享一个想法（可能是屏幕截图），我可以帮助您实现同样的目标。
太好了！您可以随时通过我的个人资料联系到我。快乐编码:)
好的，谢谢老兄。我会先尝试您提供的解决方案，然后如果我发现很难做到，我会告诉您。 =) 再次感谢您。