Xaser
Xaser

Reputation: 2146

Binding to TemplatedParent by two levels

I'm sure this has been solved before but I can't find a proper solution right know.. Probably I just don't know the terms I'm searching for.

Assuming I have this Custom Control Template

<Style x:Key="ColorPicker" TargetType="{x:Type local:ColorPicker}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ColorPicker}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Thumb Width="30" Height="30" Canvas.Left="0" Canvas.Top="0">
                        <Thumb.Style>
                            <Style TargetType="Thumb">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate>
                                            <Ellipse Fill="{TemplateBinding SelectedColor}" Width="30" Height="30" Stroke="Black" StrokeThickness="1" />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Thumb.Style>
                    </Thumb>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

where SelectedColor is a Property of ColorPicker. In the sample above, template binding would look for SelectedColor in the template parent of type Thumb, however how can i get a binding to the second level template parent?

Upvotes: 4

Views: 2642

Answers (1)

St&#237;gandr
St&#237;gandr

Reputation: 2902

Fill="{Path=SelectedColor, RelativeSource={RelativeSource FindAncestor, AncestorType={local:ColorPicker}}}"

In your ColorPicker style, this will traverse up to the ColorPickers property and not the one on Thumb. I generally find this to be a far safer binding, and hardly ever use TemplateBinding. Been burned so many times in customcontrols using TemplateBinding!

Anyways full code :)

<Style x:Key="ColorPicker" TargetType="{x:Type local:ColorPicker}">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:ColorPicker}">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Thumb Width="30" Height="30" Canvas.Left="0" Canvas.Top="0">
                    <Thumb.Style>
                        <Style TargetType="Thumb">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Ellipse Fill="{Path=SelectedColor.Color, RelativeSource={RelativeSource FindAncestor, AncestorType={local:ColorPicker}}}" Width="30" Height="30" Stroke="Black" StrokeThickness="1" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Thumb.Style>
                </Thumb>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

WPF Cheatsheet is a compact list of all types of bindings, very handy!

Cheers,

Stian

Upvotes: 6

Related Questions