Robin Purbia Ответов: 1

Tabcontrol и tabitem с эффектом dropshadow WPF


Я пытаюсь реализовать стиль для TabControl вместе с TabItem, как показано ниже.:

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

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

Стиль должен сделать ниже вещи видимыми:
1. белый фон для TabControl и выбранного TabItem с эффектом Dropshadow.
2. Если какой-либо элемент табуляции не выбран, то цвет текста табуляции должен стать серым.


Если кто-нибудь может помочь мне достичь TabControl с таким стилем, это было бы большим подспорьем.
Заранее спасибо.

Что я уже пробовал:

Чего я достиг до сих пор:
1. Уметь делить ширина элемент управления TabControl, чтобы разместить элементы tabitem в равных размерах через TabSizeConverter конвертер.
2. Возможность изменять фон и с помощью TabControl и TabItems. Но не в состоянии добиться эффекта тени.
3. ниже приведен мой стиль для 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>

1 Ответов

Рейтинг:
0

Graeme_Grant

Есть много учебников и решений, которые можно найти в Google Search for Drop Shadow: WPF xaml dropshadow[^]

Также официальная документация: Как создать визуальный эффект Drop Shadow[^]

Я думаю, что это тот ответ, который вы ищете: XAML-WPF TabItem и TabControl шаблоны комбинированные-переполнение стека[^]