DockPanel内部的拆分项

Question

​

​

我希望窗口右侧有4个按钮(通知、打印机、三个点和亮/暗主题按钮)，而Humburger按钮和TextBox应该保留在左边，这将给我们留下一个空白的中间位置。

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>