"VisualButton" That makes working with the XAML icons easier

[bloritsch]

Trying to get a button that uses the Mahapps.Metro.Resources icons looking right is currently a major pain. The problem is that the Rectangle that hosts the button doesn't resize and place the icon properly. The following is not only a lot to remember to get right each time, it only works if the button is large enough (18 DPU or bigger).

<Button x:Name="mybutton" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                      Fill="{Binding ElementName=mybutton, Path=Foreground}">
         <Rectangle.OpacityMask>
              <VisualBrush Visual="{StaticResource appbar_magnify_plus}" Stretch="Fill"/>
         </Rectangle.OpacityMask>
    </Rectangle>
</Button>

The only other way to make sure that the icon is sized appropriately is to set it explicitly. If you forget the HorizontalAlignment and VerticalAlignment on the Rectangle, the icon will always be 0,0 unless you set the height and width explicitly.

I'd like to simplify it a bit and just use a Controls:MetroButton or Controls:VisualButton:

• Visual = the {StaticResource appbar_magnify_plus}
• Style = enum ButtonStyle { Default, Square, Circle } (applies the appropriate style)

Placing that visual in the button is rather a pain, particularly if you want to have any sort of responsive UI where buttons scale in size depending on how much screen real-estate you have.