Question

i have he following expander toggle button style, that is visually getting closer to what I want but it does not respond properly clicks. When you click on it to expand or collapse, it does not always respond. Any ideas? TIA.

       <ControlTemplate x:Key="ExpanderToggleButton"
         TargetType="ToggleButton">
            <Canvas Width="14" Height="14">
                <Rectangle Stroke="Gray"  
                           RenderOptions.EdgeMode="Aliased" 
                           StrokeThickness="1"  Width="14" Height="14" 
                           Canvas.Left="0" Canvas.Top ="0"/>
                <Path RenderOptions.EdgeMode="Aliased" 
                          Name="ExpandPath" 
                          Stroke="Black" 
                          Margin="0" 
                          StrokeThickness="1" 
                          Data="M 5 1 L 5 9 M 1 5 L 9 5" 
                      Canvas.Left="2" Canvas.Top ="2"/>            
            </Canvas>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Data" TargetName="ExpandPath"
                              Value="M 1 5 L 9 5"/>
                </Trigger>                   
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!-- Expander style -->
        <Style TargetType="Expander">                
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Expander">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Name="ContentRow" Height="0"/>
                            </Grid.RowDefinitions>                              
                            <Border 
                                Name="Border" 
                                Grid.Row="0"                                    
                                BorderThickness="1" 
                                CornerRadius="4,4,0,0" >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="15" />
                                        <ColumnDefinition Width="*" />
                                     </Grid.ColumnDefinitions>
                                    <ToggleButton
                                        Grid.Column="0"
                                        IsChecked="{Binding Path=IsExpanded, 
                                                            Mode=TwoWay,
                                        RelativeSource={RelativeSource
                                                            TemplatedParent}}"
                                        OverridesDefaultStyle="True" 
                                        Template="{StaticResource 
                                                 ExpanderToggleButton}" />
                                    <ContentPresenter 
                                        Grid.Column="1"
                                        Margin="4" 
                                        ContentSource="Header" 
                                        RecognizesAccessKey="True" />
                                </Grid>
                            </Border>
                            <Border 
                                Name="Content" 
                                Grid.Row="1"                                    
                                BorderThickness="1,0,1,1" 
                                CornerRadius="0,0,4,4" >
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter TargetName="ContentRow" Property="Height"
                                        Value="{Binding 
                                        ElementName=Content,Path=DesiredHeight}" />
                            </Trigger>                             
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

Set the background of the Canvas in the ControlTemplate to “Transparent”:

<ControlTemplate x:Key="ExpanderToggleButton"
    TargetType="ToggleButton">

    <!-- The canvas needs a background to work properly with clicks,
         so set it to Transparent -->
    <Canvas Width="14" Height="14" Background="Transparent">
        <Rectangle Stroke="Gray"  
                    RenderOptions.EdgeMode="Aliased" 
                    StrokeThickness="1"  Width="14" Height="14" 
                    Canvas.Left="0" Canvas.Top ="0"/>
        <Path RenderOptions.EdgeMode="Aliased" 
                    Name="ExpandPath" 
                    Stroke="Black" 
                    Margin="0" 
                    StrokeThickness="1" 
                    Data="M 5 1 L 5 9 M 1 5 L 9 5" 
                Canvas.Left="2" Canvas.Top ="2"/>
    </Canvas>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Data" TargetName="ExpandPath"
                        Value="M 1 5 L 9 5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

When there is no canvas background you have to click exactly on the path (the + or the -) to get the click to register. With the canvas background you can click anywhere on the canvas.