c# - WPF 工具栏控制溢出量

Question

我正在编写一个具有多个 ToolbarControls 的应用程序。工具栏之间还有其他 UI 元素，因此我无法使用 ToolbarManager。这是 UI 层次结构:

<UserControl>
     <DockPanel>
           <StackPanel DockPanel.Dock="Top">
                <ToolbarTray> <Toolbar/> <ToolbarTray/>
                <Some Other UI Stuff, separators, text, etc/>
           <StackPanel/>

           <StackPanel DockPanel.Dock="Top">
                <ToolbarTray> <Toolbar/> <ToolbarTray/>
                <Some Other UI Stuff, separators, text, etc/>
           <StackPanel/>



           <!-- as the above toolbars expand in size, these two are pushed offscreen>
           <StackPanel DockPanel.Dock="Bottom">
                <Some Other UI Stuff, separators, text, etc/>
           <StackPanel/>
    <DockPanel/>
<UserControl/>

我的问题是，如何使Toolbar控件显示尽可能多的按钮？当它们满时会溢出到下拉菜单中，但目前它们的 MaxHeight 值都是硬编码的。我希望使这种动态化，因此出现的最大按钮数量取决于显示器的尺寸。我尝试通过删除高度限制来做到这一点，但最后一个 StackPanel 总是被迫离开屏幕。

请注意，最后一个 StackPanel 必须位于 DockPanel 的底部，并且不包含工具栏，只包含一些其他 UI 元素。

Answer 1

您应该将优先级最高的区域放在停靠面板的最前面。

您可以使用以下非常原始的设置来测试它(放置在 WPF 窗口中并调整高度，观察控件扩展/收缩的顺序):

您当前的方式:

<DockPanel>
    <Rectangle DockPanel.Dock="Top" Fill="Green" Height="100"/>
    <Rectangle DockPanel.Dock="Bottom" Fill="Red" Height="100"/>
    <!-- Last one fills -->
    <Rectangle Fill="Orange"/>
</DockPanel>

让底部保持其大小并先收缩顶部

<DockPanel>
    <Rectangle DockPanel.Dock="Bottom" Fill="Red" Height="100"/>
    <Rectangle DockPanel.Dock="Top" Fill="Green" Height="100"/>
    <!-- Last one fills -->
    <Rectangle Fill="Orange"/>
</DockPanel>

这种方法的一个典型问题是制表符顺序。您可以保持屏幕可见的 Tab 键顺序，如下所示:

<DockPanel KeyboardNavigation.TabNavigation="Local">
    <Rectangle DockPanel.Dock="Bottom" Fill="Red" Height="100" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="3"/>
    <Rectangle DockPanel.Dock="Top" Fill="Green" Height="100" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="1"/>
    <!-- Last one fills -->
    <Rectangle Fill="Orange" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="2"/>
</DockPanel>

我使用矩形来使不同的区域及其调整大小的优先级可见 - 您可以放置​​任何控件来代替矩形。

编辑:关于提到固定大小和两个相对大小区域的评论(我可以自由地忽略 20%、30%，只看比例)，网格可能更好选择:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="3*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Fill="Green"/>
    <Rectangle Grid.Row="1" Fill="Orange"/>
    <Rectangle Grid.Row="2" Fill="Red" Height="100"/>
</Grid>

关于旋转:一种方法是交换行和列定义...确保在交换中包含所有相关属性。

<Grid x:Name="myGrid" Margin="0,0,0,40">
    <Grid.RowDefinitions>
        <RowDefinition Height="3*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Green"/>
    <Rectangle Grid.Row="1" Grid.Column="0" Fill="Orange"/>
    <Rectangle Grid.Row="2" Grid.Column="0" Fill="Red" MinHeight="100" MinWidth="100"/>
</Grid>
<Button VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10" Content="Change Rotation" Click="Button_Click"/>

交换网格行和列的代码:

private void Button_Click(object sender, RoutedEventArgs e)
{
    var rd = myGrid.RowDefinitions.ToList();
    var cd = myGrid.ColumnDefinitions.ToList();
    myGrid.RowDefinitions.Clear();
    myGrid.ColumnDefinitions.Clear();
    foreach (var item in cd)
    {
        myGrid.RowDefinitions.Add(new RowDefinition() { Height = item.Width });
    }
    foreach (var item in rd)
    {
        myGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = item.Height });
    }
    foreach (UIElement child in myGrid.Children)
    {
        var r = child.GetValue(Grid.RowProperty);
        child.SetValue(Grid.RowProperty, child.GetValue(Grid.ColumnProperty));
        child.SetValue(Grid.ColumnProperty, r);
    }
}

还可以为原始 View 和旋转 View 定义不同的数据模板。这完全取决于所涉及控制的要求和复杂性。

另一个替代想法:让我们实际旋转 View (包括其内容)...如果父容器不旋转，这可能会有所帮助:

private bool isRotated = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (!isRotated)
    {
        myGrid.LayoutTransform = new RotateTransform(90, myGrid.ActualWidth / 2, myGrid.ActualHeight / 2);
    }
    else
    {
        myGrid.LayoutTransform = Transform.Identity;
    }
    isRotated = !isRotated;
}