WPF Ribbon Buttons Glowing Effects when Mouse Over

Question

I'm trying to create a ribbon menu with a glowing effects when hover. Does it possible in WPF Ribbon Button? like this http://tympanus.net/Development/IconHoverEffects/#set-8

If yes does anyone knows how? Thank you.

Here's 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="#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>

Here is the screenshot of the style I want to achieve.

screenshot

pushpraj · Accepted Answer · 2014-09-05T02:58:15.263

I attempted to replicate the hover animation from the link mentioned in the question via WPF

here is a working sample for the same using style, triggers & animation

<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>

result

Example above is based on standard Button but it is applicable any control in WPF. Since I did not have the WPF Ribbon Button so I could not try on the same. you may adjust the template/animations as desired.

RibbonButton example

<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>

result

above is just an example you may adjust as per your needs

Display image in button

to see other content apart from the Label

change the following in the template

    <ContentPresenter HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Margin="0,-2,0,0"
                      ContentSource="Label" />

to

    <ContentPresenter HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Margin="5"/>

I simply removed the ContentSource="Label" so it will use the content property to display the content and set Margin="5" to keep the image away from border

now to apply the image

change the button

    <RibbonButton Label="B" />

to

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

so the image is now set as content and template will display it accordingly, you can set any content as desire, it can be text, image or any other element you may desire.

Hi! another question. Is the effect possible in WPF Ribbon? Thank you! — x'tian, Sep 03 '14 at 07:57
Yes, it is indeed possible. Could you give me a link to the library you are using, may I give a try on the same. Meanwhile you may change the target type of the style to ribbon button and see if it is as desired, you may adjust the template as needed. — pushpraj, Sep 03 '14 at 11:51
here is the link of the library I was using for my ribbon. kindly proceed to the bottom of the page and you'll see the download link. http://msdn.microsoft.com/en-us/library/ff799534.aspx .. Thank you in advance. I try to do it but it seems that the effect is a bit different from what you gave to me. Thank you. — x'tian, Sep 04 '14 at 01:53
Hi @pushpraj. the 40 is throwing an error. how could I fix that? thanks. — x'tian, Sep 04 '14 at 08:02
my apologies for not including the namespace, `sys:` refers to `System` so you may add `xmlns:sys="clr-namespace:System;assembly=mscorlib"` to your window element. As I was to make the button size smaller then previous template so I thought if I can keep these values at one single place for easy modification. — pushpraj, Sep 04 '14 at 13:13
Yes i guess it was the library source code that throws error. It's now working! Your great dude. Thank you for the big help! I'd upvotes your post in return. Thank you again! Have a great day! =) — x'tian, Sep 05 '14 at 00:52
another question. How can i add image on the center of the button? I try to do it using but the button became a normal image and all the effects are missing. — x'tian, Sep 05 '14 at 01:47
`ContentPresenter` is what is displaying the `Label` content, you may adjust the same. apart from ContentPresenter everything is needed for the hover effect. You may perhaps want to show a different image on different button. As RibbonButton also supports `Content` property, you may leverage the same. If you could share an idea (perhaps screenshot) for the desired appearance of the button, I may help you to achieve the same. — pushpraj, Sep 05 '14 at 02:00
I edited my question and posted a screenshot above. The sidebar is the ribbon I customize and the circle around the image is the button. That's the appearance I want to do on my buttons without losing the effects you tough me. Thanks again. =) — x'tian, Sep 05 '14 at 02:35
I have updated the same, but as a suggestion I can say that if you desire to see as in screenshot, Ribbon may be an overkill, you may simplify it to basis elements like stackpanel and buttons for easy changes. — pushpraj, Sep 05 '14 at 03:02
thanks for the advice. I edited my code and it goes right from what I wanted. thank you so much!! =)) — x'tian, Sep 05 '14 at 03:11
That's great! You can always reach me through my profile. Happy coding :) — pushpraj, Sep 05 '14 at 08:32
hi @pushpraj I still have a question. Can you help me? This time i wanted to create a rectangle/box button that have a image and text inside(the button) with the same glowing hover effects. thank you =) — x'tian, Sep 08 '14 at 05:59
@x'tian to make it rectangle/box you can remove all the `CornerRadius` from the Borders in the template and change `Ellipse` to `Rectangle`. that should be all you need to make this template for rectangle/box with the same effect. if you find it difficult at some point, do please post a new question with the relevant details. I'll be happy to answer the same too. — pushpraj, Sep 08 '14 at 06:10
alright thanks dude. I will try the solution you gave first then if ever I find it difficult to do I'll let you know. =) Thank you again. — x'tian, Sep 08 '14 at 06:14
I tried what you said but I wasn't able to make it work. So I decided to post another question as what you said. But I make it simple only the flatted style button with image and text inside even when you hover it. kindly check my new posted question so that you understand what i say. again thank you =) — x'tian, Sep 08 '14 at 08:15
good day! I have a question. What if I wanted to change the image every time I hover it. But the glowing effects still remain. Is that possible? Thank you. — x'tian, Sep 09 '14 at 02:21
it is indeed possible, just to avoid confusions in this question could you please post a new question for the same? — pushpraj, Sep 09 '14 at 03:53
Hi. I posted another question. And this is my link http://stackoverflow.com/questions/25736511/wpf-ribbon-button-glowing-effects-and-changing-image-when-hover Thanks! =) — x'tian, Sep 09 '14 at 04:05

WPF Ribbon Buttons Glowing Effects when Mouse Over

1 Answers1