Disable effect when the cursor is on top of a button

[waylaa]

I am trying to design a titlebar for my application but i do not know how to disable this effect on buttons that appears when a cursor is on top of them.

The effect that i want to remove:

Here is the xaml for the buttons responsible for minimizing and closing the window:

<Button Grid.Column="2"
	       RenderOptions.EdgeMode="Aliased"
               WindowChrome.IsHitTestVisibleInChrome="True"
               Style="{DynamicResource MaterialDesignIconButton}"
               x:Name="MinimizeWindow">

    <materialDesign:PackIcon Kind="WindowMinimize" />
</Button>

<Button Grid.Column="4"
	       RenderOptions.EdgeMode="Aliased"
               WindowChrome.IsHitTestVisibleInChrome="True"
               Style="{DynamicResource MaterialDesignIconButton}"
               x:Name="CloseWindow">

    <materialDesign:PackIcon Kind="WindowClose" />
</Button>

[Keboo]

At present there is not a great way to do it, however you can work around it by doing the following.

1. Set the Foreground on the Button to Transparent this will effectively hide the mouse over effect, but also hide your content.
2. To make the pack icon show up, set is Foreground property to {DynamicResource PrimaryHueMidBrush}
3. (Optionally) if you want to disable the click animation, you can also set materialDesign:RippleAssist.IsDisabled="True" on the Button.

Something like this:

<Button
    Style="{StaticResource MaterialDesignIconButton}"
    ToolTip="MaterialDesignIconButton"
    Foreground="Transparent"
    materialDesign:RippleAssist.IsDisabled="True"
    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
    <materialDesign:PackIcon Kind="Play" Foreground="{DynamicResource PrimaryHueMidBrush}"/>
</Button>

[waylaa]

That worked. Thanks!

[ElieTaillard]

I suggest you to use MaterialDesignFlatButton instead of MaterialDesignIconButton. I think it's more convenient for the user to have a bigger area for clicking.
Also, if you don't want to bother with making your own TitleBar, there is a compatible librairy with MaterialDesignInXaml that provides custom windows : https://github.com/MahApps/MahApps.Metro

[waylaa]

The thing is that mahapps requires (i think) to use MetroWindow while my project is using ReactiveWindow because of ReactiveUI and I don't know how to make those 2 libraries work together. Nonetheless, my titlebar implementation is simple so I don't think i need to use an extra library, at least for the specific project. Anyway, thanks for the info!