- 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/
uwp 和非 uwp 应用程序之间是否可以进行通信。我的非uwp是一个提供服务的后台任务。我想在 uwp 应用程序中调用该非 uwp 服务。 如何调用电话? AppServiceConnection
我正在开发一个应用程序,该应用程序旨在在具有多个显示器(从 1 到 3必要)在每个监视器上,每个监视器都显示不同的 View 。 就我所见,UWP 并不自然适用于这种情况。我设法使用 CoreAppl
我正在尝试对UWP应用使用broadFileSystemAccess功能,但是package.appxmanifest的功能列表中未列出broadFileSystemAccess功能。 我的最低和最高
有时我有一个打开的流或一个事件的队列,必须在应用程序关闭时正确处理。在 WPF 应用程序中,我可以在应用程序上使用 Unloading 事件,但在 UWP 中我注意到这样的事件不存在。 我如何可靠地做
http://wikisend.com/download/880354/UWP_Server.zip 我已将代码上传至上述网址。 它是 UWP 中的客户端和服务器应用程序。这里客户端和服务器都在同一个
大家好 我知道这个问题(Chromium working on UWP)之前(2015/2016)有人问过,想看看有没有更新 我正在尝试在 UWP 应用程序中使用 CEF3 构建,但在运行该应用程序时
我目前正在构建一个应用程序,它可以使用 Windows 游戏 DVR 在某个时刻开始录制屏幕。该录音机在完成录音时将应用程序名称作为文件名。 我发现了如何使用 Applicationview.GetF
我已使用 Desktop App Converter 将我的 WPF 应用程序转换为 appx 包。我需要在资源管理器上下文菜单中有一个项目。 IE。用户右键单击文件并在主菜单中看到我的项目“对应用程
我想稍微修改一个 Button 控件(添加描述)。在哪里可以找到 UWP 控件的默认控件模板? 最佳答案 似乎可以在以下位置找到它们: C:\Program Files (x86)\Windows K
我想通过 UWP 应用访问 windows10 注册表项。 键为:\HKEY_LOCAL_MACHINE\SOFTWARE\MyCompanyName\MyName 我找不到任何函数调用来完成它。 请
我开发了一个 UWP appx,它可以安装在 cmd.exe 提示符中: C:\test>myapp.appx 但是在安装过程中会弹出一个 Windows GUI。 有没有什么方法 使用 Silent
在我的 UWP 应用程序中,如何通过 UpdateTask 中的代码进行调试? VS 2017 中的“生命周期事件”下拉菜单似乎没有提供触发此类后台任务的选项。有办法实现吗? 最佳答案 首先是关于 U
我尝试在 VS 2017 中创建一个 UWP 应用程序包。 创建时我收到一条神秘的错误消息:严重性代码描述项目文件行抑制状态错误 0xdef00532 - 资源“Files/Assets/Square
我有一个 TextBlock在我的应用程序中。我要办理pinch in & out在它上面调整字体的大小。当ManipulationDelta事件触发我检查Scale属性(property),但大多数
为什么默认选择的索引不起作用?它因平台异常而崩溃: RumTime 错误: Exception thrown at 0x00007FFDEF7F7788 (KernelBase.dll) in ab
有没有办法在同一个包中的 UWP 应用程序和桌面桥应用程序之间共享互斥锁?它们似乎有不同的命名空间;使用相同的名称不会在进程之间产生相同的对象。根据 WinObj,UWP 应用程序的对象是,存储在 A
有什么方法可以检测当前的 UWP 要退出 ? (由用户关闭或终止进程) 我想向服务器发送一些关于应用程序将断开连接的请求,还想在退出之前保存一些数据。 最佳答案 无法检测这种情况或阻止用户终止您的应用
我正在使用 XAML 和 C# 开发通用 Windows 平台应用程序。我想在 UWP 中更改焦点上 TextBox 的边框颜色。 在此先感谢您的帮助。 最佳答案 其实实现起来很简单,按照以下步骤即可
是否可以在 UWP 应用中更改甚至隐藏鼠标指针? 我唯一能找到的是: Windows.UI.Xaml.Window.Current.CoreWindow.PointerCursor = null; 但
我是一名优秀的程序员,十分优秀!