How to set small expander header and widen the content in WPF?

I'm creating a custom virtual keyboard. Currently, for all punctuation, I set it on another Grid. Expander content seems can hold the punctuation view. But currently it need to set the size of the content if I want the expander content to be able to view the content inside.

How do I make to be able to have button size expander and when click, the content will be expanding to it's wider size?

How to make expander are size as below image (yellow rectangle) but when click on the expander, the content will be expand like GIF?

<Button HorizontalAlignment="Left" Height="52.25" Margin="0,238.5,0,0" VerticalAlignment="Top" Width="168.187" Background="#FF3C3C3C" FontFamily="Arial" FontSize="18" BorderBrush="#FF6E6E6E">
    <Expander Header="?!#" ExpandDirection="Up" Background="{x:Null}" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top">
        <!-- How add content grid which can be expander at full while maintaining the expander header to small size? -->
    </Expander>
</Button>

Solution

I suggest you to put the Buttons of the extended Keyboard in another Panel and control the Visibility of the Panel with a ToggleButton.

When you use an Expander (as you did) to hold the extended Keyboard this can be easily done similar to this:

<Grid Background="Gray" Height="300">
    <!-- Basic Keyboard Buttons can be placed here -->
    <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Top" Content="Put some Buttons from the BASIC Keyboard here"/>
    <!-- Button to bring the extanded Keyboard into view -->
    <ToggleButton x:Name="ExtendedKeyboardActive" HorizontalAlignment="Left" VerticalAlignment="Center" Content="?!#" Width="50"/>
    <!-- Extended Keyboard (Note: I would rather use a simple <Grid/> instead of an <Expander/> but it is up to you)-->
    <Expander VerticalAlignment="Bottom" ExpandDirection="Up" IsExpanded="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Background="LightGray">
        <Grid Height="300">
            <!-- Content of the extaned Keyboard -->
            <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Top" Content="Put some Buttons from the EXTENDED Keyboard here"/>
            <!-- Button ti hide the extended Keyboard (optional if it the 'ExtendedKeyboardActive' is not covered over by the extended Keyboard Grid) -->
            <ToggleButton IsChecked="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Width="50" HorizontalAlignment="Left" VerticalAlignment="Center" Content="ABC" />
        </Grid>
    </Expander>
</Grid>

Or you could use a PopUp, because the Expander has this Arrow-Circle-Thing which is always displayed and not really needed (Thanks @Bradley Uffner).

<Grid Background="Gray">
    <!-- Basic Keyboard Buttons can be placed here -->
    <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Bottom" Content="Put some Buttons from the BASIC Keyboard here"/>
    <!-- Button to bring the extanded Keyboard into view -->
    <ToggleButton x:Name="ExtendedKeyboardActive" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="?!#" Width="50"/>
    <!-- Extended Keyboard -->
    <Popup IsOpen="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Placement="Center" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}">
        <Grid Background="LightGray">
            <!-- Content of the extended Keyboard -->
            <Button HorizontalAlignment="Left" Margin="0,0,0,30" VerticalAlignment="Bottom" Content="Put some Buttons from the extended Keyboard here"/>
            <!-- Button to go back to the basic Keyboard -->
            <ToggleButton IsChecked="{Binding IsChecked, ElementName=ExtendedKeyboardActive}" Width="50" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="ABC" />
        </Grid>
    </Popup>
</Grid>