WPF：如何将最后两个控件在StackPanel/DockPanel中右对齐

Question

这是我到目前为止的代码，但它并不起作用：

   <DockPanel  >        
            <Button Content="Start" Command="{Binding Path=FirstDateCommand}" />
            <Button Content="Back"  Command="{Binding Path=PreviousDateCommand}" />          
            <DatePicker Width="150"
                SelectedDate="{Binding Path=SelectedDate}"
                DisplayDateStart="{Binding Path=MinDate}" 
                DisplayDateEnd="{Binding Path=MaxDate}" SelectedDateFormat="Long" />
            <Button Content="Forward" Command="{Binding Path=NextDateCommand}" />
            <Button Content="End"     Command="{Binding Path=LastDateCommand}" />

            <Button Command="{Binding PrintCommand}" Content="Print Planner" />
            <Button Command="{Binding ToggleDocumentsCommand}" Content="Show Docs"  />
            <Button Command="{Binding MaterialExplorerShowCommand}" Content="Browse Docs" />
            <Button Command="{Binding LessonPlannerCommand}" Content="Edit Planner" />
            <TextBox Text="{Binding SearchText,Mode=TwoWay}" Width="50" />          
            <Button Command="{Binding FindAllCommand}" Content="Search"  />

            <DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right">
                <TextBlock Text="class code:" VerticalAlignment="Center" />
                <ComboBox 
                ItemsSource="{Binding GroupViewModelList}" 
                Style="{StaticResource GroupViewModelStyle}"
                ItemTemplate="{StaticResource GroupViewModelItemTemplate}" 
                Width="100"/>
            </DockPanel>

        </DockPanel>

我该如何将图片上最右边的2个控件设置在最后？

更新:

<Grid  Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Margin="10,10,10,0"  Grid.Row="0" Name="ButtonBar">
            <StackPanel FocusManager.IsFocusScope="True" Orientation="Horizontal">               
                <ComboBox  
                        AlternationCount="2"
                        FontSize="16"
                        VerticalContentAlignment="Center"
                        Width="100" 
                        ItemContainerStyle="{StaticResource alternateColor}" 
                        ItemsSource="{Binding Source={x:Static Member=Fonts.SystemFontFamilies}}" x:Name="fontComboFast">
                    <ComboBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel VirtualizingStackPanel.VirtualizationMode="Recycling" />
                        </ItemsPanelTemplate>
                    </ComboBox.ItemsPanel>                    
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Width="100" Text="{Binding}" FontFamily="{Binding }" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

                <!--<View:FormatButtonBar />-->
                <View:DateNavigatorView />
                <View:LessonPlannerView />
                <!--<View:TextFormatBarUC />-->
            </StackPanel>
        </Grid>

这2个控件位于LessonPlannerView（UserControl）中。

在LessonPlannerView中，您会找到以下代码：

...
    <Grid >
        <DockPanel>              
            <Button Command="{Binding PrintCommand}" Content="Print Planner" />
            <Button Command="{Binding ToggleDocumentsCommand}" Content="Show Docs"  />
            <Button Command="{Binding MaterialExplorerShowCommand}" Content="Browse Docs" />
            <Button Command="{Binding LessonPlannerCommand}" Content="Edit Planner" />
            <TextBox Text="{Binding SearchText,Mode=TwoWay}" Width="50" />          
            <Button Command="{Binding FindAllCommand}" Content="Search"  />            
            <StackPanel x:Name="ClassCodeChooser" Orientation="Horizontal" DockPanel.Dock="Right" HorizontalAlignment="Right">
                <TextBlock Text="class code:" VerticalAlignment="Center" />
                <ComboBox ItemsSource="{Binding SchoolclassCodeList}"                 
                />
        </StackPanel>            
        </DockPanel>
    </Grid>
</UserControl>

- Elisabeth

Answer 1

这应该没问题，但你实际上不需要嵌套的DockPanel。你可以将内部的DockPanel更改为水平的StackPanel。

但真正的问题是，你的外部DockPanel似乎没有展开到其容器的全部宽度。在外部DockPanel上设置一个背景色，以便你能够看到为什么它没有填满其容器。

回应下面的评论线程，添加以下示例：

<Grid Name="ButtonBar">
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <DockPanel Grid.Row="0">
        <View:FormatButtonBar />  <!-- this will dock left -->
        <View:DateNavigatorView />  <!-- this will dock left -->
        <View:LessonPlannerView />  <!-- this will dock left -->
        <View:TextFormatBarUC /> <!-- this will fill -->
    </DockPanel>

</Grid>

- Josh

---

是的，外部的 DockPanel 没有完全拉伸到整个宽度，我不知道为什么。整个 ButtonBar 放在一个 UserControl 中以便重复使用，并且我使用了两次。 - Elisabeth

我在DockPanel、父Grid、父UserControl等上设置了HorizontalAlignment="Stretch"，但当我设置固定宽度时，它只是被拉伸了吗？ - Elisabeth

你能显示整个树到根窗口或用户控件吗？默认的HorizontalAlignment是Stretch，所以你不需要显式设置它。 - Josh

是的，我可以，Josh，请查看更新后的初始帖子 :) - Elisabeth

由于代码被分成了几个XAML片段，所以有点难以理解，但我认为你的问题可能是直接放在名为ButtonBar的Grid内部的水平StackPanel。水平StackPanel将始终将其子元素排列到左边缘，并且子元素永远不会拉伸。尝试将其更改为DockPanel。它的子元素隐式停靠在左侧，最后一个子元素将“填充”剩余空间。 - Josh