Question

我正在编写一个包含多个ToolbarControls的应用程序。工具栏之间还有其他UI元素，因此我无法使用ToolbarManagers。这是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

您应首先在Dockpanel中放置具有最高优先级的区域。

您可以使用以下非常原始的设置进行测试（放置在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>

此方法的典型问题是制表顺序。您可以按如下方式保持屏幕可见选项卡顺序：

<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);
    }
}

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

另一个替代想法：让我们实际旋转视图，包括其内容......如果父容器没有旋转，这可能会有所帮助：

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

WPF ToolbarControl溢出量

1 个答案: