Create a custom control in wpf for mahapps tile

Question

I wan't to create a custom control for mahapps to make a customize tile control that have binding property for visual to make an icon inside the tile

control xaml code

<Style TargetType="{x:Type local:iTile}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:iTile}">
                <controls:Tile Title="{TemplateBinding Title}"
                               HorizontalTitleAlignment="Left"
                               HorizontalContentAlignment="Right"
                               Height="100" Width="100"
                               Margin="0"
                               VerticalContentAlignment="Top">
                    <Rectangle Fill="Black" Height="45" Width="45" Margin="0,10,8,0">
                        <Rectangle.OpacityMask>
                            <VisualBrush Visual="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}" Stretch="Uniform" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </controls:Tile>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

control csharp code

public class iTile : Tile
{
    static iTile()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(iTile), new FrameworkPropertyMetadata(typeof(iTile)));
    }

    public static readonly DependencyProperty IconProperty =
    DependencyProperty.Register("Icon", typeof(Object), typeof(iTile), new UIPropertyMetadata());

    public Object Icon
    {
        get { return GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }
}

and control use like this

<iControls:iTile Title="Some Title"
                         Icon="{iconPacks:PackIconMaterial Kind=AccountOff}"/>

but icon not shown just the title of the tile.

Answer 1

You could set the Visual property to a PackIconMaterial in your template:

<ControlTemplate TargetType="{x:Type local:iTile}">
    <controls:Tile Title="{TemplateBinding Title}"
                               HorizontalTitleAlignment="Left"
                               HorizontalContentAlignment="Right"
                               Height="100" Width="100"
                               Margin="0"
                               VerticalContentAlignment="Top">
        <Rectangle Fill="Black" Height="45" Width="45" Margin="0,10,8,0">
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Uniform">
                    <VisualBrush.Visual>
                        <iconPacks:PackIconMaterial Kind="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Rectangle.OpacityMask>
        </Rectangle>
    </controls:Tile>
</ControlTemplate>

...and then set the Icon property to an enumeration value:

<iControls:iTile Title="Some Title"
             Icon="{x:Static iconPacks:PackIconMaterialKind.AccountOff}"/>