WPF 工具栏: 如何消除握把和溢出

在一个嵌套的 WPF 工具栏面板-工具栏菜单,我们想摆脱左边的握柄和右边的溢出区域。它们都是灰色的,但是我们希望它们不要被展示出来。

有什么办法吗?

以防我的术语不完全正确,如果你看下面链接图3中的图片,在三个工具栏的最低端,下拉菜单的左边有一个手柄,最右边的按钮有一个溢出。

工具栏图像

72861 次浏览

You can use Blend to rather simply override the ControlTemplate for the ToolBarPanel, Menu, or ToolBar.

  1. Right click on the ToolBar and select Edit Template
  2. From Edit Template, select Edit a Copy
  3. I recommend adding the copy to a Resource Dictionary
  4. Click Ok

You'll now be editing the control template for the ToolBarPanel, and can set the visibility to Collapsed for the grip and overflow signal. You can rinse and repeat for the other controls. It is a bit time consuming, but isn't terribly hard with Blend.

The grip can be removed by setting the attached property ToolBarTray.IsLocked="True" on the ToolBar.

To remove the Overflow ToggleButton, you will have to remove it in a custom ControlTemplate as sixlettervariables suggests, which if you have blend or can download the Blend 3 Preview is not overly difficult.

You could also just hide the button in the loaded event of the ToolBar, though whichever route you take, you should also set the attached property ToolBar.OverflowMode="Never" on the ToolBar's menu, so that items cannot accidentally overflow into an unreachable area.

<ToolBarPanel DockPanel.Dock="Top">
<ToolBar ToolBarTray.IsLocked="True" Loaded="ToolBar_Loaded">
<Menu ToolBar.OverflowMode="Never">
<MenuItem Header="File" />
<MenuItem Header="New" />
</Menu>
</ToolBar>
</ToolBarPanel>

And set the Overflow ToggleButton to collapsed:

private void ToolBar_Loaded(object sender, RoutedEventArgs e)
{
ToolBar toolBar = sender as ToolBar;
var overflowGrid = toolBar.Template.FindName("OverflowGrid", toolBar) as FrameworkElement;
if (overflowGrid != null)
{
overflowGrid.Visibility = Visibility.Collapsed;
}
var mainPanelBorder = toolBar.Template.FindName("MainPanelBorder", toolBar) as FrameworkElement;
if (mainPanelBorder != null)
{
mainPanelBorder.Margin = new Thickness();
}
}

The methods above work to hide the overflow; I've used the following to hide the gripper:

         <Label Height="44" Width="30" Background="{StaticResource CtrlBackground}" Margin="-20,0,0,0"></Label>

for a Horizontal layout, and

         <Label Height="44" Width="230" Background="{StaticResource CtrlBackground}" Margin="0,-20,0,0" HorizontalAlignment="Left"></Label>

for a Vertical layout. Place the above after the Toolbar(or ToolbarTray, if using that)

Use whatever Width and Height is needed for your buttons.

Kaxaml is excellent for playing with this stuff.

I am just starting out with WPF and could not get any of the above methods to hide my overflow arrow (Visual Studio 2010).The only thing that seemed to affect the arrow was the Toolbar_Load example above but all that did was turn the arrow into an empty space that looked as bad as the arrow. The easiest way I could figure was just to set the margins of the toolbar.

<ToolBar Height="26"
Name="toolBar"
DockPanel.Dock="Top"
ToolBarTray.IsLocked="True"
ToolBar.OverflowMode="Never"        <!-- no effect -->
Margin="0,0,-13,0">                 <!-- worked -->
<Menu ToolBar.OverflowMode="Never"> <!-- no affect -->
<MenuItem Header="_File"></MenuItem>
</Menu>
</ToolBar>

You can "remove" the overflow without supplying a new control template by setting the ToolBar to have negative right margins (and throw in a negative left margin so it doesn't look odd with rounded left edges but square right edges). Then, add ClipToBounds="True" to the ToolBarPanel which will cut off the edges of the toolbar which are now sticking outside the panel's area.

<ToolBarPanel Grid.Row="0" ClipToBounds="True">
<ToolBar ToolBarTray.IsLocked="True" Margin="-5,0,-13,0" Padding="5,0,0,0">
. . .

Rather than hiding the overflow button completely, I think it's better to show it only when necessary. This can be done by binding its Visibility property to its IsEnabled property:

private static void FixupToolBarOverflowArrow(ToolBar toolBar)
{
Action fixup = () =>
{
var overflowButton = toolBar.Template.FindName("OverflowButton", toolBar) as ButtonBase;
if (overflowButton != null)
{
overflowButton.SetBinding(
VisibilityProperty,
new Binding("IsEnabled")
{
RelativeSource = RelativeSource.Self,
Converter = new BooleanToVisibilityConverter()
});
}
};


if (toolBar.IsLoaded)
{
fixup();
}
else
{
RoutedEventHandler handler = null;
handler = (sender, e) =>
{
fixup();
toolBar.Loaded -= handler;
};


toolBar.Loaded += handler;
}
}

(the same thing can be done in XAML by redefining the template)