Custom button with property as StaticResource

Question

I am trying to achieve the following thing: use an svg image into a custom button.

In order to do this I created a Custom button:

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

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
         DependencyProperty.Register("Text", typeof(string), typeof(MainButton),
             new UIPropertyMetadata(""));

    public object Image
    {
        get { return (object)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.Register("Image", typeof(object), typeof(MainButton),
            new UIPropertyMetadata(""));
}

I took a svg file, opened it in inkscape and saved it as xaml file.

I opened Themes.xaml and added the created xaml image as a ControlTemplate

<ControlTemplate x:Key="Home">
    <Viewbox Stretch="Uniform">
        <Canvas .....
        </Canvas>
    </Viewbox>
</ControlTemplate>

And the button style is:

Style TargetType="{x:Type local:MainButton}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:MainButton}">
          <Canvas x:Name="sp" Width="80" 
                    Height="80">

            <StackPanel Canvas.Top="12"
                  Canvas.Left="0"
                  Canvas.ZIndex="2"
                  Width="80">

                <ContentControl x:Name="Img" Template="{StaticResource Home}" />

            </StackPanel>

            <StackPanel x:Name="spText" Canvas.Top="45"
                           Canvas.Left="1" 
                           Canvas.ZIndex="1"
                           Width="80">

                <TextBlock x:Name="Txt" Text="{Binding Path=(local:MainButton.Text),
                                RelativeSource ={RelativeSource FindAncestor,
                                AncestorType ={x:Type Button}}}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Foreground="White"
                            FontSize="14"/>
            </StackPanel>
...

As you can see I have hardcoded the StaticResource name <ContentControl x:Name="Img" Template="{StaticResource Home}" />

I want to be able to have a binding with property Image on this Template, something like

<ContentControl x:Name="Img" Template="{StaticResource {???Binding Image???}}" />

So that I can set the Image property of the button with the name of the StaticResource I want.

For example, having beside "Home" image, another one "Back" I would have two buttons in MainWindow declared like this:

<MyControls:MainButton Text="Go Home!" Image="Home" />
<MyControls:MainButton Text="Go Back!" Image="Back" />

Any advice is kindly taken. Thank you for your time.

Answer 1

You can achieve the same result without creating a custom button. For example, in the following code, I created an image into the grid resource and then I use it inside the button's content.

<Grid>
    <Grid.Resources>
        <DrawingImage x:Key="Home">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0,20L 30,20L 30,40L 0,40 Z ">
                            <GeometryDrawing.Pen>
                                <Pen Thickness="2" LineJoin="Round" Brush="#FF000000"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Grid.Resources>

    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="{StaticResource ResourceKey=Home}" />
            <TextBlock Text="Hello!" />
        </StackPanel>
    </Button>
</Grid>

To add more images, you can simply add another DrawingImage into the grid resource and then use it in the same way into another button.