How to set a custom color in outlined button

[BrensNina]

-DesignMaterial3
-Primary color: Blue

In the demo, the OutlinedButton works perfect with light, mid and dark but if i need a custom color i don´t know how to do that, for example I need "Delete" button in red outlined button. My progress was set foreground and border brush red (hover works correctlyin red) but the color when is clicked is blue (my primary color). What is the correct form to set a custom color in this outlined button?

<Button Width="Auto" Content="Delete" Foreground="Red" BorderBrush="Red" Style="{StaticResource MaterialDesignOutlinedButton}"/>

Clicked

[corvinsz]

@BrensNina the "click" animation is called ripple-effect.
You can set the color of the Ripple via an attached property like so: materialDesign:RippleAssist.Feedback="Red"
So the XAML for your Button would look something like this:

<Button Width="Auto"
        materialDesign:RippleAssist.Feedback="Red"
        BorderBrush="Red"
        Content="Delete"
        Foreground="Red"
        Style="{StaticResource MaterialDesignOutlinedButton}" />

[BrensNina]

Thanks a lot! Working perfectly. Where is the docs of properties like that? I'm learning from demo so i don´t know if I missing something.

[nicolaihenriksen]

@BrensNina I am not sure there is a great deal of documentation in this repo regarding which of the standard WPF properties you can use 😞 However, for the approach I am highlighting below, there is a bit of documentation in the WIKI: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Brush-Names

@corvinsz's answer is great, I just wanted to add (for future reference) that the new theming system aimed at exposing many of these brushes in order for them to be easily overridden at the call-site.

In this particular case you can simply override a single brush, in other cases there may be more. Brushes that you override are in most cases theme-dependent brushes, so you may need to deal with toggling them on theme changes if your application supports that.

A sample XAML for doing this could look something like this:

<Button Content="DELETE"
        Style="{StaticResource MaterialDesignOutlinedButton}">
  <Button.Resources>
    <SolidColorBrush x:Key="MaterialDesign.Brush.Primary" Color="Red" />
  </Button.Resources>
</Button>

Resulting in something like this:

You can of course also pull this into your own custom style (inheriting from one of the existing MDIX styles), and then explicitly apply that style for the button(s) in question:

<!-- Place this style in a reachable resource dictionary -->
<Style x:Key="MyDeleteButtonStyle" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource MaterialDesignOutlinedButton}">
  <Style.Resources>
    <SolidColorBrush x:Key="MaterialDesign.Brush.Primary" Color="Red" />
  </Style.Resources>
</Style>

<!-- Applying custom style for the "delete" look'n'feel -->
<Button Content="DELETE"
        Style="{StaticResource MyDeleteButtonStyle}" />

Note that some of the templates apply a converter for brushes which effectively removes the alpha-channel, so in certain cases you cannot use "semi-transparent" brushes; they will be converted to fully opaque.