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 re-position adorner when resizing the window?

I have an adorner to show error messages, and the problem is the message get clipped under the window, when the window is small.
So I'm trying to re-position the adorner to button or left according to the window size, or if the user resized the window.
textbox:
<TextBox IsReadOnly="False" Grid.Column="3" Grid.Row="0" Text="{Binding TextValue}" />
style:
<ControlTemplate x:Key="errorToolTipTemplate">
<ControlTemplate.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
</ControlTemplate.Resources>
<DockPanel LastChildFill="true">
<Border Height="Auto" Margin="4,0,0,0" Background="Tomato" BorderBrush="Black" BorderThickness="1" CornerRadius="2" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
</Border>
<AdornedElementPlaceholder Name="customAdorner">
<Border BorderBrush="Red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Width" Value="120" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,2,4,2" />
<Setter Property="Validation.ErrorTemplate" Value="{DynamicResource errorToolTipTemplate}" />
<!--<Setter Property="FontSize" Value="8" />-->
<Setter Property="Background" Value="{DynamicResource entryFieldsBrush}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="{StaticResource windowBrush}" />
</Trigger>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding Path=(Validation.Errors)[0].ErrorContent, RelativeSource={x:Static RelativeSource.Self}}" />
</Trigger>
</Style.Triggers>
</Style>

Using popups was the way to go for me. this link here has a working example of a popup error message.
The Popup control provides a way to display content in a separate
window that floats over the current application window relative to a
designated element or screen coordinate. This topic introduces the
Popup control and provides information about its use.
source

How can I remove this little space between first TabItem and edge of Window?

How can I remove the space between the TabItem and edge of Window. There also seems to be a border around the tab content box as well that is not needed. How can I remove that as well?
Here's my XAML:
<Grid>
<TabControl Margin="0" ItemsSource="{Binding TabItems}" SelectedIndex="0">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<Border Name="Border"
Margin="0,0,-4,0">
</Border>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="Orange" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Header" Value="{Binding Header}"/>
<Setter Property="Content" Value="{Binding Content}"/>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</Grid>
I tried adding a border and setting it to -4 margin, but doesn't seem to be working. Any help will be appreciated. Thanks!

Set the TabControl's BorderThickness property to 0:
<TabControl Margin="0"
ItemsSource="{Binding TabItems}"
SelectedIndex="0"
BorderThickness="0">
<!--The rest of your code here-->
</TabControl>
Update - Adjusting the tab headers
This one is a bit trickier - this will require updating the TabControl's template. You can do this by hand but the TabControl's template is quite large so I recommend using Blend to get started. Open your project in Blend, open the 'Objects and Timeline' window, right click your TabControl, click edit template, and then 'Edit a copy'. This will create a copy of the default TabControl's template for you to start working with.
This is going to create a lot of XAML for you. You will end up with a style resource that looks something like this:
<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>
<TabPanel x:Name="headerPanel"
Background="Transparent"
Grid.Column="0"
IsItemsHost="true"
Margin="2,2,2,0"
Grid.Row="0"
KeyboardNavigation.TabIndex="1"
Panel.ZIndex="1" />
<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.Triggers>
<Trigger Property="TabStripPlacement"
Value="Bottom">
<Setter Property="Grid.Row"
TargetName="headerPanel"
Value="1" />
<Setter Property="Grid.Row"
TargetName="contentPanel"
Value="0" />
<Setter Property="Height"
TargetName="RowDefinition0"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition1"
Value="Auto" />
<Setter Property="Margin"
TargetName="headerPanel"
Value="2,0,2,2" />
</Trigger>
<Trigger Property="TabStripPlacement"
Value="Left">
<Setter Property="Grid.Row"
TargetName="headerPanel"
Value="0" />
<Setter Property="Grid.Row"
TargetName="contentPanel"
Value="0" />
<Setter Property="Grid.Column"
TargetName="headerPanel"
Value="0" />
<Setter Property="Grid.Column"
TargetName="contentPanel"
Value="1" />
<Setter Property="Width"
TargetName="ColumnDefinition0"
Value="Auto" />
<Setter Property="Width"
TargetName="ColumnDefinition1"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition0"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition1"
Value="0" />
<Setter Property="Margin"
TargetName="headerPanel"
Value="2,2,0,2" />
</Trigger>
<Trigger Property="TabStripPlacement"
Value="Right">
<Setter Property="Grid.Row"
TargetName="headerPanel"
Value="0" />
<Setter Property="Grid.Row"
TargetName="contentPanel"
Value="0" />
<Setter Property="Grid.Column"
TargetName="headerPanel"
Value="1" />
<Setter Property="Grid.Column"
TargetName="contentPanel"
Value="0" />
<Setter Property="Width"
TargetName="ColumnDefinition0"
Value="*" />
<Setter Property="Width"
TargetName="ColumnDefinition1"
Value="Auto" />
<Setter Property="Height"
TargetName="RowDefinition0"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition1"
Value="0" />
<Setter Property="Margin"
TargetName="headerPanel"
Value="0,2,2,2" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="TextElement.Foreground"
TargetName="templateRoot"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Find the TabPanel with the name 'headerPanel' and set its left margin to 0. One last thing, if you used Blend it should have set your TabControl's style to use your new style but if not you need make sure you set the style yourself:
Style="{StaticResource TabControlStyle1}"

