2011-01-11 37 views

回答

21

谷歌是完全有這個問題的答案:

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

,並指定這個方法將你的工具欄Loaded事件。

+0

嘗試搜索谷歌,找不到它。這在按鈕曾經出現的右側留下了一個空白......無論如何要解決這個問題? – mpen

+0

對於差距'OverflowMode =「永遠」'應該刪除它,如果我沒記錯。 –

+0

@Andrei:那是什麼屬性?我在哪裏設置它? **編輯:**沒關係。找到了。但它並沒有消除差距。 – mpen

5

編輯:也縮小了差距。
編輯2:修復缺少的資源。
或者您可以使用樣式的副本與前面提到的可見性改變和刪除右邊的保證金,所有這些資源都屬於風格/模板:

<LinearGradientBrush x:Key="ToolBarHorizontalBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#FFFFFF" Offset="0"/> 
     <GradientStop Color="#FFFBFF" Offset="0.5"/> 
     <GradientStop Color="#F7F7F7" Offset="1"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="ToolBarToggleButtonVerticalBackground" EndPoint="1,0" StartPoint="0,0"> 
     <GradientStop Color="#ECECEC" Offset="0"/> 
     <GradientStop Color="#DDDDDD" Offset="0.5"/> 
     <GradientStop Color="#A0A0A0" Offset="1"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="ToolBarButtonHover" Color="#C2E0FF"/> 
    <SolidColorBrush x:Key="ToolBarGripper" Color="#C6C3C6"/> 
    <Style x:Key="ToolBarVerticalOverflowButtonStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Background" Value="{StaticResource ToolBarToggleButtonVerticalBackground}"/> 
     <Setter Property="MinHeight" Value="0"/> 
     <Setter Property="MinWidth" Value="0"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="0,0,3,3" SnapsToDevicePixels="true"> 
         <Canvas HorizontalAlignment="Right" Height="6" Margin="2,7,2,2" SnapsToDevicePixels="true" VerticalAlignment="Bottom" Width="7"> 
          <Path Data="M 1.5 1 L 1.5 6" Stroke="White"/> 
          <Path Data="M 0.5 0 L 0.5 5" Stroke="{TemplateBinding Foreground}"/> 
          <Path Data="M 3.5 0.5 L 7 3.5 L 4 6.5 Z" Fill="White"/> 
          <Path Data="M 3 -0.5 L 6 2.5 L 3 5.5 Z" Fill="{TemplateBinding Foreground}"/> 
         </Canvas> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/> 
         </Trigger> 
         <Trigger Property="IsKeyboardFocused" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{StaticResource ToolBarGripper}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true"> 
       <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    <LinearGradientBrush x:Key="ToolBarVerticalBackground" EndPoint="1,0" StartPoint="0,0"> 
     <GradientStop Color="#FFFFFF" Offset="0"/> 
     <GradientStop Color="#FFFBFF" Offset="0.5"/> 
     <GradientStop Color="#F7F7F7" Offset="1"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="ToolBarToggleButtonHorizontalBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#ECECEC" Offset="0"/> 
     <GradientStop Color="#DDDDDD" Offset="0.5"/> 
     <GradientStop Color="#A0A0A0" Offset="1"/> 
    </LinearGradientBrush> 
    <Style x:Key="ToolBarHorizontalOverflowButtonStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Background" Value="{StaticResource ToolBarToggleButtonHorizontalBackground}"/> 
     <Setter Property="MinHeight" Value="0"/> 
     <Setter Property="MinWidth" Value="0"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="0,3,3,0" SnapsToDevicePixels="true"> 
         <Canvas HorizontalAlignment="Right" Height="7" Margin="7,2,2,2" SnapsToDevicePixels="true" VerticalAlignment="Bottom" Width="6"> 
          <Path Data="M 1 1.5 L 6 1.5" Stroke="White"/> 
          <Path Data="M 0 0.5 L 5 0.5" Stroke="{TemplateBinding Foreground}"/> 
          <Path Data="M 0.5 4 L 6.5 4 L 3.5 7 Z" Fill="White"/> 
          <Path Data="M -0.5 3 L 5.5 3 L 2.5 6 Z" Fill="{TemplateBinding Foreground}"/> 
         </Canvas> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/> 
         </Trigger> 
         <Trigger Property="IsKeyboardFocused" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{StaticResource ToolBarGripper}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true"> 
       <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    <SolidColorBrush x:Key="ToolBarMenuBorder" Color="#808080"/> 
    <SolidColorBrush x:Key="ToolBarSubMenuBackground" Color="#FDFDFD"/> 
    <Style x:Key="ToolBarThumbStyle" TargetType="{x:Type Thumb}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Thumb}"> 
        <Border Background="Transparent" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"> 
         <Rectangle> 
          <Rectangle.Fill> 
           <DrawingBrush TileMode="Tile" Viewbox="0,0,4,4" Viewport="0,0,4,4" ViewportUnits="Absolute" ViewboxUnits="Absolute"> 
            <DrawingBrush.Drawing> 
             <DrawingGroup> 
              <GeometryDrawing Brush="White" Geometry="M 1 1 L 1 3 L 3 3 L 3 1 z"/> 
              <GeometryDrawing Brush="{StaticResource ToolBarGripper}" Geometry="M 0 0 L 0 2 L 2 2 L 2 0 z"/> 
             </DrawingGroup> 
            </DrawingBrush.Drawing> 
           </DrawingBrush> 
          </Rectangle.Fill> 
         </Rectangle> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Cursor" Value="SizeAll"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ToolBarMainPanelBorderStyle" TargetType="{x:Type Border}"> 
     <Setter Property="Margin" Value="0,0,11,0"/> 
     <Setter Property="CornerRadius" Value="3,3,3,3"/> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true"> 
       <Setter Property="CornerRadius" Value="0,0,0,0"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    <Style x:Key="ToolBarWithoutOverflowBarStyle" TargetType="{x:Type ToolBar}"> 
     <Setter Property="Background" Value="{StaticResource ToolBarHorizontalBackground}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToolBar}"> 
        <Grid x:Name="Grid" Margin="3,1,1,1" SnapsToDevicePixels="true"> 
         <Grid x:Name="OverflowGrid" HorizontalAlignment="Right" Visibility="Hidden"> 
          <ToggleButton x:Name="OverflowButton" ClickMode="Press" FocusVisualStyle="{x:Null}" IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" IsEnabled="{TemplateBinding HasOverflowItems}" Style="{StaticResource ToolBarHorizontalOverflowButtonStyle}"/> 
          <Popup x:Name="OverflowPopup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom" StaysOpen="false"> 
           <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent"> 
            <Border x:Name="ToolBarSubMenuBorder" BorderBrush="{StaticResource ToolBarMenuBorder}" BorderThickness="1" Background="{StaticResource ToolBarSubMenuBackground}" RenderOptions.ClearTypeHint="Enabled"> 
             <ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" KeyboardNavigation.DirectionalNavigation="Cycle" FocusVisualStyle="{x:Null}" Focusable="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle" WrapWidth="200"/> 
            </Border> 
           </Microsoft_Windows_Themes:SystemDropShadowChrome> 
          </Popup> 
         </Grid> 
         <Border x:Name="MainPanelBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" Style="{StaticResource ToolBarMainPanelBorderStyle}" Margin="0"> 
          <DockPanel KeyboardNavigation.TabIndex="1" KeyboardNavigation.TabNavigation="Local"> 
           <Thumb x:Name="ToolBarThumb" Margin="-3,-1,0,0" Padding="6,5,1,6" Style="{StaticResource ToolBarThumbStyle}" Width="10"/> 
           <ContentPresenter x:Name="ToolBarHeader" ContentSource="Header" HorizontalAlignment="Center" Margin="4,0,4,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/> 
           <ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </DockPanel> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsOverflowOpen" Value="true"> 
          <Setter Property="IsEnabled" TargetName="ToolBarThumb" Value="false"/> 
         </Trigger> 
         <Trigger Property="Header" Value="{x:Null}"> 
          <Setter Property="Visibility" TargetName="ToolBarHeader" Value="Collapsed"/> 
         </Trigger> 
         <Trigger Property="ToolBarTray.IsLocked" Value="true"> 
          <Setter Property="Visibility" TargetName="ToolBarThumb" Value="Collapsed"/> 
         </Trigger> 
         <Trigger Property="HasDropShadow" SourceName="OverflowPopup" Value="true"> 
          <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
          <Setter Property="SnapsToDevicePixels" TargetName="Shdw" Value="true"/> 
          <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
         </Trigger> 
         <Trigger Property="Orientation" Value="Vertical"> 
          <Setter Property="Margin" TargetName="Grid" Value="1,3,1,1"/> 
          <Setter Property="Style" TargetName="OverflowButton" Value="{StaticResource ToolBarVerticalOverflowButtonStyle}"/> 
          <Setter Property="Height" TargetName="ToolBarThumb" Value="10"/> 
          <Setter Property="Width" TargetName="ToolBarThumb" Value="Auto"/> 
          <Setter Property="Margin" TargetName="ToolBarThumb" Value="-1,-3,0,0"/> 
          <Setter Property="Padding" TargetName="ToolBarThumb" Value="5,6,6,1"/> 
          <Setter Property="Margin" TargetName="ToolBarHeader" Value="0,0,0,4"/> 
          <Setter Property="Margin" TargetName="PART_ToolBarPanel" Value="1,0,2,2"/> 
          <Setter Property="DockPanel.Dock" TargetName="ToolBarThumb" Value="Top"/> 
          <Setter Property="DockPanel.Dock" TargetName="ToolBarHeader" Value="Top"/> 
          <Setter Property="HorizontalAlignment" TargetName="OverflowGrid" Value="Stretch"/> 
          <Setter Property="VerticalAlignment" TargetName="OverflowGrid" Value="Bottom"/> 
          <Setter Property="Placement" TargetName="OverflowPopup" Value="Right"/> 
          <Setter Property="Margin" TargetName="MainPanelBorder" Value="0,0,0,11"/> 
          <Setter Property="Background" Value="{StaticResource ToolBarVerticalBackground}"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true"> 
       <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 

