Develop Reference

Setting sunken effect in XAML

I am trying to set my property in XAML to have a sunken effect when the button is pressed. I do this by increasing the border thickness.
It gives me an error saying the specific value cannot be assigned. What am I making mistake here?
Note: I tried using the DropShadowEffect and it works but Border effect does not work.
Here is my XAML:
<Style x:Key="DefaultLanguageButtonStyle" TargetType="{x:Type Button}" > <!--BasedOn="{StaticResource DefaultButton}" >-->
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderThickness="0" BorderBrush="DarkGray" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Effect">
<Setter.Value>
<Border BorderThickness="5,5,0,0" >
</Border>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="30" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="{DynamicResource RedBrush}" />
<Setter Property="Background" Value="{DynamicResource WhiteBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource NoBorder}" />
<Setter Property="Height" Value="100" />
</Style>

Why not have your trigger like this:
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="BorderThickness" Value="5,5,0,0"/>
<Setter TargetName="border" Property="Effect" Value="..."/>
</Trigger>
EDIT:
Here is a short example where I change the BorderThickness of a Border within a ControlTemplate through Triggers:
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" BorderBrush="HotPink" BorderThickness="0" Background="Aqua" Width="50" Height="50"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderThickness" Value="20"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Excuse the shoddy proportions on those images.

Define style in resources:
<Style TargetType="Button" x:Key="SunkenEffectStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:01" Value="10,10,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:03" Value="0,0,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Usage:
<Button Content="Click Me" Style="{StaticResource SunkenEffectStyle}"
Height="50" Width="100"/>
this answer also covers your previous question here
i have used keyframes here since you wanted animation to be faster at start and slower while returning

How to make visible only button image?

I have "Save" button which has two states: invisible (when no changes) and visible: when some text changed.
So, I create XAML:
<Button x:Name="btnSaveText"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="0,0,1,0" Width="22" Height="22" Padding="0"
BorderBrush="#EFF4FA"
Background="#EFF4FA" IsEnabled="False"
Style="{StaticResource stlButton}">
<Image Source="/UI.Resources;component/PNGImages/Save.png"
Style="{StaticResource stlButtonImage}" />
</Button>
<Style TargetType="{x:Type Image}" x:Key="stlButtonImage">
<Setter Property="Margin" Value="1" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Stretch" Value="None" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="#EFF4FA"/>
</Trigger>
</Style.Triggers>
</Style>
But, when the button is disabled it looks like this:
How to make visible only button image?

Set the Buttons Background to Transparent :
<Setter Property="Background" Value="Transparent"/>
Full sample:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
If you also want to get rid of the Border you could link it to the Background that will make it invisible, too:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>

How to apply CueBanner for a TextBox in xaml

I want to have a TextBox with CueBanner but it still does not work.
What have I made wrong?
I think the problem is that I am using {RelativeSource TemplatedParent} in Resources. How can I do that without putting in Resources?
My xaml code:
<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ControlTemplate.Resources>
<VisualBrush x:Key="CueBannerBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None">
<VisualBrush.Visual>
<Label Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}"
Foreground="LightGray" />
</VisualBrush.Visual>
</VisualBrush>
</ControlTemplate.Resources>
<Border x:Name="Border" CornerRadius="0" Padding="2" BorderThickness="1" BorderBrush="Black">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
</Trigger>
<Trigger Property="Text" Value="{x:Null}">
<Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" Value="LightGreen"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks for any advice.
EDIT
My problem is solved and here is my final solution:
<Style TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="Border" CornerRadius="0" Padding="2"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1"
Background="{TemplateBinding Background}">
<Grid>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
<TextBlock x:Name="Watermark"
Text="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="LightGray" Margin="5,0" Visibility="Collapsed"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Visibility" TargetName="Watermark" Value="Visible" />
</Trigger>
<Trigger Property="Text" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Watermark" Value="Visible" />
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Visibility" TargetName="Watermark" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="Border" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="IBeam" />
</Trigger>
</Style.Triggers>
</Style>