Style Active point for Chart ToolKit in WPF

I have chart.
I style all points on it using some custom template :
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<chartingToolkit:LineSeries.DataPointStyle>
<Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="#bdb3ce" />
<Setter Property="Foreground" Value="#bdb3ce" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Canvas>
<Ellipse Height="8" Width="8" StrokeThickness="2" Stroke="#bdb3ce" Fill="#423852"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:LineSeries.DataPointStyle>
</chartingToolkit:LineSeries>
Before using Template it was possible to click on point on chart to make it "active" (point became red).
How i can make point active now after applying template?
Before templating code :
<chartingToolkit:Chart Grid.Row="1" Grid.ColumnSpan="2" Name="lineChart" VerticalAlignment="Top" Height="200">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Orientation="X">
<chartingToolkit:LinearAxis.MajorTickMarkStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="White" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Y1" Value="-4" />
<Setter Property="Y2" Value="4" />
</Style>
</chartingToolkit:LinearAxis.MajorTickMarkStyle>
</chartingToolkit:LinearAxis>
<chartingToolkit:LinearAxis Orientation="Y">
<chartingToolkit:LinearAxis.MajorTickMarkStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="White" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Y1" Value="-4" />
<Setter Property="Y2" Value="4" />
</Style>
</chartingToolkit:LinearAxis.MajorTickMarkStyle>
</chartingToolkit:LinearAxis>
</chartingToolkit:Chart.Axes>
<chartingToolkit:Chart.Style>
<Style TargetType="Control">
<Setter Property="Foreground" Value="White" />
</Style>
</chartingToolkit:Chart.Style>
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0" />
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:Chart.PlotAreaStyle>
<Style TargetType="Grid">
<Setter Property="Background" Value="Transparent" />
</Style>
</chartingToolkit:Chart.PlotAreaStyle>
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<chartingToolkit:LineSeries.DataPointStyle>
<Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="White" />
</Style>
</chartingToolkit:LineSeries.DataPointStyle>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>

You have to create a Style for your Ellipse and handle IsMouseOver and MouseDown event.
XAML:
<Window.Resources>
<Style x:Key="EllipseStyle1" TargetType="{x:Type Ellipse}">
<Setter Property="Fill" Value="Yellow"></Setter>
<Setter Property="Stroke" Value="Orange"></Setter>
<Setter Property="Height" Value="12"></Setter>
<Setter Property="Width" Value="12"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="StrokeThickness" Value="3"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="PolylineStyle1" TargetType="{x:Type Polyline}">
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="Stroke" Value="Blue"></Setter>
</Style>
<Style x:Key="DataPointStyle1" TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Width" Value="16"></Setter>
<Setter Property="Height" Value="16"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Ellipse Style="{DynamicResource EllipseStyle1}" MouseDown="Ellipse_MouseDown"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}" >
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
<Canvas x:Name="PlotArea">
<Polyline Points="{TemplateBinding Points}" Style="{DynamicResource PolylineStyle1}" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<chartingToolkit:Chart Margin="0" Title="Chart Title">
<chartingToolkit:Chart.DataContext>
<PointCollection>1,10 2,20 3,30 4,40</PointCollection>
</chartingToolkit:Chart.DataContext>
<chartingToolkit:LineSeries DependentValuePath="Y" IndependentValuePath="X"
ItemsSource="{Binding}" IsSelectionEnabled="True"
Style="{DynamicResource LineSeriesStyle1}"
DataPointStyle="{DynamicResource DataPointStyle1}"/>
</chartingToolkit:Chart>
</Grid>
Code-Behind:
private void Ellipse_MouseDown(object sender, MouseButtonEventArgs e)
{
curr = (Ellipse)sender;
if (curr == prev)
{
if (curr.Fill == Brushes.Yellow)
curr.Fill = Brushes.Red;
else if (curr.Fill == Brushes.Red)
curr.Fill = Brushes.Yellow;
}
else
{
if (prev == null)
prev = curr;
prev.Fill = Brushes.Yellow;
curr.Fill = Brushes.Red;
}
prev = curr;
}

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>