Metro Circle Button Background

Question

I am using Button with MetroCircleButtonStyle with MetroUI in WPF. How can I change the background of this Button?

Code:

<Button Background="Green" 
        Name="button2"
        Style="{DynamicResource MetroCircleButtonStyle}" 
        Width="50" Height="50" />

Currently the button look like this but i want the one on the right:

Answer 1

If you get the Git-Source for MahApps.Metro, It has a few demo targets that show you the normal usage of almost all their controls.

In MetroDemo target under MainWindow.xaml their usage of MetroCircleButtonStyle looks like:

<Button Width="55"
        Height="55"
        VerticalAlignment="Top"
        Style="{DynamicResource MetroCircleButtonStyle}">
  <Rectangle Width="20"
              Height="20">
    <Rectangle.Fill>
      <VisualBrush Stretch="Fill"
                    Visual="{StaticResource appbar_city}" />
    </Rectangle.Fill>
  </Rectangle>

</Button>

In your case, you'd prolly want the "appbar_add" resource

<Button Width="55"
        Height="55"
        VerticalAlignment="Top"
        Style="{DynamicResource MetroCircleButtonStyle}">
  <Rectangle Width="20"
              Height="20">
    <Rectangle.Fill>
      <VisualBrush Stretch="Fill"
                    Visual="{StaticResource appbar_add}" />
    </Rectangle.Fill>
  </Rectangle>
</Button>

Note you need to add the ResourceDictionary containing the Canvas's for this. It can also be got from NuGet Packages (MahApps.Metro.Resources).

Concept is pretty much apply the Canvas path of your choosing(which you get quite a few of as listed in the docs) as the VisualBrush and you should be sorted.