Tabcontrol和tabitem与drophadow效果WPF [英] Tabcontrol and tabitem with dropshadow effect WPF

问题描述

我正在尝试为TabControl实现样式以及TabItem，如下图像：



https://drive.google.com/open?id=0B2SyA6F_5_cDYUVRaXkzbWY2X1E



https://drive.google.com/open?id=0B2SyA6F_5_cDdjVnZmt5YU5PY1k



风格应该在下面看到的东西：

1. TabControl的白色背景和带Dropshadow效果的选定TabItem。

2.当没有选择任何TabItem时，TabItem文本颜色应该是转向灰色。





如果有人能帮助我实现这种风格的TabControl将是一个很大的帮助。

提前致谢。



我尝试过：



到目前为止我所取得的成就：

1.能够设置TabControl的宽度以容纳带有equa的TabItem项目l使用TabSizeConverter转换器的大小。

2.能够改变背景和TabControl和TabItems。但是无法实现Dropshadow效果。

3.以下是我的TabItem样式：

I am trying to implement style for TabControl along with TabItem like below Images:

https://drive.google.com/open?id=0B2SyA6F_5_cDYUVRaXkzbWY2X1E

https://drive.google.com/open?id=0B2SyA6F_5_cDdjVnZmt5YU5PY1k

The Style should make below things visible:
1. White Background for TabControl and selected TabItem with Dropshadow Effect.
2. When any TabItem is not selected, then the TabItem text color should turn to gray.


If anyone can help me achieving TabControl with such style would be a great help.
Thanks in advance.

What I have tried:

What I have achieved till now:
1. Able to devide width of TabControl to accomodate TabItem items with equal Sizes using TabSizeConverter converter.
2. Able to change background and with of TabControl and TabItems. But not able to achieve Dropshadow effect.
3. Below is my Style for TabItem:

<local:TabSizeConverter x:Key="tabSizeConverter" />
<Style x:Key="style_TabControlItemTab" TargetType="{x:Type TabItem}">
	<Setter Property="Padding" Value="0"></Setter>
	<Setter Property="IsTabStop" Value="False"></Setter>
	<Setter Property="Foreground" Value="{StaticResource color_MediumGray}"/>
	<Setter Property="FontSize" Value="34"/>
	<Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />
	<Setter Property="Width">
		<Setter.Value>
			<MultiBinding Converter="{StaticResource tabSizeConverter}">
				<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" />
				<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" />
			</MultiBinding>
		</Setter.Value>
	</Setter>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type TabItem}">
				<Border x:Name="Chrome"
					BorderThickness="30,0" 
					BorderBrush="{StaticResource color_Transparent}" 
					Background="{StaticResource color_LightGray}" 
					Padding="0" Margin="0">
					<ContentPresenter ContentSource="Header" 
					HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
					VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
				</Border>
				<ControlTemplate.Triggers>
					<Trigger Property="Selector.IsSelected" Value="True">
						<Setter TargetName="Chrome" Property="BorderThickness" Value="0"/>
						<Setter TargetName="Chrome" Property="Background" Value="{StaticResource color_White}"/>
						<Setter Property="Foreground" Value="{StaticResource color_Purple}"/>
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

推荐答案

Google Search for Drop Shadow上有许多教程和解决方案： wpf xaml dropshadow [ ^ ]



另外官方文档：如何：创建阴影视觉效果 [ ^ ]



我认为这是您正在寻找的答案： xaml - WPF TabItem和TabControl模板组合在一起 - Stack Ov erflow [ ^ ]

There are many tutorials and solutions that can be found on Google Search for Drop Shadow: wpf xaml dropshadow[^]

Also official documentation: How to: Create a Drop Shadow Visual Effect[^]

I think that this is the answer that you are looking for: xaml - WPF TabItem and TabControl templates combined - Stack Overflow[^]

这篇关于Tabcontrol和tabitem与drophadow效果WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！