2013-06-13 68 views
2

我想知道如何删除弹出框内的边框的一小部分。我在图片中用红色箭头标记了要删除的部分。 感谢您的帮助。隐藏或删除WPF中的边框的一部分

这里是XAML代码

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}"> 
    <Grid SnapsToDevicePixels="true"> 
     <Rectangle x:Name="OuterBorder"/> 
     <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/> 
     <Rectangle x:Name="InnerBorder"/> 
     <DockPanel> 
      <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/> 
      <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/> 
      <ContentPresenter ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
     </DockPanel> 
     <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="0" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1"> 
      <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent"> 
       <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource ResourceKey=MenuBorderColorBrush}" BorderThickness="1" Background="{StaticResource MenuOpenBackgroundColorBrush}"> 
        <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> 
         <Grid RenderOptions.ClearTypeHint="Enabled"> 
          <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
           <Rectangle x:Name="OpaqueRect" Fill="{StaticResource ResourceKey=MenuOpenBackgroundColorBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/> 
          </Canvas> 
          <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/> 
         </Grid> 
        </ScrollViewer> 
       </Border> 
      </Themes:SystemDropShadowChrome> 
     </Popup> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsSuspendingPopupAnimation" Value="true"> 
      <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/> 
     </Trigger> 
     <Trigger Property="Icon" Value="{x:Null}"> 
      <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> 
     </Trigger> 
     <Trigger Property="IsChecked" Value="true"> 
      <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/> 
      <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> 
     </Trigger> 
     <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> 
      <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
      <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
     </Trigger> 
     <Trigger Property="IsHighlighted" Value="true"> 
      <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Stroke" TargetName="InnerBorder" Value="{StaticResource MenuMouseOverColorBrush}"/> 
     </Trigger> 
     <Trigger Property="IsKeyboardFocused" Value="true"> 
      <Setter Property="Stroke" TargetName="Bg" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Stroke" TargetName="InnerBorder" Value="{StaticResource MenuMouseOverColorBrush}"/> 
     </Trigger> 
     <Trigger Property="IsSubmenuOpen" Value="true"> 
      <Setter Property="Stroke" TargetName="Bg" Value="{StaticResource MenuBorderColorBrush}"/> 
      <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
      <Setter Property="Stroke" TargetName="InnerBorder" Value="{StaticResource MenuBorderColorBrush}"/> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="false"> 
      <Setter Property="Foreground" Value="#FF9A9A9A"/> 
      <Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/> 
     </Trigger> 
     <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false"> 
      <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/> 
      <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Remove a part of the border

+0

你使用哪种风格的屏幕截图菜单?这是VS2012的默认设置吗? – Sevenate

+0

嗨,我做了我自己的风格,看起来像在visual studio 2012菜单。 – Tan

回答

1

解决了这个问题,在我想隐藏的部分上方加了一个额外的边框。在HighLight触发器下,我设置了我的新边框的宽度,以便它可以匹配标题宽度。

下面是代码:

