- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试制作一个支持滚动但保持 TabControl
的原始外观和感觉的自定义 TabControl
,显然除了滚动之外。
首先,我选择编辑使用的原始模板 TabControl
的副本。
然后我在 TabPanel
周围放了一个 ScrollViewer
。 However, this has caused a minor issue where the tabs now have a border at the bottom of them when they are selected.这可以在下面通过比较图像中的普通 TabControl
和样式化的 TabControl
看出。
起初我假设这是滚动查看器的 z 索引,但在尝试不同的值并确保滚动查看器和 TabPanel
的 z 索引都明确高于 Border 之后
的 z 索引,它没有任何区别。
如果所选选项卡的底部没有边框,而它被包裹在 ScrollViewer
中,我如何才能实现相同的效果?
MainWindow.xaml
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Background="Transparent">
<TabPanel IsItemsHost="true"
Margin="2,2,2,0"
Panel.ZIndex="2"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
Panel.ZIndex="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>
最佳答案
所以如果我们去看看ScrollViewer
style template请注意那里有一个 Border
,它有一个设置的颜色,这就是您看到的工件。
我们可以进入并编辑 ScrollViewer 的 Style 模板并将其删除....或者对于这个实例,我们可以让它保留其 Border 并覆盖样式继承,因此在您的模板中您可以执行类似的操作;
<ScrollViewer ...>
<ScrollViewer.Resources>
<Color x:Key="BorderMediumColor">#FFFFFFFF</Color>
</ScrollViewer.Resources>
....
</ScrollViewer>
其中它应该继承 Border
的新颜色,在本例中我只是将其设为白色,或者您可以将 alpha channel 更改为“00”以使其透明。或者您可以执行前面提到的并定义一个没有硬编码边框值的新样式模板。
希望这对您有所帮助,干杯!
附录:如果您找不到导致视觉边界线的罪魁祸首,您总是可以对 DOM 中的元素布局进行一些欺骗,并利用边距覆盖该线并获得相同的预期视觉效果。这条线在技术上可能仍然存在,但它不存在的错觉仍然足够。 :)
工作代码示例
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot"
ClipToBounds="true"
SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local"
UseLayoutRounding="True"> <!-- Gets rid of pixel rounding errors which cause small bugs when window is a certain size -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0, 0, 0, -1.25"
Background="Transparent"> <!-- +- 1.25 seems to be required when mixed with the ZIndex to hide the border underneath the selected tab -->
<TabPanel IsItemsHost="true"
Margin="2,2,2,1.25"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>
关于c# - XAML TabControl 边框问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52946869/
我想创建一个包含一堆其他 XAML 文件的主 XAML 文件。这可能吗? 最佳答案 在您的主 Xaml 中,使用 项目控件 balise 和 Xaml 组合器,您必须使用 定义您的项目用户控件 代替
如何在 xaml 中更改 ToggleSwitch 中实际开关的大小?我可以更改 OnContent 和 OffContent 的文本大小,但滑动开关永远不会更改大小。 这些都不会改变开关本身的大小,
我有一个文本 block 列表,其中可能包括里面的 url,比如: 构建失败,请在此处查看更多信息:http://... 构建成功 应用 http://myapp/无法启动,请在此处查看更多信息:ht
我想做的事 我最近一直在探索 XAML 资源字典。它们非常强大,但为了减少(甚至进一步)为适应任何修改而需要进行的更改,我想使用一些基本的算术运算来更改 HeightRequest Entry 的属性
我使用以下代码创建了一个弹出窗口,但我不知道如何将它居中 我试图在运行时自动更改边距,但我不知道该怎么做,但是有人知道如何将弹出窗口居中吗? 它没有标准维度,因为我需要全局化我的程序
哪种类型的命名更适合在 XAML 中使用: xmlns:inventoryControls="clr-namespace:Inventory.Components.Controls;assembly=
我正在尝试格式化我的 string每 3 位有逗号,如果不是整数,则为小数。我检查了大约 20 个示例,这是我最接近的示例: 但我得到一个 The property 'StringFormat' w
在 Windows Phone 8 中,我想将一个图像放在一个圆圈中。是否有类似网格的圆形容器?我知道有椭圆位它不是容器 最佳答案 这是我如何做到的。
有没有办法在 XAML 中检查逻辑非逻辑。我试图绑定(bind)到广泛使用的属性,但是对于这些新的绑定(bind),它的方式是错误的。我不想修改属性,那么有没有办法在 xaml 中反转 bool 结果
在 html 中可以说 width="20%"。这在 XAML 中当然是不允许的。有谁知道为什么会这样或者有没有办法在 XAML 中获得百分比值支持? 最佳答案 网格列定义和行定义允许比例单位(除了固
我可以动态创建 XAML 并将其弹出到我的应用程序中吗?该怎么做呢? 最佳答案 是的,这很简单: XmlReader tXml = XmlReader.Create(myXamlString); UI
简短版: 如果不使用 xamlc 预编译 xaml,应用程序中捆绑了什么以在运行时编译 xaml?它是否取决于 xamarin.forms nugets 之外的应用构建时的当前工具集? 长版: 我们有
我知道如何显示内容页面,但如何根据方向选择正确的布局。我想编写 xaml 文件:一个用于垂直方向,另一个用于水平方向。方向改变时是否可以切换xaml文件 最佳答案 Xamarin.Forms does
我是一名 Android 开发者,我是 Windows Phone 8 的新手 最近我做了一个 android 应用程序..所以我想在 Windows Phone 8 中开发具有相同 View 和相同
在库中编译 XAML 时出现以下错误: Themes\Generic.xaml(35,12): XamlCompiler error WMC0610: XBF generation error cod
我需要在几个不同的 XAML 布局文件中包含一个通用的 XAML。 我不想在其他 XAML 文件中对重复的 XAML 部分进行硬编码。 怎么做包含? 最佳答案 你能把共享代码变成UserControl
我想像这样添加一个符号: 这行不通,所以我尝试用\分隔,但也行不通。有人对我如何做到这一点有任何建议吗? 最佳答案 其实这个问题不是关于XAML的,它只是一个纯XML的问题。 XML中有些字符需要转
我在 Xaml 中定义了这样的列表。 #3599B8 #374649 #FD625E #F2C80F
在向 Microsoft 报告之前,我想在这里问一下。我有一个问题,我无法看到我的 WinUI 3 应用程序的实时可视化树。我什至看不到应用程序内工具栏。我可以在 WPF 和 UWP 应用程序中看到,
我已经定义了一个动画作为一个资源,当通过这样的 EventTrigger 调用时它可以工作: 然后
我是一名优秀的程序员,十分优秀!