你嵌入後的某個地方,你可以設置工具欄的樣式:

<ToolBar Style="{DynamicResource ToolBarWithoutOverflowBarStyle}"/> 
+3

哇......我不敢相信這需要很多工作才能擁有簡單的工具欄。 – mpen

+0

如果你不想抓握和下拉菜單,爲什麼你要使用工具欄?你可以使用某種類型的面板。 –

+1

@Ralph:如果你有Expression Blend,它沒有太多的工作,它可以提取默認的模板,這就是我在這裏做的。 Blend對模板,樣式等非常有用。 –

5

將以下方法分配給您的工具欄中的SizeChanged事件。

private void ToolBar_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     ToolBar toolBar = sender as ToolBar; 
     var overflowGrid = toolBar.Template.FindName("OverflowGrid", toolBar) as FrameworkElement; 
     if (overflowGrid != null) 
     { 
      overflowGrid.Visibility = toolBar.HasOverflowItems ? Visibility.Visible : Visibility.Collapsed; 
     } 

     var mainPanelBorder = toolBar.Template.FindName("MainPanelBorder", toolBar) as FrameworkElement; 
     if (mainPanelBorder != null) 
     { 
      var defaultMargin = new Thickness(0, 0, 11, 0); 
      mainPanelBorder.Margin = toolBar.HasOverflowItems ?defaultMargin: new Thickness(0); 
     } 
    } 
