Разделить элементы внутри DockPanel

Question

Я хочу, чтобы 4 кнопки (уведомление, принтер, три точки и кнопки светлой / темной темы) находились справа от окна, в то время как кнопка Гамбургера и текстовое поле должны оставаться слева, что оставляет нас с пустой серединой.

XAML:

  <DockPanel >
                <materialDesign:ColorZone Panel.ZIndex="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.ZIndex}"  
                                          Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth3" materialDesign:ShadowAssist.ShadowEdges="Bottom"
                                            Mode="PrimaryMid" DockPanel.Dock="Top">

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

                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>

                        </Grid.ColumnDefinitions>


                        <DockPanel >
                            <ToggleButton DockPanel.Dock="Left" Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False" 
                                        x:Name="MenuToggleButton"/>

                            <StackPanel DockPanel.Dock="Left">
                                <materialDesign:ColorZone Mode="PrimaryLight" Padding="8 4 8 4" CornerRadius="2" Panel.ZIndex="1"
                                                          Margin="16 0 0 0"
                                                          materialDesign:ShadowAssist.ShadowDepth="Depth1">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <Button IsDefault="True" Command="{Binding SearchEmploye}" 
                                                Style="{DynamicResource MaterialDesignToolButton}">
                                            <materialDesign:PackIcon Kind="Magnify" Opacity=".56" />
                                        </Button>
                                        <TextBox  Text="{Binding SearchEmp,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  
                                                  Grid.Column="1" Margin="8 0 0 0" materialDesign:HintAssist.Hint="" 
                                             materialDesign:TextFieldAssist.DecorationVisibility="Hidden" BorderThickness="0"
                                             MinWidth="200" VerticalAlignment="Center" />
                                    </Grid>
                                </materialDesign:ColorZone>
                            </StackPanel>



                            <materialDesign:PackIcon HorizontalAlignment="Center" VerticalAlignment="Center" 
                                                             Foreground="White" Kind="Printer" Width="24" Height="24"/>

                            <materialDesign:PackIcon Width="24" Height="24" VerticalAlignment="Center" Kind="Bell" Margin="0 0 5 0"></materialDesign:PackIcon>
                            <materialDesign:PackIcon  VerticalAlignment="Center" Kind="ThemeLightDark" Width="24" Height="24"></materialDesign:PackIcon>
                            <materialDesign:PopupBox   Foreground="White"  DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="True"/> 

                        </DockPanel>
                    </Grid>
                </materialDesign:ColorZone>

            </DockPanel>

Моя цель - создать что-то подобное (стоит упомянуть, что в моем окне используется SizeToContent)

Answer 1

Я бы не стал использовать DockPanel для чего-то подобного; Я бы просто использовал Grid. (Я просто использую заполнители, чтобы показать, куда идут вещи, поэтому поместите кнопку «Гамбургер» туда, куда я положил <Button>Hamburger</Button>) Общая структура, к которой я стремлюсь, будет:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Border Grid.Row="0" Background="Green">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Orientation="Horizontal">
                <Button>Hamburger</Button>
                <TextBox>Search</TextBox>
            </StackPanel>

            <StackPanel Grid.Column="2" Orientation="Horizontal">
                <Button>Print</Button>
                <Button>Notification</Button>
                <Button>Theme</Button>
                <Button>DotDotDot</Button>
            </StackPanel>
        </Grid>
    </Border>
    <Grid Grid.Row="1">
        <!-- Rest of screen -->
    </Grid>
</Grid>