Search code examples
c#xamluwpwin-universal-appwindows-10-universal

How to change reveal effect color in button in UWP?


enter image description here

In my screenshot above, I would like to change the Gray highlight color in the above image to another color. Would anyone know how to do this? This is a Button control in UWP.


Solution

  • You can modify the style of the button.

    Use Visual Studio templates for quick editing:

    1. Right click on the button control in your xaml design window.
    2. Select Edit Template ->Edit a Copy... .
    3. Select the location where the resource is stored. (it is recommended to use Resource Dictionary)
    4. Edit the style that needs to be modified.

    Modify the following parts. ContentPresenter.BorderBrush

    <VisualState x:Name="PointerOver">
    <VisualState.Setters>
        <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
        <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}"/>
        <Setter Target="ContentPresenter.BorderBrush" Value="#FFFFFFFF"/>
    ...
    <VisualState x:Name="Pressed">
    <VisualState.Setters>
        <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
        <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPressed}"/>
        <Setter Target="ContentPresenter.BorderBrush" Value="#4D0087FF"/>
    ...
    

    and refer to this style in your button.

     <Button Style="{StaticResource YourButtonStyle}".../>