[英]Metro Tab Control Style WPF
I would like to achieve a tabcontrol Style like the one In this project ( https://github.com/thielj/MetroFramework ). 我想实现一个tabcontrol样式,就像在该项目中一样( https://github.com/thielj/MetroFramework )。 Unfortunately the metroframework project only works for winforms.
不幸的是,metroframework项目仅适用于winform。
Can someone help me to get this styled in xaml? 有人可以帮助我在xaml中获得此样式吗?
Would help me alot already, if I have the style for the blue/gray line separating tabitem and tabcontent. 如果我具有将tabitem和tabcontent分开的蓝色/灰色线条的样式,将会对我有很大帮助。
Thanks in advance. 提前致谢。
ResourceDictionary
to store new templates, one for TabControl
and one for TabItem
and name them TabControlTemplate.xaml
and TabItemTemplate.xaml
ResourceDictionary
来存储新模板,一个用于TabControl
,一个用于TabItem
,并将它们命名为TabControlTemplate.xaml
和TabItemTemplate.xaml
TabControl
and TabItem
and then choosing Edit Template > Edit a copy...
. TabControl
和TabItem
,然后选择“ Edit Template > Edit a copy...
为上述控件创建默认模板Edit Template > Edit a copy...
。 Then choose your style names to MetroLikeTabControl
and MetroLikeTabItem
and set target resource dictionaries for each template. MetroLikeTabControl
和MetroLikeTabItem
并为每个模板设置目标资源字典。 Visual studio creates a copy of that template in selected files. In TabControlTemplate.xaml
add this setter tag to control styles: 在
TabControlTemplate.xaml
添加此setter标记以控制样式:
<Setter Property="ItemContainerStyle" Value="{DynamicResource MetroLikeTabItem}" />
Then change this part of template: 然后更改模板的这一部分:
<TabPanel Grid.Row="0" Grid.Column="0" x:Name="HeaderPanel" Margin="2,2,2,0" Panel.ZIndex="1" Background="Transparent" IsItemsHost="True" KeyboardNavigation.TabIndex="1" />
to this new one: 到这个新的:
<Grid Grid.Row="0" Grid.Column="0"> <Border BorderThickness="0 0 0 2" BorderBrush="Gray" /> <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" Panel.ZIndex="1" Background="Transparent" IsItemsHost="True" KeyboardNavigation.TabIndex="1" /> </Grid>
this adds a border with only bottom thickness and makes your TabPanel
's border overlap with TabItem
's border (Why only bottom border? because I'm implementing what you want when TabControl
's TabStripPlacement
property is set to Top
. You can set triggers to implement all other states. 这将添加仅底部厚度的边框,并使
TabPanel
的边框与TabItem
的边框重叠(为什么只有底部边框?因为当TabControl
的TabStripPlacement
属性设置为Top
时,我正在实现所需的设置。可以设置触发器实施所有其他状态。
In TabItemTemlate.xaml
set a BorderBrush = "0 0 0 2"
for element with name innerBorder
and remove Opacity = "0"
property. 在
TabItemTemlate.xaml
为名称为innerBorder
元素设置BorderBrush = "0 0 0 2"
并删除Opacity = "0"
属性。
Then change styles of IsMouseOver = true
, IsSelected = true
and IsSelected = false (default style of a TabItem)
as desired. 然后根据需要更改
IsMouseOver = true
, IsSelected = true
和IsSelected = false (default style of a TabItem)
。 This is my edited trigger for Selected state that changes content of TabItem
and color of Border
to Blue. 这是我为“选定”状态编辑的触发器,该触发器将
TabItem
内容和“ Border
颜色更改为蓝色。
<MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" /> <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top" /> </MultiDataTrigger.Conditions> <Setter Property="Panel.ZIndex" Value="1" /> <!-- commented line below, because we don't need Select Scale behaviour in metro style anymore --> <!--<Setter Property="Margin" Value="-2,-2,-2,0" />--> <Setter TargetName="innerBorder" Property="Opacity" Value="1" /> <Setter TargetName="innerBorder" Property="BorderThickness" Value="0,0,0,2" /> <Setter TargetName="innerBorder" Property="BorderBrush" Value="#0088cc" /> <Setter TargetName="contentPresenter" Property="TextBlock.Foreground" Value="#0088cc" /> <Setter TargetName="mainBorder" Property="BorderThickness" Value="0" /> </MultiDataTrigger>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.