uwp - 如何更改 UWP TabViewItem 角半径？
问题描述
我想更改的默认角半径TabViewItem。使用默认角半径，它看起来像这样：
但我希望它有锋利的边缘，这意味着设置CornerRadius为零。像这样：
我尝试将 的 设置CornerRadius为零TabView。我也尝试过ItemTemplate这样使用：
<winui:TabView.TabItemTemplate>
<DataTemplate x:DataType="viewmodels:ShapelistViewModel">
<winui:TabViewItem
CornerRadius="0"
Header="{Binding}" />
</DataTemplate>
</winui:TabView.TabItemTemplate>
他们都没有工作。
最后，我尝试编辑 的Template，但在模板中TabView没有找到任何相关的内容。CornerRadius
解决方案
WinUI TabViewItems 根据 OverlayCornerRadius 主题资源确定其 CornerRadius。要更改所有 TabViewItems 的角半径，您可以执行以下操作：
<!-- In App.xaml -->
<CornerRadius x:Key="OverlayCornerRadius">0,0,0,0</CornerRadius>
<!-- On your page -->
<winui:TabView.TabItemTemplate>
<DataTemplate x:DataType="viewmodels:ShapelistViewModel">
<winui:TabViewItem
Header="{Binding}">
</winui:TabViewItem>
</DataTemplate>
</winui:TabView.TabItemTemplate>
另一种解决方案是通过将此样式放入 App.xaml 来重新模板 TabViewItem：
<Style TargetType="winui:TabViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="winui:TabViewItem">
<Grid x:Name="LayoutRoot"
Padding="{TemplateBinding Padding}"
Margin="-1,0,0,0"> <!-- This item will cover the separator on its left side. -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftColumn" Width="0"/>
<ColumnDefinition Width="*" />
<ColumnDefinition x:Name="RightColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<ScaleTransform x:Name="LayoutRootScale" />
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderPointerOverCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderPointerOverCloseButtonForeground}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderPressedCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderPressedCloseButtonForeground}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
<Setter Target="LayoutRoot.Background" Value="Transparent"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
<Setter Target="LayoutRoot.Background" Value="Transparent"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
<Setter Target="LayoutRoot.Background" Value="Transparent"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundDisabled}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
<Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewButtonForegroundDisabled}" />
<Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonBackground}" />
<Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonForeground}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NoReorderHint" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDragThemeOpacity}"
Duration="0" />
<DragItemThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="DraggingTarget" />
<VisualState x:Name="MultipleDraggingPrimary" />
<VisualState x:Name="MultipleDraggingSecondary" />
<VisualState x:Name="DraggedPlaceholder" />
<VisualState x:Name="Reordering">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemReorderThemeOpacity}"
Duration="0:0:0.240" />
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderingTarget">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemReorderTargetThemeOpacity}"
Duration="0:0:0.240" />
<DoubleAnimation Storyboard.TargetName="LayoutRootScale"
Storyboard.TargetProperty="ScaleX"
To="{ThemeResource ListViewItemReorderTargetThemeScale}"
Duration="0:0:0.240" />
<DoubleAnimation Storyboard.TargetName="LayoutRootScale"
Storyboard.TargetProperty="ScaleY"
To="{ThemeResource ListViewItemReorderTargetThemeScale}"
Duration="0:0:0.240" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleReorderingPrimary" />
<VisualState x:Name="ReorderedPlaceholder">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="DragOver">
<Storyboard>
<DropTargetItemThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="IconStates">
<VisualState x:Name="Icon"/>
<VisualState x:Name="NoIcon">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="TabWidthModes">
<VisualState x:Name="StandardWidth"/>
<VisualState x:Name="Compact">
<VisualState.Setters>
<Setter Target="IconBox.Margin" Value="0,0,0,0"/>
<Setter Target="ContentPresenter.Visibility" Value="Collapsed"/>
<Setter Target="IconColumn.Width" Value="{ThemeResource TabViewItemHeaderIconSize}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CloseIconStates">
<VisualState x:Name="CloseButtonVisible"/>
<VisualState x:Name="CloseButtonCollapsed">
<VisualState.Setters>
<Setter Target="CloseButton.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="TabSeparator"
HorizontalAlignment="Right"
Width="1"
Grid.Column="1"
BorderBrush="{ThemeResource TabViewItemSeparator}"
BorderThickness="1"
Margin="{ThemeResource TabViewItemSeparatorMargin}"/>
<Grid x:Name="TabContainer"
Grid.Column="1"
Background="{ThemeResource TabViewItemHeaderBackground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
Padding="{ThemeResource TabViewItemHeaderPadding}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="IconColumn" Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconBox"
MaxWidth="{ThemeResource TabViewItemHeaderIconSize}"
MaxHeight="{ThemeResource TabViewItemHeaderIconSize}"
Margin="{ThemeResource TabViewItemHeaderIconMargin}">
<ContentControl x:Name="IconControl"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TabViewTemplateSettings.IconElement}"
IsTabStop="False"
Foreground="{ThemeResource TabViewItemIconForeground}"
HighContrastAdjustment="None" />
</Viewbox>
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{ThemeResource TabViewItemHeaderFontSize}"
Foreground="{ThemeResource TabViewItemHeaderForeground}"
OpticalMarginAlignment="TrimSideBearings"
HighContrastAdjustment="None" />
<Button x:Name="CloseButton"
Grid.Column="2"
Width="{ThemeResource TabViewItemHeaderCloseButtonSize}"
Height="{ThemeResource TabViewItemHeaderCloseButtonSize}"
FontSize="{ThemeResource TabViewItemHeaderCloseFontSize}"
Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
Content=""
IsTextScaleFactorEnabled="False"
IsTabStop="False"
Background="{ThemeResource TabViewItemHeaderCloseButtonBackground}"
Foreground="{ThemeResource TabViewItemHeaderCloseButtonForeground}"
Style="{StaticResource TabViewCloseButtonStyle}"
HighContrastAdjustment="None" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
推荐阅读
- ios - 将数据从 ViewController 传递到 SwiftUI View
- html - 我的 CSS 样式表没有链接到我的 html
- swift - 如何创建基于 GCController 的“虚拟摇杆”？
- amazon-web-services - AWS Inteface VPC 终端节点如何将流量实际路由到区域服务？
- android - mupdf：android 库：如何反转颜色或更改为夜间模式
- selenium - 使用 Selenium 跨越多行文本时如何通过文本识别元素
- r - 如何将数据值舍入到 R 中的新列和组中
- ubuntu-18.04 - Virtualmin 外发电子邮件进入垃圾邮件文件夹
- javascript - 有没有办法通过 HTML 将两个参数传递给 JavaScript 函数？
- javascript - 在 firebase 查询中使用 2 个 order 参数，但结果不是由它们中的任何一个排序的