WPF:将 StackPanel/DockPanel 中的最后两个控件对齐在最右侧

发布于 2024-09-29 00:01:43 字数 4880 浏览 0 评论 0原文

这是我到目前为止不起作用的代码:

   <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>

alt text

如何在图像上设置最后 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>

Thats my code so far which does not work:

   <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>

alt text

How can I set the 2 last controls on the image on the very right side?

UPDATE:

<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>

The 2 controls are in the LessonPlannerView (UserControl)

Inside the LessonPlannerView you find this code:

...
    <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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小清晰的声音 2024-10-06 00:01:43

这应该没问题,但您确实不需要嵌套的 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>

That should be fine but you really don't need the nested DockPanel's. You could change the inner DockPanel to a horizontal StackPanel.

But the real problem is that your outer DockPanel doesn't seem to be expanding to the full width of its container. Set a Background on the outer DockPanel to give you a visual indication of why it isn't filling out its container.

In response to the comment thread below, adding the following example

<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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文