<Style x:Key="MetroMenuStyle" TargetType="{x:Type Menu}"> 
    <Style.Resources> 
     <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="Separator"> 
      <Setter Property="Height" Value="1"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Separator"> 
         <Border BorderBrush="{StaticResource MenuBorderColorBrush}" BorderThickness="1" Margin="25,0,0,0"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="{x:Type MenuItem}"> 
      <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/> 
      <Setter Property="Command" 
         Value="{Binding Command}" /> 
      <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type MenuItem}"> 
         <!--Border 1--> 
         <Border x:Name="Border" 
           BorderThickness="1" SnapsToDevicePixels="False"> 
          <Grid x:Name="Grid"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" 
                 SharedSizeGroup="MenuItemIconColumnGroup"/> 
            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/> 
            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/> 
            <ColumnDefinition x:Name="Col3" Width="14"/> 
           </Grid.ColumnDefinitions> 
           <ContentPresenter Grid.Column="0" x:Name="Icon" VerticalAlignment="Center" 
                ContentSource="Icon"/> 
           <ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" 
                x:Name="HeaderHost" RecognizesAccessKey="True" 
                ContentSource="Header" VerticalAlignment="Center"/> 
           <ContentPresenter Grid.Column="2" Margin="8,1,8,1" x:Name="IGTHost" 
                ContentSource="InputGestureText" VerticalAlignment="Center"/> 
           <Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center"> 
            <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" 
              Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/> 
           </Grid> 
           <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" 
             Placement="Right" HorizontalOffset="-1" x:Name="SubMenuPopup" Focusable="false" 
             PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" 
             AllowsTransparency="True"> 
            <Grid Margin="0,0,5,5"> 
             <!--Border 2--> 
             <Border x:Name="SubMenuBorder" 
               BorderBrush="{StaticResource MenuBorderColorBrush}" 
               BorderThickness="1" Background="{StaticResource MenuOpenBackgroundColorBrush}" 
               SnapsToDevicePixels="True"> 
              <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True" Margin="2"> 
               <StackPanel IsItemsHost="True" 
                  KeyboardNavigation.DirectionalNavigation="Cycle"/> 
              </Grid> 
              <Border.Effect> 
               <DropShadowEffect ShadowDepth="2" Color="Black"/> 
              </Border.Effect> 
             </Border> 
             <!--Border 3--> 
             <Border Margin="1,0,0,0" x:Name="TransitionBorder" Width="0" Height="2" 
               VerticalAlignment="Top" HorizontalAlignment="Left" 
               Background="{StaticResource MenuOpenBackgroundColorBrush}" SnapsToDevicePixels="False" 
               BorderThickness="1" BorderBrush="{StaticResource MenuOpenBackgroundColorBrush}"/> 
            </Grid> 
           </Popup> 
          </Grid> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="Role" Value="TopLevelHeader"> 
           <Setter Property="Padding" Value="6,0,6,2"/> 
           <Setter TargetName="SubMenuPopup" Property="Placement" Value="Bottom"/> 
           <Setter TargetName="Col0" Property="MinWidth" Value="0"/> 
           <Setter TargetName="Col3" Property="Width" Value="Auto"/> 
           <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed" /> 
           <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="SubMenuBorder" Property="BorderThickness" Value="1,1,1,1"/> 
           <Setter TargetName="SubMenu" Property="Margin" Value="2,3,2,2"/> 
           <Setter TargetName="TransitionBorder" Property="Width" Value="{Binding ActualWidth, ElementName=Grid}"/> 
          </Trigger> 
          <Trigger Property="Role" Value="TopLevelItem"> 
           <Setter Property="Padding" Value="6,0,6,2"/> 
           <Setter TargetName="Col0" Property="MinWidth" Value="0"/> 
           <Setter TargetName="Col3" Property="Width" Value="Auto"/> 
           <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="Role" Value="SubmenuHeader"> 
           <Setter Property="DockPanel.Dock" Value="Top"/> 
           <Setter Property="Padding" Value="10,3,0,3"/> 
           <Setter TargetName="Border" Property="MinHeight" Value="22"/> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
          </Trigger> 
          <Trigger Property="Role" Value="SubmenuItem"> 
           <Setter Property="DockPanel.Dock" Value="Top"/> 
           <Setter Property="Padding" Value="10,3,0,3"/> 
           <Setter TargetName="Border" Property="MinHeight" Value="22"/> 
           <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
          </Trigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="TopLevelHeader"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuMouseOverColorBrush}"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="TopLevelItem"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="Green"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="SubmenuHeader"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuMouseOverColorBrush}"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="SubmenuItem"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuMouseOverColorBrush}"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSubmenuOpen" Value="true"/> 
            <Condition Property="Role" Value="TopLevelHeader"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
           <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource MenuBorderColorBrush}"/> 
           <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0"/> 
          </MultiTrigger> 
          <Trigger Property="IsSubmenuOpen" Value="true"> 
           <Setter TargetName="ArrowPanelPath" Property="Fill" Value="Black"/> 
          </Trigger> 
          <Trigger Property="IsSuspendingPopupAnimation" Value="true"> 
           <Setter TargetName="SubMenuPopup" Property="PopupAnimation" Value="None"/> 
          </Trigger> 
          <Trigger Property="Icon" Value="{x:Null}"> 
           <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="Foreground" Value="Red"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Style.Resources> 
    <Setter Property="Background" Value="{StaticResource WindowBackgroundColorBrush}"/> 
</Style> 
+0

听起来很棒,@谭!您是否介意为其他读者发布一些xaml,以便他们也可以使用您的解决方案? – Sevenate

+0

当然我会发布代码。 – Tan

+0

看起来不错,谢谢! – Sevenate

0

您可以使用控件模板的菜单项自定义这种风格。

+0

请删除弹出的微软主题 像这样: muzizongheng

+2

您应该编辑您的答案,而不是使用注释。评论仅供讨论,不能格式化。 – Athari

+0

试过你的,它并没有删除边界的左上角。什么是诀窍?是否在我想要隐藏的那部分上面创建一个额外的矩形? – Tan

1

我试图做到这一点简单但没有成功,对不起。这很棘手,主要是因为在WPF菜单控件的引擎下实现了弹出控件,这反过来又是一种单独的最顶层窗口,您不能只是将Canvas.ZIndex更改为负值并绘制顶级菜单元素,以便结果重叠可以隐藏要删除的行。

一种可能的(可行的,恕我直言)的方式来消除您在图像上标记的线可能是菜单项控制模板中的某种额外的顶级矩形,它只会隐藏菜单顶部边框的左侧部分弹出。但是,这个矩形将需要获得顶级菜单项的确切宽度(可能通过元素绑定),以便它可以隐藏您在图像上标记的确切数量的线条。

尽管如此,这种可能的解决方案听起来有点过于复杂,如果可能的话,我宁愿从根本上改变菜单的实现方式,例如 - 使用选项卡控件来保存所有子菜单项列表和选项卡标题将形成顶级菜单或类似的东西。这样,您至少可以更好地控制UI布局,并且可以轻松添加一些用于打开和关闭菜单的漂亮动画。

