How to use wpf expender alignment

Question

I am trying to create a WPF window to have a simple expander to extend the datagrid when the user clicks on the More expander button. When the user wants to hide the datagrid, user just has to clik on the Less expander button.

I am also using dock panel to separate header, left, right and footer.

The problems are :

1. I want to have the less button to be in center before the user click on the more expander button. When the user clicks on the more expander button, the less button will be pushed to the left, to show the datagrid on the right.
2. How do I change the name of the expander when its closed and open. Can I do it at the xaml level?

Below is the xaml code:

<Window x:Class="M.SalesWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SalesWindow" Height="300" Width="300">
    <DockPanel>

        <StackPanel DockPanel.Dock="Top">
            <Label FontSize="28" Content="Sales">
            </Label>
        </StackPanel>

        <StackPanel DockPanel.Dock="Left" Width="auto" HorizontalAlignment="Center">
            <Label FontSize="15" Content="Enter Amount" Height="26" Width="168" />
            <Separator Width="168" />
        </StackPanel>

        <StackPanel DockPanel.Dock="Right">
            <Expander ExpandDirection="Left" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                <Expander.Header>
                    <TextBlock Text="More">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                    </TextBlock>
                </Expander.Header>
                <Expander.Content>
                    <StackPanel>
                        <DataGrid ItemsSource="{Binding Products}">

                        </DataGrid>
                    </StackPanel>
                </Expander.Content>
            </Expander>
        </StackPanel>

    </DockPanel>
</Window>

Thank you.

Answer 1

Replace your code with the below code and see the magic. This will also solve your problem of alignment as per your requirement. I have removed the DockPanel as you can achieve the similar result with this piece of code.

<StackPanel>
    <StackPanel>
        <Label FontSize="28" Content="Sales">
        </Label>
    </StackPanel>

    <Grid>
        <Grid.ColumnDefinitions>                
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" HorizontalAlignment="Center">
            <Label FontSize="15" Content="Enter Amount" Height="26" Width="168" />
            <Separator Width="168" />
        </StackPanel>

         <Expander Grid.Column="1" ExpandDirection="Left" HorizontalAlignment="Right" VerticalAlignment="Stretch">
            <Expander.Style>
                <Style TargetType="Expander">
                    <Setter Property="IsExpanded" Value="False" />
                    <Setter Property="Header">
                        <Setter.Value>
                            <TextBlock Text="Less">
                                <TextBlock.LayoutTransform>
                                    <RotateTransform Angle="-90"/>
                                </TextBlock.LayoutTransform>
                            </TextBlock>
                        </Setter.Value>
                    </Setter>

                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsExpanded,RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Header">
                                <Setter.Value>
                                    <TextBlock Text="More">
                                        <TextBlock.LayoutTransform>
                                            <RotateTransform Angle="-90"/>
                                        </TextBlock.LayoutTransform>
                                    </TextBlock>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Expander.Style>
            <Expander.Content>
                <StackPanel>
                    <DataGrid ItemsSource="{Binding Products}">

                    </DataGrid>
                </StackPanel>
            </Expander.Content>
        </Expander>

    </Grid>
</StackPanel>

The trick lies under the following lines of code.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>