How to Reference a Vectored Graphic in Control Binding

Question

All, I have the following resources which defines a custom CheckBox and the images to use for the checked/un-checked states.

<sys:String x:Key="Up">
    F1 M 37.8516,35.625L 34.6849,38.7917L 23.6016,50.2708L 
23.6016,39.9792L 37.8516,24.9375L 52.1016,39.9792L 52.1016,
50.2708L 41.0182,38.7917L 37.8516,35.625 Z
</sys:String>

<sys:String x:Key="Down">
    F1 M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 
37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z
</sys:String>

<Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <StackPanel Orientation="Horizontal">
                    <Path x:Name="MyPin" Width="18" Height="18" Stretch="Fill" Fill="#FF000000" 
                      Data="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                                     Path=(local:CustomCheckBoxClass.IsCheckedOnData)}" />
                    <ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0" />
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="MyPin" Property="Data"
                            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                                            Path=(local:CustomCheckBoxClass.IsCheckedOffData)}" />
                        <Setter TargetName="MyPin" Property="Fill" Value="Gray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Where this is used as follows

<StackPanel Orientation="Vertical" HorizontalAlignment="Center" Background="Beige">
    <CheckBox Height="35" 
          local:CustomCheckBoxClass.IsCheckedOnData="{StaticResource Up}"
          local:CustomCheckBoxClass.IsCheckedOffData="{StaticResource Down}"
          Style="{StaticResource styleCustomCheckBox}" 
          Content="MySolution1" />

    <CheckBox Height="35" 
          local:CustomCheckBoxClass.IsCheckedOnData="{StaticResource Up}"
          local:CustomCheckBoxClass.IsCheckedOffData="{StaticResource Down}"
          Style="{StaticResource styleCustomCheckBox}" 
          Content="MySolution2" />
</StackPanel>

I use the following DependencyPropertys to support this

public class CustomCheckBoxClass : DependencyObject
{
    public static readonly DependencyProperty IsCheckedOnDataProperty;
    public static void SetIsCheckedOnData(DependencyObject DepObject, string value)
    {
        DepObject.SetValue(IsCheckedOnDataProperty, value);
    }

    public static string GetIsCheckedOnData(DependencyObject DepObject)
    {
        return (string)DepObject.GetValue(IsCheckedOnDataProperty);
    }

    public static readonly DependencyProperty IsCheckedOffDataProperty;
    public static void SetIsCheckedOffData(DependencyObject DepObject, string value)
    {
        DepObject.SetValue(IsCheckedOffDataProperty, value);
    }

    public static string GetIsCheckedOffData(DependencyObject DepObject)
    {
        return (string)DepObject.GetValue(IsCheckedOffDataProperty);
    }

    static CustomCheckBoxClass()
    {
        PropertyMetadata MyPropertyMetadata = new PropertyMetadata(string.Empty);
        IsCheckedOnDataProperty = DependencyProperty.RegisterAttached(
            "IsCheckedOnData", typeof(string), typeof(CustomCheckBoxClass), MyPropertyMetadata);
        IsCheckedOffDataProperty = DependencyProperty.RegisterAttached(
            "IsCheckedOffData", typeof(string), typeof(CustomCheckBoxClass), MyPropertyMetadata);
    }
}

Now I want to know how to extend this so I can use more detailed vector graphics. I have some graphics created using Expression Design and I have exported these as XAML files. The mark up for one of these files is

<DrawingBrush x:Key="Layer_1" Stretch="Uniform">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <DrawingGroup.Children>
                <GeometryDrawing Brush="#FF565656" Geometry="M 107.455,171.715L 107.455,29.3347L 220.225,29.3347L 220.225,171.715L 107.455,171.715 Z "/>
                <GeometryDrawing Brush="#FF565656" Geometry="F1 M 152.5,298.345L 152.5,201.955L 175.18,201.955L 175.18,298.345L 152.5,298.345 Z "/>
                <GeometryDrawing Brush="#FFFFFFFF" Geometry="M 124.15,172.975L 124.15,48.8647L 165.73,48.8647L 165.73,172.975L 124.15,172.975 Z "/>
                <GeometryDrawing Brush="#FF565656" Geometry="F1 M 83.1999,208.885L 83.1999,162.895L 244.48,162.895L 244.48,208.885L 83.1999,208.885 Z "/>
            </DrawingGroup.Children>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

How can I include this in a resource dictionary that can be used directly in a Window/Component? I have attempted to change the DependencyProperty to provide access to DrawingBrush and I have changed the XAML to

<CheckBox Height="35" 
          local:CustomCheckBoxClass.IsCheckedOnData="{StaticResource Layer_1}"
          local:CustomCheckBoxClass.IsCheckedOffData="{StaticResource Down}"
          Style="{StaticResource styleCustomCheckBox}" 
          Content="MySolution1" />

Where I reference the relevant ResourceDictionary, but this has not worked.

Thanks for your time.

---

Edit. based on @HighCore's comment. Lets say I have the following customised Checkbox

<Style x:Key="MheckBox" 
         TargetType="{x:Type CheckBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="imageCheckBox" 
                                 Width="16" 
                                 Height="16" 
                                 Source="F:\Camus\ResourceStudio\Graphics\Images\UnPinned16.png"/>
                    <ContentPresenter VerticalAlignment="Center"/>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="imageCheckBox" 
                                      Property="Source" 
                                      Value="F:\Camus\ResourceStudio\Graphics\Images\Pinned16.png"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="imageCheckBox" 
                                      Property="Source"
                                      Value="F:\Camus\ResourceStudio\Graphics\Images\UnPinned16.png"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

which works great. How can I change the Value="F:\Camus\ResourceStudio\Graphics\Images\UnPinned16.png" to use the vector graphics I have outlined above?

Answer 1

The fact, that the in Template is used to Path and it assumes a string value in the Data parameter. But now you use DrawingBrush, usually it is used for Rectangle control.

So, we change the type of attached depending properties on the type of DrawingBrush:

public static readonly DependencyProperty IsCheckedOnDataProperty;

public static void SetIsCheckedOnData(DependencyObject DepObject, DrawingBrush value)
{
    DepObject.SetValue(IsCheckedOnDataProperty, value);
}

public static DrawingBrush GetIsCheckedOnData(DependencyObject DepObject)
{
    return (DrawingBrush)DepObject.GetValue(IsCheckedOnDataProperty);
}

static CustomCheckBoxClass()
{
    PropertyMetadata MyPropertyMetadata = new PropertyMetadata(null);

    IsCheckedOnDataProperty = DependencyProperty.RegisterAttached("IsCheckedOnData",
                                                            typeof(DrawingBrush),
                                                            typeof(CustomCheckBoxClass),
                                                            MyPropertyMetadata);
}

In Style, now change the Path on the Rectangle, like this:

<Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
    <Setter Property="FontFamily" Value="Verdana" />
    <Setter Property="FontSize" Value="14" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="16" Height="16" 
                               Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                               Path=(local:CustomCheckBoxClass.IsCheckedOnData)}" />   

                    <ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0" />
                </StackPanel>

                 <ControlTemplate.Triggers>
                     <Trigger Property="IsChecked" Value="False">
                         <Setter TargetName="MyRectangle" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                 Path=(local:CustomCheckBoxClass.IsCheckedOffData)}" />
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>