+0

嘿!我解决了这个问题,增加了一个额外的边框来阻挡我想隐藏的部分。然后在高光触发器中设置了边框的宽度。 – Tan

0

谭 我用下面TopLevelHeaderTemplateKey XAML代码或SubmenuHeaderTemplateKey来定义弹出边界:

  <Grid 
       SnapsToDevicePixels="true"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition 
          MinWidth="14" 
          Width="Auto" /> 
         <ColumnDefinition 
          Width="4" /> 
         <ColumnDefinition 
          Width="*" /> 
         <ColumnDefinition 
          Width="37" /> 
         <ColumnDefinition 
          SharedSizeGroup="MenuItemIGTColumnGroup" 
          Width="Auto" /> 
         <ColumnDefinition 
          Width="17" /> 
        </Grid.ColumnDefinitions> 
        <ContentPresenter 
         x:Name="Icon" 
         ContentSource="Icon" 
         Margin="1" 
         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
         VerticalAlignment="Center" /> 
        <Border 
         x:Name="GlyphPanel" 
         BorderBrush="#CDD3E6" 
         BorderThickness="1" 
         Background="#E6EFF4" 
         CornerRadius="3" 
         Height="22" 
         Margin="1" 
         Visibility="Hidden" 
         Width="Auto"> 
         <Path 
          x:Name="Glyph" 
          Data="{DynamicResource Checkmark}" 
          Fill="#0C12A1" 
          FlowDirection="LeftToRight" 
          Height="11" 
          Width="9" /> 
        </Border> 
        <ContentPresenter 
         Grid.Column="2" 
         Margin="-2,0,0,0" 
         VerticalAlignment="Center" 
         ContentSource="Header" 
         RecognizesAccessKey="True" 
         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
        <TextBlock 
         Grid.Column="4" 
         Margin="{TemplateBinding Padding}" 
         Text="{TemplateBinding InputGestureText}" 
         Visibility="Collapsed" /> 
        <Path 
         Grid.Column="5" 
         Data="{DynamicResource Checkmark}" 
         Fill="{TemplateBinding Foreground}" 
         Margin="4,0,0,0" 
         VerticalAlignment="Center" /> 
       </Grid> 

       <Popup 
        x:Name="PART_Popup" 
        AllowsTransparency="true" 
        Focusable="false" 
        IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" 
        PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" 
        Placement="Right" 
        > 
        <Border 
         x:Name="Shdw" 
         Background="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" 
         BorderBrush="#BF000000" 
         BorderThickness="4" 
         CornerRadius="0"> 
         <Border.Effect> 
          <DropShadowEffect 
           ShadowDepth="0" 
           BlurRadius="4" 
           Color="#7F1E1E1E" /> 
         </Border.Effect> 

         <ScrollViewer 
          x:Name="SubMenuScrollViewer" 
          CanContentScroll="true" 
          Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> 
          <Grid 
           RenderOptions.ClearTypeHint="Enabled"> 
           <ItemsPresenter 
            x:Name="ItemsPresenter" 
            KeyboardNavigation.DirectionalNavigation="Cycle" 
            Grid.IsSharedSizeScope="true" 
            Margin="0" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            KeyboardNavigation.TabNavigation="Cycle" /> 
          </Grid> 
         </ScrollViewer> 
        </Border> 
       </Popup> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger 
        Property="IsSuspendingPopupAnimation" 
        Value="true"> 
        <Setter 
         Property="PopupAnimation" 
         TargetName="PART_Popup" 
         Value="None" /> 
       </Trigger> 
       <Trigger 
        Property="Icon" 
        Value="{x:Null}"> 
        <Setter 
         Property="Visibility" 
         TargetName="Icon" 
         Value="Collapsed" /> 
       </Trigger> 
       <Trigger 
        Property="IsChecked" 
        Value="true"> 
        <Setter 
         Property="Visibility" 
         TargetName="GlyphPanel" 
         Value="Visible" /> 
        <Setter 
         Property="Visibility" 
         TargetName="Icon" 
         Value="Collapsed" /> 
       </Trigger> 
       <Trigger 
        Property="HasDropShadow" 
        SourceName="PART_Popup" 
        Value="true"> 
        <Setter 
         Property="Margin" 
         TargetName="Shdw" 
         Value="0,0,5,5" /> 
       </Trigger> 

       <Trigger 
        Property="IsEnabled" 
        Value="false"> 
        <Setter 
         Property="Foreground" 
         Value="#FF9A9A9A" /> 
        <Setter 
         Property="Background" 
         TargetName="GlyphPanel" 
         Value="#EEE9E9" /> 
        <Setter 
         Property="BorderBrush" 
         TargetName="GlyphPanel" 
         Value="#DBD6D6" /> 
        <Setter 
         Property="Fill" 
         TargetName="Glyph" 
         Value="#848589" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 

screensnap这样的: enter image description here @

+0

嗨!谢谢,但我解决了它。 – Tan