+0

這適用於水平工具欄。對於垂直工具欄,箭頭不會出現在最後一個按鈕的下方,但在其旁邊(右側,如果工具欄位於窗口的左側)。 –

+0

在定向的情況下。垂直的邊緣應該是厚度(0,0,0,11) –

0

我已經搜索了四個小時,以正確使用MVVM(所以沒有代碼背後)。

最重要的是ToggleButton之後和ToolBarOverflowPanel(我已將導航示例中的背景顏色設置爲黑色)之後的「可見性摺疊」。

See here: black toolbar whithout left and right stupid thingies

這裏是你可以通過"<toolbar Style="{StaticResource ToolBar}" Background="Black">...</ToolBar>

這裏您工具欄上設置的代碼樣式的代碼:

<Style x:Key="Toolbar" TargetType="{x:Type ToolBar}"> 
     <Setter Property="SnapsToDevicePixels" Value="true"/> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToolBar}"> 
       <Border x:Name="Border" CornerRadius="2" BorderThickness="1" Background="Black" BorderBrush="Black"> 
        <DockPanel > 
         <ToggleButton Visibility="Collapsed" DockPanel.Dock="Right" IsEnabled="False" IsChecked="False" ClickMode="Press"> 
          <Popup x:Name="OverflowPopup" AllowsTransparency="true" Placement="Bottom" IsOpen="{Binding Path=IsOverflowOpen,RelativeSource={RelativeSource TemplatedParent}}" StaysOpen="false" Focusable="false" PopupAnimation="Slide"> 
           <Border x:Name="DropDownBorder" Background="pink" BorderThickness="1" BorderBrush="pink"> 
            <ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" Margin="2" WrapWidth="200" Focusable="true" FocusVisualStyle="{x:Null}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" Visibility="Collapsed"/> 
           </Border> 
          </Popup> 
         </ToggleButton> 
         <ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2"/> 
        </DockPanel> 
       </Border> 
      </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
2

我不是很確定你確實需要一個工具欄或類似組件的菜單欄。這正是我想要的:

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Menu Grid.Row="0"> 
     <MenuItem Header="Menu1" Padding="10 4"> 
      <MenuItem Header="MenuItem1"/> 
      <MenuItem Header="MenuItem2"/> 
     </MenuItem> 
     <MenuItem Header="Menu2" Padding="10 4"> 
      <MenuItem Header="MenuItem1"/> 
      <MenuItem Header="MenuItem2"/> 
     </MenuItem> 
    </Menu> 
    <...> 
</Grid> 

它可能不適合你的情況。只是我想分享我的。