- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
尝试在 CommandBar 上使用新的 IsDynamicOverflowEnabled 属性时,我遇到了溢出的样式问题。问题如下,当 AppBarButton 的 Style 未被覆盖并掉落到 Overflow 区域时,AppBarButton 的突出显示横跨 Popup 的整个宽度,其悬停/点击检测也是 Popup 的整个宽度。
当它的 Style 被覆盖时,高亮仅覆盖文本区域(在本例中为 home)并且其悬停/点击检测仅在该区域上方,即使覆盖 Style 与通用样式完全相同.xaml.
我在运行时检查属性时注意到,未被覆盖的属性正在应用来自 TargetType - FrameworkElement 的另一种样式。
通过查看 generic.xaml,我唯一可以看到这种样式更改的地方是 CommandBarOverflowPresenter(见下文)
<CommandBarOverflowPresenter.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="NaN" />
</Style>
</CommandBarOverflowPresenter.ItemContainerStyle>
为了消除我正在处理的应用程序中的所有其他噪音,我创建了一个新项目,其主页上只有一个 CommandBar 以及复制我的问题所需的必要按钮和文本。下面是 mainpage.xaml:
<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="Style" TargetType="AppBarButton">
<Setter Property="Background"
Value="{ThemeResource AppBarButtonBackground}" />
<Setter Property="Foreground"
Value="{ThemeResource AppBarButtonForeground}" />
<Setter Property="BorderBrush"
Value="{ThemeResource AppBarButtonBorderBrush}" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight"
Value="Normal" />
<Setter Property="Width"
Value="68" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="AllowFocusOnInteraction"
Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root"
MinWidth="{TemplateBinding MinWidth}"
MaxWidth="{TemplateBinding MaxWidth}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.Resources>
<Style x:Name="LabelOnRightStyle"
TargetType="AppBarButton">
<Setter Property="Width"
Value="NaN" />
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullSize" />
<VisualState x:Name="Compact">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelOnRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0"
Value="12,14,0,14" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="MinHeight">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0"
Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="TextAlignment">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0"
Value="8,15,12,17" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelCollapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="MinHeight">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Overflow">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OverflowWithToggleButtons">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0"
Value="38,0,12,0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBackgroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InputModeStates">
<VisualState x:Name="InputModeDefault" />
<VisualState x:Name="TouchInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding"
Value="0,11,0,13" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding"
Value="0,11,0,13" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot"
MinHeight="{ThemeResource AppBarThemeMinHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="Content"
Height="20"
Margin="0,14,0,4"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="TextLabel"
Grid.Row="1"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="12"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Center"
TextWrapping="Wrap"
Margin="2,0,2,6" />
</Grid>
<TextBlock x:Name="OverflowTextLabel"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="15"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Left"
TextTrimming="Clip"
TextWrapping="NoWrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="12,0,12,0"
Padding="0,5,0,7"
Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.TopAppBar>
<CommandBar IsDynamicOverflowEnabled="True">
<CommandBar.Content>
<TextBlock Text="Text to force the buttons to drop off at some point when the screen is resized" />
</CommandBar.Content>
<CommandBar.PrimaryCommands>
<AppBarButton Label="Edit"
Icon="Edit" />
<AppBarButton Label="People"
Icon="People" />
<AppBarButton Label="Really long text should should make overflow wider"
Icon="Highlight" />
<AppBarButton Label="Home"
Icon="Home"
Style="{StaticResource Style}" />
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.TopAppBar>
</Page>
如您所见,我有 1 个 CommandBar,CommandBar 的内容中有 1 个 TextBlock,CommandBar 的 PrimaryCommand 中有 4 个 AppBarButton。只有 1 个 AppBarButtons 样式被覆盖(Home 样式),被覆盖的样式直接从 generic.xaml 中获取,从这个位置 - C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\中性\UAP\10.0.14393.0\通用
为什么会这样?是否有任何已知的解决方法?
最佳答案
如您所知,虽然 AppBarButton添加到 SecondaryCommands , 它将显示在 Popup 中。如果你检查 Live Visual Tree在 Visual Studio 中,您会发现 AppBarButton
被添加到 CommandBarOverflowPresenter 中名为“SecondaryItemsControl”。
您在 CommandBarOverflowPresenter.ItemContainerStyle
下找到的样式用于重置 AppBarButton
的 Width
和 HorizontalAlignment
默认情况下 AppBarButton
的 Width
为 68
并且 HorizontalAlignment
设置为 Left
并且如果我们使用默认样式,AppBarButton
不能占据 Popup 的整个宽度。
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="68"/>
但是,CommandBarOverflowPresenter.ItemContainerStyle
下的样式只适用于带有隐式样式的AppBarButton
。如果您明确设置 AppBarButton
的 Style
属性,它将失去其功能。这就是为什么更改 AppBarButton
的样式会破坏动态溢出的自动样式的原因。
作为一种变通方法,您可以尝试更改 Width
和 HorizontalAlignment
属性,如 CommandBarOverflowPresenter.ItemContainerStyle
下的内容并设置 MiniWidth
来限制 AppBarButton
的宽度。
<Style x:Key="Style" TargetType="AppBarButton">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="Auto" />
<Setter Property="MinWidth" Value="68" />
...
</Style>
PS:此解决方法可能不适用于所有情况,尤其是当 AppBarButton
具有较长的 Label
时。你可能需要根据自己的场景决定是否使用。
更新:
Your answer raises another question, why can only implicit styles inherit this
CommandBarOverflowPresenter.ItemContainerStyle
?
这与 Lookup behavior for XAML resource references 有关.您可以认为 Style
已明确设置为具有最高优先级。设置 Style
属性后,XAML 系统将不会寻找其他样式。
引用 ResourceDictionary and XAML resource references :
The XAML framework also looks for implicit style resources (those which use TargetType rather than x:Key or x:Name) when it decides which style & template to use for a control that hasn't set the Style and ContentTemplate or ItemTemplate properties.
因此,一旦您为 AppBarButton
设置了 Style
,CommandBarOverflowPresenter.ItemContainerStyle
下的隐式样式将不起作用。
以下是演示此行为的简单示例。
<Page ...>
<Page.Resources>
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
<Setter Property="Background" Value="Red" />
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="White" />
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Style="{StaticResource ListViewItemStyle1}">1</ListViewItem>
<ListViewItem Background="Blue">2</ListViewItem>
<ListViewItem>3</ListViewItem>
<ListViewItem>4</ListViewItem>
</ListView>
</Grid>
</Page>
如您所见,对于第一个项目,由于我明确设置了 Style
属性,它不会使用 ListView.ItemContainerStyle
下的样式。对于第二项,由于我没有设置Style
属性,它将使用ListView.ItemContainerStyle
下的隐式样式,但是已经显式设置的属性有一个更高的优先级。所以这个项目的前景是白色的,但它的背景是蓝色的。而对于第三项和第四项,由于它们使用优先级最低的默认样式,因此将使用 ListView.ItemContainerStyle
下的隐式样式,而不是默认样式。
关于c# - UWP 更改 AppBarButton 的样式打破了动态溢出的自动样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41017322/
这是主函数,其中还调用了 9 个函数。我将向您展示另一个函数,以便您了解我的目标是什么。 int main() { char B[rows][columns]; char answer
每当我使用 preventDefault() 时,我通常将它放在事件处理程序的顶部,如下所示: $('#foo').on('click', function(e){ e.preventDefaul
我想要实现的是用户输入一个值,然后输入一个测量值。然后将其放置为最小、最大或介于两者之间。保留输入了多少个值的计数。以及以米为单位的所有值的总和。 程序最初可以运行,但是当我输入换行符时,程序会重复同
我无法打破 while 循环。 "; $quizslots = mysql_query("SELECT * FROM quiz_slots WHERE `quizid`=$quizsectio
所以我将一个模板化的二叉树字典实现为一个继承自抽象字典类的类,我的添加函数有一个我无法弄清楚的问题。 基本上,我的树的节点具有键和值,以及指向其父节点、左子节点和右子节点的指针。节点的代码是 stru
我的代码应该在内容之间放置一个横幅,但它正在循环播放横幅。我需要它只显示一个横幅。我试过使用 return false;,就像这个例子一样,但它没有用: $(".newsitem_text").con
我有一个 Storyboard指定用于登录我的应用程序。我将其嵌入到 UINavigationController 中。登录到我的应用程序(并过渡到新的 Storyboard)后,我想“脱离”这个导航
我想知道是否可以在不使用 MCU 复位引脚上的外部复位按钮的情况下中断 while 循环并从特定位置重新启动代码。 下面是当“if”语句为真时我想中断的 while 循环,我正在使用 LCD,并想返回
所以我有这个问题,如果数组中的值高于输入值,它应该做一些事情然后停止循环并且不要触及数组中的剩余值。这是到目前为止的代码: const percentages = []; let enteredVal
我想在“div2”中打断长字,div2 和 div3 的宽度都不能大于父宽度(即 150px)。唯一有效的是 word-break: break-all 但这也会打断短词。 #div1{ di
我的数据库中有 3 个表。 PARENT_A 有一个“ID”主键列。 PARENT_B 有一个“ID”主键列。 CHILD 具有“PARENT_A_ID”和“PARENT_B_ID”外键列。它还有一个
在这个非常人为的示例中,我有一个包含 3 个元素的数组,我使用 .each() 对其进行循环。方法。 var vals = $w('foo bar baz'); vals.each( function
非常简单的示例代码(仅用于演示,没有任何用处): repeat { while (1 > 0) { for (i in seq(1, 100)) { break # usual
我有以下 promise : var aggregatePromise = () => { return new Promise((resolve, reject) => { Ei
我想检测表单的“输入”键而不让表单被提交。我如何打破这种关联? document.forms[0].onkeypress = function (event) { e = window.eve
这里是新手。我有一个 Ajax 函数,可以循环 3 个不同的请求。但是,如果第一个请求失败,我希望其他请求终止。我尝试放入“break”语句,但收到“非法的break语句”错误,我猜测是因为它不是直接
我有一个 Vector的 Vector不同长度的 s W .这些最后的向量包含 0 到 150,000 之间的整数,步长为 5,但也可以为空。我正在尝试计算每个向量的经验 cdf。我可以像这样计算这些
我想知道如何正确地打破 JS 中的 promise 链。 在这段代码中,我首先连接到数据库,然后检查集合是否已经有一些数据,如果没有则添加它们。不要关注一些 actionhero.js 代码..这里并
我有一个 Vector的 Vector不同长度的 s W .这些最后的向量包含 0 到 150,000 之间的整数,步长为 5,但也可以为空。我正在尝试计算每个向量的经验 cdf。我可以像这样计算这些
您可以使用 CompletableFuture 链接运行 block ,如下所示: CompletableFuture .supplyAsync(block1) .thenApply(
我是一名优秀的程序员,十分优秀!