How to TemplateBind to BorderThickness.Top (or Bottom or Left or Right)?

Question

I wonder if it is possible to bind a structure element like BorderThickness.Top to TemplatedParent's corresponding property. I have tried

<Border Margin="0" Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}">
    <Border.BorderThickness>
        <Thickness Left="0" Right="0" Top="{TemplateBinding BorderThickness.Top}" Bottom="{TemplateBinding BorderThickness.Bottom}"/>
    </Border.BorderThickness>
</Border>

The reason i want to do this is i want Left and Right to be 0 and only Top and Bottom be bound.

Thanks in advance.

Doubloon

Answer 1

This is not possible because Thickness is a value-type - you can only create bindings on dependency properties of dependency objects.

What you could do is binding BorderThickness as normal:

<Border Margin="0" 
        Padding="{TemplateBinding Padding}" 
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource ThicknessConverter}}" />

then use a converter to return an appropriately modified Thickness:

object Convert( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )
{
    var thickness = (Thickness) value;
    return new Thickness( 0.0, thickness.Top, 0.0, thickness.Bottom );
}

You could even use ConverterParameter to specify which parts of the Thickness to clear.

Rakehell

ahaa... thank you very much 4 your quick and accurate reply... i recently learnt about dependency properties... how can i forget that?! – Doubloon

Answer 2

The solution with a converter is the right one.

In the case where you are interested only in one value, you can do this directly in the XAML without a converter. {TemplateBinding …} is only a syntactic sugar for {Binding RelativeSource={RelativeSource TemplatedParent} …} with a limited functionality.

For example some custom border:

<Button BorderBrush="Purple"
        BorderThickness="1 2 3 4"
        Content="This is a button!">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <DockPanel>
                <Rectangle DockPanel.Dock="Left"
                           Width="{Binding BorderThickness.Left, RelativeSource={RelativeSource TemplatedParent}}"
                           Fill="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
                <Rectangle DockPanel.Dock="Top"
                           Height="{Binding BorderThickness.Top, RelativeSource={RelativeSource TemplatedParent}}"
                           Fill="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
                <Rectangle DockPanel.Dock="Right"
                           Width="{Binding BorderThickness.Right, RelativeSource={RelativeSource TemplatedParent}}"
                           Fill="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
                <Rectangle DockPanel.Dock="Bottom"
                           Height="{Binding BorderThickness.Bottom, RelativeSource={RelativeSource TemplatedParent}}"
                           Fill="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
                <ContentPresenter />
            </DockPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

Montez

This does not work, because Thickness.Top is not a DependencyProperty. It results in a XAMLParseException. – Hsining