Default ToggleButton of Expander in ControlTemplate

Question

Expander should be the HeaderText on the left and the ToggleButton on right side.

I try to set the ToggleButton to the default style, without to create a new completly ControlTemplate for it.

Can someone help?

<ControlTemplate TargetType="Expander" x:Key="ExpanderControlx">
    <Grid Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Name="ContentRow" Height="0"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Grid.Column="1" 
                              IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                              OverridesDefaultStyle="True" 
                              Template="{StaticResource {x:Type ToggleButton}}"
                              />
                <TextBlock  Grid.Column="0" Eddie.TextFormat="Header1" Text="{TemplateBinding Header}" HorizontalAlignment="Left" />
            </Grid>
        </Border>
        <Border Grid.Row="1" Name="ContentText" >
            <StackPanel>
                <ContentPresenter/>
            </StackPanel>
        </Border>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsExpanded" Value="True">
            <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=ContentText, Path=Height}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="controls:ExpanderControl">
    <Setter Property="Template" Value="{StaticResource  ExpanderControlx}" />
</Style>

I try to set the Template of the ToggleButton to the Static Resource of ToggleButton, but I got an error. — Marc94
How does the ToggleButton currently look like and how do you expect it to look? — mm8
So you want the whole row to be a Toggle button but have the visual for the Toggle just be on the right hand side? It's unclear what you're asking, sounds like a quick template though. — Chris W.
The Togglebutton should look like the default button of an normal extender. Only the field of the upper rights side should have the normal extender button. If i delete in the code the row of allocation to the override template of the togglebutton, it show a rectangular button with no arrow. — Marc94

Sajith Sageer Sajith Sageer · Accepted Answer · 2018-08-10T08:52:53

From the comments I think you are looking for an Expander whose header is on the left and arrow button (toggle) on the right.

If so, you could use the Expander from Material Design toolkit linked here.

You could also explore more of the Material Design toolkit here.

Default ToggleButton of Expander in ControlTemplate

1 Answers