Not able to view controls in a custom expander in WPF

Question

I have created a custom toggle button and custom expander. Everything seems to be working fine accept I am not able to view the controls that I have added to the expander.

Here is my custom resource:

<ControlTemplate
    x:Key="CustomToggleButton"
    TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="45"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image
                x:Name="ExpanderImage"
                Source="pack://application:,,,/Images/plus.png"
                Visibility="Visible"
                HorizontalAlignment="Left"
                Grid.Column="0"/>
            <Label
                Grid.Column="1"
                Width="160.5"
                Height="45"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center">
                <ContentPresenter/>                 
            </Label>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="ExpanderImage" Property="Source" Value="pack://application:,,,/Images/minus.png"/>
            </Trigger>
        </ControlTemplate.Triggers> 
</ControlTemplate>
<Style 
    x:Key="CustomExpander"
    TargetType="Expander">
    <Setter Property="FontFamily" Value="Consolas"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Expander">                 
                <Border
                    x:Name="ExpanderOuterBorder"
                    CornerRadius="0"
                    BorderThickness="1">
                    <Border.BorderBrush>
                        <SolidColorBrush x:Name="ExpanderBorderColor" Color="LightBlue"/>
                    </Border.BorderBrush>
                    <Border.Background>
                        <SolidColorBrush x:Name="ExpanderBackgroundColor" Color="White"/>
                    </Border.Background>
                    <Grid>
                        <ToggleButton
                            OverridesDefaultStyle="True"
                            Template="{StaticResource CustomToggleButton}"
                            IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            Grid.Column="0">
                            <ToggleButton.Content>
                                <ContentPresenter ContentSource="Header"/>
                            </ToggleButton.Content> 
                        </ToggleButton>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="ExpanderBackgroundColor"
                                    Storyboard.TargetProperty="Color"
                                    To="LightBlue"
                                    Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="ExpanderBackgroundColor"
                                    Storyboard.TargetProperty="Color"
                                    To="White"
                                    Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>   
</Style>

Here is the code in the main Window, I used bogus controls:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MinWidth="10"/>
        <ColumnDefinition Width="2"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ScrollViewer
        Grid.Row="1"
        Grid.Column="0"
        VerticalScrollBarVisibility="Auto"
        HorizontalScrollBarVisibility="Auto">           
        <Grid Background="White">
            <Expander
                VerticalAlignment="Top"
                Height="45"
                Width="205.5"
                Style="{StaticResource CustomExpander}"
                Header="Transactions" 
                IsExpanded="True">
                <Grid>
                    <Label Foreground="Black">Testing</Label>
                    <Button 
                        x:Name="AddTransactionButton" 
                        Content="Add Transaction" 
                        Height="100" 
                        Width="75"/>
                </Grid>                 
            </Expander>
        </Grid>             
    </ScrollViewer>
    <GridSplitter
        Grid.Row="1"
        Grid.Column="1" 
        HorizontalAlignment="Left"
        VerticalAlignment="Stretch" 
        Width="2"/>             
</Grid>

Here is the picture, I am not able to see the label and button I have added to the expander:

Answer 1

The Template in your "CustomExpander" is incomplete. You haven't placed the ContentPresenter for the actual content nor the trigger to control it. Please take a look at this and note the new grid with the "ContentRow" RowDefinition with Height="0" and the new trigger to expand it:

<Setter Property="Template">
<Setter.Value>
    <ControlTemplate TargetType="Expander">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Name="ContentRow" Height="0"/>
            </Grid.RowDefinitions>
            <Border x:Name="ExpanderOuterBorder"
                  CornerRadius="0"
                  BorderThickness="1">
                <Border.BorderBrush>
                    <SolidColorBrush x:Name="ExpanderBorderColor" Color="LightBlue"/>
                </Border.BorderBrush>
                <Border.Background>
                    <SolidColorBrush x:Name="ExpanderBackgroundColor" Color="White"/>
                </Border.Background>
                <Grid>
                    <ToggleButton
                          OverridesDefaultStyle="True"
                          Template="{StaticResource CustomToggleButton}"
                          IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                          Grid.Column="0">
                        <ToggleButton.Content>
                            <ContentPresenter ContentSource="Header"/>
                        </ToggleButton.Content>
                    </ToggleButton>
                </Grid>
            </Border>
            <Border Name="Content" 
                      Grid.Row="1">
                <ContentPresenter/>
            </Border>
        </Grid>

        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                                Storyboard.TargetName="ExpanderBackgroundColor"
                                Storyboard.TargetProperty="Color"
                                To="LightBlue"
                                Duration="0:0:0.1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                                Storyboard.TargetName="ExpanderBackgroundColor"
                                Storyboard.TargetProperty="Color"
                                To="White"
                                Duration="0:0:0.1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

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