Mahapps Metro Controls:Tile Background Image

Question

I want to create with Mahapps.Metro a cool Windows 8 look. I used the <Controls:Tile/> elements. Here is my wpf Code:

        <Controls:Tile Title="Artikel einstellen" TiltFactor="2" Grid.Column="0" Grid.Row="0" Width="300" Height="150">
            <Controls:Tile.Background>
                <VisualBrush Visual="{StaticResource appbar_add}" />
            </Controls:Tile.Background>
        </Controls:Tile>
        <Controls:Tile Title="Artikel verkauft" TiltFactor="2" Grid.Column="1" Grid.Row="0" Width="300" Height="150"/>
        <Controls:Tile Title="Artikel bezahlt" TiltFactor="2" Grid.Column="0" Grid.Row="1" Width="300" Height="150"/>
        <Controls:Tile Title="Artikel entfernen" TiltFactor="2" Grid.Column="1" Grid.Row="1" Width="300" Height="150"/>

Now I get this result:

But I want something like this:

I downloaded the Icons & Resource Package of MahApps.Metro & included them in the app.xaml file with this code:

<ResourceDictionary Source="/Resources/Icons.xaml" />

Thanks for you help!

Answer 1

I found the problem. I have to create a <Rectangle/> inside the <Tile/> like this:

<Controls:Tile Title="Artikel einstellen" TiltFactor="2" Grid.Column="0" Grid.Row="1" Width="300" Height="150">
            <Rectangle Width="50" Height="50">
                <Rectangle.Fill>
                    <VisualBrush Visual="{StaticResource appbar_add}" />
                </Rectangle.Fill>
            </Rectangle>
        </Controls:Tile>

Answer 2

MahApps.Metro.IconPacks require less code and has more icons

<Controls:Tile Width="300" Height="150" Grid.Column="0" Grid.Row="1" Title="Hello!">
    <Grid>
        <iconPacks:PackIconFontAwesome Kind="FlagCheckeredSolid" Foreground="#FFFFFF" Height="50" Width="50"/>
    </Grid>
</Controls:Tile>

Don't forget to call the namespace

xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"