styling 相关问题

通过嵌入 CSS 的类应用时背景图像不显示

我在使用带有嵌入式 CSS 的 CSS 类设置背景图像时遇到问题。这是我正在使用的 CSS 代码： .测试背景{ 背景图片: url('/img/roads.jpg'); 背景...

固定位置时，样式卡会超出我的顶部导航栏的顶部

我只是在学习，所以不要轻视我的 HTML 和 CSS :) 我正在为我的顶部导航栏苦苦挣扎。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我是...

如何将颠倒的条形图添加到我的 ggplot 时间序列图中？

我试图通过为“TP”（=总降水量）变量添加一个倒置的条形图来使该图对读者更加友好。不幸的是我无法从中得到建议......

将 css 添加到 h3 后，HTML 按钮不起作用

我希望我的 h3 与我的按钮对齐，所以我将其位置设置为绝对，还有其他一些事情。如果您想查看问题，可以到这里。我不知道还有什么可以用来...

在 OpenLayers 中获取多频段 GeoTIFF 的透明度

使用此 3 频段 GeoTIFF： 驱动程序：GTiff/GeoTIFF 文件：mb_p_cr.tif mb_p_cr.tif.ovr 尺寸为6196、8003 坐标系是： GEOGCRS["WGS 84", DATUM[“世界大地测量系统...

如何使用多种自定义样式设置nativewind元素的样式

我想使用我自己的具有某些属性的自定义 className 来设置组件的样式。 Tailwind 允许您通过 App.css 执行此操作，但在 React Native 应用程序中没有。你如何添加说...

如何向React Datepicker（HackerOne）添加自定义样式？

我想让这个日期时间选择器占据整个屏幕，并更改某些部分的样式，例如每个时间段和日期的大小。 我从 https://reactdatepicker.com/#exa...

如何让这个步进按钮 div 位于页面底部？

所以我觉得自己像个白痴。我不太明白这一点。任何帮助都将不胜感激。 结构... 基地布局： <> 所以我觉得自己像个白痴。我不太明白这一点。任何帮助都将不胜感激。 结构... base layout: <> <Header /> <div className="flex h-screen overflow-hidden"> <Sidebar /> <main className="w-full pt-16"> {children} </main> </div> </> child layout: <> <div className="h-full overflow-auto"> <div className="h-full flex-1 space-y-4 p-4 md:p-8 pt-6"> {children} </div> </div> </> child component layout: <> <div className="flex items-center justify-between"> ...header component </div> <div> ...stepper progress bar </div> <Form> ...form </Form> <div className="mt-8 py-6"> <div className="flex justify-between self-end"> ...stepper buttons... </div> </div> </Form> </> 问题是我需要这些按钮位于视口的底部，但如果页面扩展并触发溢出自动，这些按钮仍应位于视口的底部。我无法从该组件中取出按钮并将其设置为页脚，因为这些功能与子组件布局内的表单相关联。 任何帮助将不胜感激。 我尝试为按钮容器的父容器（div mt-8 py-6）提供全高，但它只是导致了一些重量高度问题，在不应该出现的情况下延伸到溢出。 如果您的要求是将某些按钮固定在视口底部，那么您将不得不使用固定定位。应用position:fixed; bottom: 0风格 更多关于固定定位的信息这里

MUI React 删除焦点上的轮廓边框

我一直在尝试将 2 个 MUI 输入放在同一标签下以创建自定义字段。我通过将字段包装在另一个 TextField 中作为 div 找到了解决方案，但这会产生一些不良效果...

样式不适用于react-native-wheel-pick

样式不适用于react-native-wheel-pick的选择器。 这是我的选择器， 样式不适用于react-native-wheel-pick的选择器。 这是我的选择器， <View style={styles.pickerContainer}> <Picker style={styles.picker} selectedValue={selectedHeight} itemStyle={{ color: 'black', fontSize: 12 }} onValueChange={(value) => setSelectedHeight(value)} pickerData={heightData.map(item => `${item.ft} ${item.cm}`)} itemSpace={40} highlightColor={"transparent"} indicatorColor={"transparent"} renderItem={(data, index) => { return ( <View style={[styles.heightItemContainer, index === selectedHeightIndex && styles.highlightedItem]}> <Text style={[styles.heightText, index === selectedHeightIndex && styles.highlightedText]}> {data} </Text> </View> ); }} /> </View> “pickerContainer”的样式有效，但“picker”不起作用，字体大小也没有变化，样式中没有任何反映。 我尝试直接对选择器组件进行内联样式，但它不起作用。 您必须在 ItemStyle 中添加 fontSize，它可以反映您在 android 上的更改，但您需要硬重新加载才能在 android 上获取更改。 在 ios Picker 中提供一个 textSize 属性，您可以更改其上的 textSize 。 这是我使用的代码 <Picker textSize={18} textColor={colors.themewhite} selectedValue={value} isShowSelectLine={false} style={styles.categoryAndSubCategoryStyle} itemStyle={{ left: 9, width: 180, overflow: 'hidden', flex: 1, height: moderateScale(180), fontSize: moderateScale(15), color: colors.themewhite, borderRadius: moderateScale(20),}, ]} pickerData={Array} onValueChange={data => { // Do Anything }} /> 它将解决您的问题。

TailwindCSS 默认颜色在我的项目中未被识别

我已将自定义颜色添加到我的 TailwindCSS 项目中，但是，当我尝试使用内置颜色（例如 text-blue-200）时，它在 HTML 文件中无法识别。 知道这可能是什么吗？ 这里...

数据层：动态样式

我正在使用以下函数在地图上设置折线样式： CountyLayer.addListener('点击', 函数(事件) { CountyLayer.overrideStyle(event.feature, {StrokeWeight: 8}); }); 现在我想删除

宽度自定义后角度滚动条始终可见

Angular 中滚动条的默认行为是仅在滚动期间可见。我是 .scroll-element { &::-webkit-滚动条 { 宽度：4px； } &::-webkit-scrollbar-thumb { ...

条件渲染 else 语句不会将样式应用于我的组件

我遇到了这个奇怪的问题，如果用户没有选择轨迹，我会动态渲染“没有当前轨迹”，但如果用户选择了轨迹，我想渲染一些有关轨迹的东西...

PrimeNg p-inputnumber 无法设置样式

我在尝试实现 PrimeNg Inputnumber 元素时陷入困境：https://www.primefaces.org/primeng/showcase/#/inputnumber 根据其文档，有几个属性可以...

Material UI Button 刷新页面后失去样式

由于没有人回答我的问题（材质 UI 按钮在页面刷新后失去样式），我再次询问，这次包括 CodeSandbox：https://codesandbox.io/s/bold-resonance-8c8pz?file= /src/

数据触发器可以用外部样式吗

我刚刚开始使用 MAUI，我想应用一种将在多个带有数据触发器的页面上使用的样式。这是我想要实现的目标： TestPage 包含这样的标签： 我刚刚开始使用 MAUI，我想应用一种将在多个带有数据触发器的页面上使用的样式。这是我想要实现的目标： TestPage 包含这样的标签： <Label Text="{Binding TaskStatus}" VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="0" Grid.Column="0" Style="{StaticResource DefaultLabelStyle}" /> 然后 DefaultStyleResource 文件包含以下内容： <Style x:Key="DefaultLabelStyle" TargetType="Label"> <Style.Triggers> <DataTrigger TargetType="Label" Binding="{Binding TaskStatus}" Value="4"> <Setter Property="TextColor" Value="{DynamicResource Blue}" /> </DataTrigger> </Style.Triggers> </Style> 这可能吗？或者我只能以内联方式使用这样的数据触发器吗？ 预先感谢！ 可以通过将样式添加到应用程序的资源字典中来全局定义样式。您可以将样式代码添加到 App.xaml 文件中： <Application.Resource> <ResourceDictionary> ... <Style x:Key="DefaultLabelStyle"> ... </ResourceDictionary> </Application.Resource> 此后，您可以直接在页面中使用该样式： <Label Text="{Binding TaskStatus}" Style="{StaticResource DefaultLabelStyle}" .../> 更多信息可以参考全局样式。

WPF - 如何设置菜单控件的样式以删除左边距？

我已将默认菜单控件添加到我的用户控件中。我需要设置菜单样式以删除包含图标或复选框空间的左边距。我怎样才能做到这一点？ XAML： ... 我已将默认菜单控件添加到我的用户控件中。我需要设置菜单样式以删除包含图标或复选框空间的左边距。我该怎么做？ XAML： <Menu> <MenuItem Header="MyMenu" FontSize="10"> <MenuItem Header="Options..." /> <MenuItem Header="About" /> </MenuItem> </Menu> 它目前的渲染方式与任何其他开箱即用的菜单控件一样： 我不希望菜单项左侧有边距或列。这通常用于图标等。 我认为这就是你所追求的（再次，使用Expression Blend来解决它，但就它显示的内容而言，它是我能得到的最简约的......并且花了很多时间来玩弄）.. .您可以将以下内容放入空白 WPF 应用程序中作为示例： <Window x:Class="MenuItemWithNoIcon.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/> <SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/> <SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/> <SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Background" Color="#0A000000"/> <SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Border" Color="#21000000"/> <SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF26A0DA"/> <SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/> <Geometry x:Key="Checkmark">F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z</Geometry> <SolidColorBrush x:Key="Menu.Static.Foreground" Color="#FF212121"/> <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}"> <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true"> <Grid Margin="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <ContentPresenter x:Name="menuHeaderContainer" ContentSource="Header" HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch"/> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="Icon" Value="{x:Null}"/> <Trigger Property="IsChecked" Value="True"/> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsHighlighted" Value="True"/> <Condition Property="IsEnabled" Value="False"/> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> <SolidColorBrush x:Key="Menu.Static.Border" Color="#FF999999"/> <SolidColorBrush x:Key="Menu.Static.Background" Color="#FFF0F0F0"/> <SolidColorBrush x:Key="Menu.Static.Separator" Color="#FFD7D7D7"/> <Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry> <Style x:Key="MenuScrollButton" BasedOn="{x:Null}" TargetType="{x:Type RepeatButton}"> <Setter Property="ClickMode" Value="Hover"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Border x:Name="templateRoot" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" SnapsToDevicePixels="true"> <ContentPresenter HorizontalAlignment="Center" Margin="6" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter"/> <Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry> <Style x:Key="{ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}" BasedOn="{x:Null}" TargetType="{x:Type ScrollViewer}"> <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/> <Setter Property="VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollViewer}"> <Grid SnapsToDevicePixels="true"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="1"> <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}"/> </Border> <RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineUpCommand}" Focusable="false" Grid.Row="0" Style="{StaticResource MenuScrollButton}"> <RepeatButton.Visibility> <MultiBinding ConverterParameter="0" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed"> <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/> </MultiBinding> </RepeatButton.Visibility> <Path Data="{StaticResource UpArrow}" Fill="{StaticResource Menu.Static.Foreground}"/> </RepeatButton> <RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineDownCommand}" Focusable="false" Grid.Row="2" Style="{StaticResource MenuScrollButton}"> <RepeatButton.Visibility> <MultiBinding ConverterParameter="100" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed"> <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/> </MultiBinding> </RepeatButton.Visibility> <Path Data="{StaticResource DownArrow}" Fill="{StaticResource Menu.Static.Foreground}"/> </RepeatButton> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" 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> <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/> <ContentPresenter Grid.Column="1" 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" PlacementTarget="{Binding ElementName=templateRoot}"> <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" Padding="0"> <ScrollViewer x:Name="SubMenuScrollViewer" 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="{StaticResource Menu.Static.Separator}" HorizontalAlignment="Left" Margin="0" 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}"/> <Trigger Property="IsChecked" Value="true"> <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/> </Trigger> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/> <Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/> </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> <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" 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" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/> <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Grid> </Border> <ControlTemplate.Triggers> <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="{StaticResource MenuItem.Highlight.Background}"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/> <Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsHighlighted" Value="True"/> <Condition Property="IsEnabled" Value="False"/> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> <Geometry x:Key="RightArrow">M 0,0 L 4,3.5 L 0,7 Z</Geometry> <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}"> <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true"> <Grid Margin="-1"> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/> <ColumnDefinition Width="13"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="30"/> <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/> <ColumnDefinition Width="20"/> </Grid.ColumnDefinitions> <ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> <Border x:Name="GlyphPanel" BorderBrush="{StaticResource MenuItem.Highlight.Border}" BorderThickness="1" Background="{StaticResource MenuItem.Highlight.Background}" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22"> <Path x:Name="Glyph" Data="{DynamicResource Checkmark}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Height="11" Width="9"/> </Border> <ContentPresenter Grid.Column="2" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/> <TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/> <Path x:Name="RightArrow" Grid.Column="5" Data="{StaticResource RightArrow}" Fill="{StaticResource Menu.Static.Foreground}" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center"/> <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3"> <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" Padding="2"> <ScrollViewer x:Name="SubMenuScrollViewer" 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="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" HorizontalAlignment="Left" Margin="29,2,0,2" 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="Transparent"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/> <Setter Property="Fill" TargetName="Glyph" Value="{StaticResource Menu.Disabled.Foreground}"/> <Setter Property="Fill" TargetName="RightArrow" Value="{StaticResource Menu.Disabled.Foreground}"/> </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> <Style x:Key="MenuItemStyle1" TargetType="{x:Type MenuItem}"> <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="ScrollViewer.PanningMode" Value="Both"/> <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> <Style.Triggers> <Trigger Property="Role" Value="TopLevelHeader"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> <Setter Property="Padding" Value="6,0"/> </Trigger> <Trigger Property="Role" Value="TopLevelItem"> <Setter Property="Background" Value="{StaticResource Menu.Static.Background}"/> <Setter Property="BorderBrush" Value="{StaticResource Menu.Static.Border}"/> <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> <Setter Property="Padding" Value="6,0"/> </Trigger> <Trigger Property="Role" Value="SubmenuHeader"> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Menu> <MenuItem Header="File" Style="{DynamicResource MenuItemStyle1}"> <MenuItem Header="Exit" Style="{DynamicResource MenuItemStyle1}"/> </MenuItem> </Menu> </Grid> </Window> 简单快捷的方法如下。创建 ItemsPanelTemplate 资源： <ItemsPanelTemplate x:Key="MenuItemPanelTemplate"> <StackPanel Background="White"/> </ItemsPanelTemplate> 将以下MenuItem样式添加到资源中，就完成了。 <Style TargetType="{x:Type MenuItem}"> <Setter Property="ItemsPanel" Value="{StaticResource MenuItemPanelTemplate}"/> </Style> 要将相同的 Style 应用于 ContextMenu，您需要再创建一个 Style，如下所示： <Style TargetType="{x:Type ContextMenu}"> <Setter Property="ItemsPanel" Value="{StaticResource MenuItemPanelTemplate}"/> </Style> 在上下文菜单之上，您还必须添加： <ContextMenu ItemsSource="{Binding MyItems}" > <ContextMenu.ItemTemplate> <DataTemplate> <TextBlock Margin="-20,0,-40,0" Text="{Binding Name}"/> </DataTemplate> </ContextMenu.ItemTemplate> </ContextMenu> 因此它将覆盖图标空间并显示大小写文本块。这是最简单、最容易的解决方案。 这不是很直接，但您需要创建一个 MenuItemStyle，最简单的方法是通过 Expression Blend： <Menu> <MenuItem Header="MyMenu" Style="{DynamicResource MenuItemStyle1}"> <MenuItem Header="Options..." /> <MenuItem Header="About" /> </MenuItem> </Menu> 它创建了一组极其冗长的模板和样式，您需要编辑菜单项以删除网格的固定宽度第一列，然后在 SubMenuBorder ContentControl 模板中删除形成背景阴影的矩形。我附上了一个已删除边距的示例项目。 在此处下载示例项目。 这里有两个选项： 简短、简单、直接。将 ItemsPanelTemplate 设置为 MenuItem 或 ContextMenu，具体取决于您使用的菜单类型（请参阅详细信息）。 激进。从头开始重写 Menu 风格。有两种即用型： 来自 MahApps.Metro 的XAML 风格的Menu（普通菜单和ContextMenu） Jeff Wilcox 的风格启发了 MahApps 的前一个风格（link） 我的简单方法是在 ItemTemplate 中为网格使用负边距 <ContextMenu.ItemTemplate> <DataTemplate> <Grid Margin="-20,0,-40,0"><!--this part is important--> <Grid.ColumnDefinitions> <ColumnDefinition Width="20"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Ident}"/> <TextBlock Grid.Column="1" Text="{Binding Description}"/> </Grid> </DataTemplate> </ContextMenu.ItemTemplate> 查看完整答案这里 我正在使用 WPF Notifyicon（硬编码）并使用以下代码删除了菜单的图标部分： <Window ...> <Window.Resources> <ItemsPanelTemplate x:Key="MenuTPL"> <StackPanel Margin="-30,0,0,0" Background="White"/> </ItemsPanelTemplate> </Window.Resources> <Grid> ... <ContextMenu> <ContextMenu.Style> <Style TargetType="{x:Type ContextMenu}"> <Setter Property="ItemsPanel" Value="{StaticResource MenuTPL}"/> </Style> </ContextMenu.Style> <MenuItem Header="Exit" Click="Exit_MenuItemClick"/> </ContextMenu> ... </Grid> </Window> 要删除空格并且从不使用图标，您必须更改 MenuItem.SubmenuItemTemplateKey 的模板或 MenuItem 的模板。 如果您只需要摆脱垂直线并继续使用图标空间，请遵循此答案。 带有网格的 Windows 有我的 CustomContextMenu.xaml 作为网格资源： <Window ...> <Grid> <Grid.Resources> <ResourceDictionary Source="CustomContextMenu.xaml"/> </Grid.Resources> <Grid.ContextMenu> <ContextMenu> <MenuItem Header="Menu item 1" > <MenuItem Header="Menu item 2" > <MenuItem.Icon> <Image Source="icon.jpg"/> </MenuItem.Icon> </MenuItem> </MenuItem> <Separator Style="{StaticResource MySeparatorStyle}" /> <MenuItem IsEnabled="False" Header="Menu item 3" /> </ContextMenu> </Grid.ContextMenu> <TextBlock>test</TextBlock> </Grid> </Window> 这是我的 CustomContextMenu.xaml，它有一个 CustomSeparatorStyle 模板，可将分隔线延伸到上下文菜单的左边距。还有一个 ContextMenu 模板来隐藏垂直线。 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Outer menu --> <Style TargetType="{x:Type ContextMenu}"> <Setter Property="OverridesDefaultStyle" Value="True" /> <Setter Property="MaxWidth" Value="295" /> <Setter Property="SnapsToDevicePixels" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ContextMenu}"> <!-- Here is where you change the border thickness to zero on the menu --> <Border x:Name="Border" Background="#CCCCC7" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0"> <Border.Effect> <DropShadowEffect Direction="135" Opacity=".8" ShadowDepth="2" Color="Black" /> </Border.Effect> <StackPanel ClipToBounds="True" IsItemsHost="True" Orientation="Vertical" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="Border" Property="Background" Value="#F7F7F4" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- Separator --> <Style x:Key="CustomSeparatorStyle" TargetType="{x:Type Separator}"> <Setter Property="Height" Value="1" /> <Setter Property="Margin" Value="-30,5,0,5" /> <Setter Property="Background" Value="#F7F7F4" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Separator}"> <Border BorderBrush="#DADAD6" BorderThickness="1" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> 右侧菜单是使用上面的代码创建的。您可以注意到大小和阴影的差异。为了保留原始菜单的阴影，您必须排除 Border.Effect。 使用 RadMenuGroupItem。 RadMenuGroupItem 继承自 RadMenuItem 类，它用作 RadMenuItem 下拉列表的容器。换句话说，任何 UI 元素都可以放置在 RadMenuGroupItem 内部。默认情况下，RadMenuGroupItem 的背景颜色为白色，并且没有与 RadMenuItem 不同颜色的图标区域，因此您可以轻松地在下拉列表中使用不同大小的图标。除此之外，RadMenuGroupItem 还有一个 Header 属性，该属性显示在所有组项的顶部。 <telerik:RadMenu VerticalAlignment="Top"> <telerik:RadMenuItem Header="Shapes" /> <telerik:RadMenuItem Header="Sizes"> <telerik:RadMenuGroupItem Header="Header"> <telerik:RadMenuItem Header="Small" IconTemplate="{StaticResource IconTemplate}" IconColumnWidth="35" Height="35" /> <telerik:RadMenuItem Header="Medium" IconTemplate="{StaticResource IconTemplate}" IconColumnWidth="45" Height="45" /> <telerik:RadMenuItem Header="Large" IconTemplate="{StaticResource IconTemplate}" IconColumnWidth="55" Height="55" /> </telerik:RadMenuGroupItem> </telerik:RadMenuItem> 这就是结果： 感谢您的成功想法。对于 .net Framework 4.5 和 VS 2012，我相应地为 ContextMenu 和 MenuItem 编写了： private const double ICON_SIZE = 32; void ContextMenu_Loaded(object sender, System.Windows.RoutedEventArgs e) { if (_pointerControl.ContextMenu.Template != null) { System.Windows.Shapes.Rectangle r1 = _pointerControl.ContextMenu.Template.FindName("3_T", _pointerControl.ContextMenu) as System.Windows.Shapes.Rectangle; System.Windows.Shapes.Rectangle r2 = _pointerControl.ContextMenu.Template.FindName("4_T", _pointerControl.ContextMenu) as System.Windows.Shapes.Rectangle; System.Windows.Shapes.Rectangle r3 = _pointerControl.ContextMenu.Template.FindName("5_T", _pointerControl.ContextMenu) as System.Windows.Shapes.Rectangle; double width = Math.Max(28, ICON_SIZE+14); r1.Width = width; r2.Margin = new System.Windows.Thickness(width + 1, 2, 0, 2); r3.Margin = new System.Windows.Thickness(width + 2, 2, 0, 2); } } void mi_Loaded(object sender, System.Windows.RoutedEventArgs e) { System.Windows.Controls.MenuItem mi = sender as System.Windows.Controls.MenuItem; if (mi != null && mi.Template != null) { System.Windows.Controls.ContentPresenter cp = mi.Template.FindName("Icon", mi) as System.Windows.Controls.ContentPresenter; cp.Height = ICON_SIZE + 6; cp.Width = ICON_SIZE + 6; } }

如何更改TinyMCE弹窗的风格/皮肤？

我目前正在使用 TinyMCE 编辑器插入文本，该文本的配置与使用 CSS 的 TinyMCE 默认样式不同： 单击链接按钮时，会弹出如何插入...

如何在 sencha ex js 7 中设置 fieldLabel 颜色以在项目中将项目着色为白色作为显示字段

如何在 Sencha Ext JS 7 中将字段标签颜色设置为 color:"white" 项目中的显示字段 { 字段标签：“Inizio”， itemId: "数据Id", xtype: "显示字段...