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!

score 1 · Answer 1 · answered Apr 22 '18 at 06:04

1

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"

answered Apr 22 '18 at 06:04

Morlo Mbakop

3,518
20
21

1

MahApps.Metro.IconPacks takes a lot of space, has a lot of excess, and slows down the loading of the application. If you use 5-10 icons, it is easier to place them in your own xaml dictionary. – NewView Jan 05 '19 at 16:01

score 0 · Answer 2 · answered Aug 28 '15 at 19:45

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>

Mahapps Metro Controls:Tile Background Image

2 Answers2