locked
Trouble with Implement MouseOver Triggers RRS feed

  • Question

  • I have the following style targeting buttons, with a Triggers to handle MouseOver Events:

            <Style TargetType="Button" x:Key="styKeyButtons">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" Value="0.5"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Setter Property="Opacity" Value="0"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    The challenge that I am experiencing is that when applied, all content disappears.  Any help would be greatly appreciated.  

    Thank you,


    Robert Johnston

    Thursday, September 29, 2016 1:09 PM

Answers

  • >>The challenge that I am experiencing is that when applied, all content disappears.  Any help would be greatly appreciated. 

    That's because you have removed the ContentPresenter from your ControlTemplate. Remember that a control template defines the full appearance of a control. If you add a ContentPresenter to your template, the Content will appear when you hover the Button:

    <Style TargetType="Button" x:Key="styKeyButtons">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" Value="0.5"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Setter Property="Opacity" Value="0"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    If you want your Button to look like a normal Button with the addition of your triggers, you could right-click on a Button in design mode in Visual Studio 2012 or later and choose Edit Template->Edit a Copy to copy the default control template into your XAML markup and then add your Opacity triggers to it. Please refer to my blog post about how to change the background colour of a ComboBox for more information about this: https://blog.magnusmontin.net/2014/04/30/changing-the-background-colour-of-a-combobox-in-wpf-on-windows-8/

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Thursday, September 29, 2016 8:19 PM

All replies

  • As I said in your other post the ControlTemplate has no content so nothing will be shown.  I also provided you with an alternative that works in that post.

    Lloyd Sheen

    Thursday, September 29, 2016 2:42 PM
  • >>The challenge that I am experiencing is that when applied, all content disappears.  Any help would be greatly appreciated. 

    That's because you have removed the ContentPresenter from your ControlTemplate. Remember that a control template defines the full appearance of a control. If you add a ContentPresenter to your template, the Content will appear when you hover the Button:

    <Style TargetType="Button" x:Key="styKeyButtons">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter />
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" Value="0.5"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Setter Property="Opacity" Value="0"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    If you want your Button to look like a normal Button with the addition of your triggers, you could right-click on a Button in design mode in Visual Studio 2012 or later and choose Edit Template->Edit a Copy to copy the default control template into your XAML markup and then add your Opacity triggers to it. Please refer to my blog post about how to change the background colour of a ComboBox for more information about this: https://blog.magnusmontin.net/2014/04/30/changing-the-background-colour-of-a-combobox-in-wpf-on-windows-8/

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Thursday, September 29, 2016 8:19 PM