Can't get WPF TextBlock to bind to Property

Question

In my project I have a custom control which is an expander. The button's content that makes the control expand or collapse should change depending on the state. I got most of it to work but I fail at binding text to the content which I use for the button.

Here's my XAML-Code from Generic.xaml:

<ControlTemplate x:Key="PndExpanderControlVertical" TargetType="{x:Type local:PndExpanderControl}">
    <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <dx:DXExpander x:Name="expander" Grid.Column="0" FlowDirection="LeftToRight" VerticalExpand="None" HorizontalExpand="FromLeftToRight" IsExpanded="True">
                <dxlc:GroupBox x:Name="group_box" Padding="0" Header="Header"/>
            </dx:DXExpander>

            <Button Grid.Column="1" Padding="1" x:Name="expand_button">
                <Button.Style>
                    <Style TargetType="Button">
                        <Style.Triggers>
                            <!-- Button-Style, expanded -->
                            <DataTrigger Binding="{Binding IsExpanded, ElementName=expander}" Value="True">
                                <Setter Property="Content" Value="↧ ↧"/>
                                <Setter Property="LayoutTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="90"/>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                            <!-- Button-Style, collapsed -->
                            <DataTrigger Binding="{Binding IsExpanded, ElementName=expander}" Value="False">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <TextBlock>
                                            <TextBlock Text="↥ "/>
                                            <TextBlock Text="{Binding Header, ElementName=group_box}"/>
                                            <TextBlock Text=" ↥"/>
                                        </TextBlock>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="LayoutTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="90"/>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>
        </Grid>
    </Border>
</ControlTemplate>

As you can see I use a nested text block to combine the group_box's header with some arrows. However the binding of the middle text block does not work.

To be honest, I work with WPF for a while now but data binding (to the right source) is still a mystery to me. Most of the time I get it to work somehow but if it fails I've no Idea what to do. I googled a few hours and tried various thing but nothing worked for me.

Any help is appreciated.

Answer 1

You could bind to the Header of the Content of the Expander:

<TextBlock Text="↥ "/>
<TextBlock Text="{Binding Content.Header, ElementName=expander}"/>
<TextBlock Text=" ↥"/>

You cannot use an ElementName to bind directly to the GroupBox since it is not in the same name scope as the Button.

Edit:

Ok, it only works if the expander is collapsed by default.

But you could use an x:Reference to bind to the GroupBox:

<TextBlock Text="↥ "/>
<TextBlock Text="{Binding Header, Source={x:Reference group_box}}"/>
<TextBlock Text=" ↥"/>