wpf - WPF MenuItem 显示没有周围的空白区域
问题描述
在下面XAML
我需要显示蓝色的rectangle
内部菜单项,周围没有灰色的空白区域。但如下面的屏幕所示,菜单项内的矩形显示矩形周围有很多空白区域。问题:我在这里可能做错了什么以及我们如何摆脱菜单项中的空白空间?我试过使用Margin
and StackPanel
。但到目前为止还没有成功。我想我们可能需要某种菜单项模板。我正在关注这个WPF 教程。
XAML:
<Window x:Class="WpfTESTApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfTESTApp"
mc:Ignorable="d"
Title="MainWindow" Height="492.182" Width="499" Loaded="Window_Loaded">
<Grid>
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="My Rectangle">
<StackPanel Width="50" Height="50">
<Rectangle Fill="Blue" Width="50" Height="50" Margin="0,0,0,0" Stroke="Black"/>
</StackPanel>
</MenuItem>
</Menu>
</DockPanel>
</Grid>
</Window>
主窗口的屏幕截图[带有设计和运行时视图]:在菜单项中我只需要显示蓝色矩形
解决方案
我相信您需要做的是覆盖 Menu Item 的默认控件模板。所以我采用了默认控件模板并对其进行了修改,从模板中删除了图标区域并将其应用于控件
<Window.Resources>
<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="0"/>
<Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Padding="0" Background="#FFF0F0F0" Width="Auto" >
<ScrollViewer x:Name="SubMenuScrollViewer" Padding="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="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<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="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
<Trigger Property="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>
</Window.Resources>
菜单项的代码如下所示
<DockPanel>
<Menu DockPanel.Dock="Top" >
<MenuItem Header="My Rectangle" Template="{DynamicResource MenuItemControlTemplate1}" >
<Rectangle Fill="Blue" Width="200" Height="30" Margin="-35,0,-50,0" Stroke="Black"/>
<Rectangle Fill="Red" Width="200" Height="30" Margin="-35,0,-50,0" Stroke="Black"/>
</MenuItem>
</Menu>
</DockPanel>
正如您所看到的,我已经为矩形应用了边距,如果您删除它,您将能够看到左侧和右侧的填充。
推荐阅读
- node.js - 如何阻止 github 操作需要旧的 nodejs 构建?
- reactjs - React 状态钩子,传入方法和参数 onClick
- python - 使用 IF 将 pdf 文件附加到 Outlook 的更好方法是什么?
- python - Matplotlib imshow:更改颜色条的中心值时,NaN 的颜色会发生变化
- javascript - html div在切换时接受焦点,但在通过javascript设置时不接受
- react-native - 在 React Native 中按下按钮后如何显示图像
- javascript - JavaScript - 基于url参数的h1替换javascript,如何在url和页面中添加多个单词?
- javascript - 设置大小框裁剪 (Cropper Js)
- python - 如何向后解析文件并打印所有行,直到找到包含某个字符串的行?
- php - Slim 4 抛出 Slim\Exception\HttpNotFoundException