So I wasn't sure what you meant by "CueBanner" at first until I realized it was just synonymous with "Watermark" pretty much. So as a quick example, this would be a quick and easy alternative (since at first glance I don't understand what made that VisualBrush stuff necessary you had in there) made a bit more clean and re-usable though I'm sure you'll want to change the colors I used just for the example. You might also look into something like the Extended Toolkit for some more of this stuff built in, but theirs for example does watermarks differently than this example.
Anyhow, concept example Style template (noticed added the mscorlib namespace in case you don't have it in your res. dict. already for sys:String;
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style x:Key="CWWatermarkTextBoxStyle" TargetType="{x:Type TextBox}"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
<TextBlock x:Name="GenericWatermark"
Text="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="Red" Margin="5,0" Visibility="Collapsed"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Visibility" TargetName="GenericWatermark" Value="Visible" />
<Setter Property="Background" Value="Yellow" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
<Setter Property="Visibility" TargetName="GenericWatermark" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
....and usage at the instance example;
<TextBox Tag="HEY LOOK! I'M A TEXTBOX WITH A WATERMARK! WEEEE! :)"
Style="{StaticResource CWWatermarkTextBoxStyle}"/>
Voila, a quick and simple wpf xaml textbox with watermark. Hope this helps, cheers.

WPF ItemsControl.AlternationIndex doesn't work in a Trigger

I read many things about this, but I can't find the solution to my problem.
I defined a new style for ListViewItem but the property of ItemsControl.AlternationIndex doesn't trigger.
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="{DynamicResource StandardBackgroundColor}" />
<Setter Property="Foreground" Value="{StaticResource StandardForegroundColor}" />
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#181818" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#626262" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource DisabledGray}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="IOListViewItem" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListViewItem}}">
<Setter Property="Height" Value="60" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border Name="Border" Padding="2" SnapsToDevicePixels="true">
<ContentPresenter
Focusable="True"
Visibility="Visible"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#626262" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource DisabledGray}" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource Blue}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you very much!

set AlternationCount="2" for ListView to see different colors for alternate items
also ControlTemplate in IOListViewItem style doesn't use Backround
<Border Name="Border" Padding="2"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true">

Vertical tabs with image and text as header

I need to create a tab like below.
Using the code as follows i am getting some what near.
<TabControl Margin="-2,0,0,0" Background="#37e8f9" BorderBrush="Red" BorderThickness="0" TabStripPlacement="Left" HorizontalAlignment="Left" Width="261" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Border Name="Border" BorderThickness="1" BorderBrush="Transparent" CornerRadius="5,0,0,5" Margin="10,0,-1,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" Width="100" TextBlock.TextAlignment="Center" TextBlock.LineHeight="100" TextBlock.LineStackingStrategy="BlockLineHeight" MaxHeight="100"
/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#805e00" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Padding" Value="12,10"/>
<Setter TargetName="Border" Property="Background" Value="#37e8f9" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="Red" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Padding" Value="12,10"/>
<Setter Property="Background" Value="Red" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Border" Property="BorderBrush" Value="White" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Tab 1" />
<TabItem Header="Tab 2" />
<TabItem Header="Tab 3" />
And the output is as follows.
Now if i add image the tab header area becomes un clickable over the image and throughout the header; except for the header text which is clickable. How do I make the entire header area clickable with image and text inside it?
Thanks in advance.

Try this Style :
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Border Name="Border" BorderThickness="1" BorderBrush="Transparent" CornerRadius="5,0,0,5" Margin="10,0,-1,0" >
<StackPanel>
<Image Source="Image_Source"/>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" TextBlock.TextAlignment="Center" TextBlock.LineStackingStrategy="BlockLineHeight"
/>
</StackPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#805e00" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Padding" Value="12,10"/>
<Setter TargetName="Border" Property="Background" Value="#37e8f9" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="Red" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Padding" Value="12,10"/>
<Setter Property="Background" Value="Red" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Border" Property="BorderBrush" Value="White" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>