ListView template without gaps between columns

ListView template without gaps between columns - c#

I have a simple application with ListView control which has edited template to disable any selections. Basically it acts like Grid but it can get items using ItemsSource property and has columns. I've used template for ListView control from MSDN and removed all selections etc. but still
some margins are still there and I can't get how to remove them.
The xaml is as follows:
<Window.Resources>
<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>
<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>
<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>
<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>
<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>
<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>
<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>
<LinearGradientBrush x:Key="MenuPopupBrush"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="0.5" />
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#000000FF"
Offset="0" />
<GradientStop Color="#600000FF"
Offset="0.4" />
<GradientStop Color="#600000FF"
Offset="0.6" />
<GradientStop Color="#000000FF"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}"
TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Margin="{TemplateBinding Padding}">
<ScrollViewer DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Focusable="false">
<GridViewHeaderRowPresenter Margin="0,0,0,0"
Columns="{Binding Path=TemplatedParent.View.Columns,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderContainerStyle="{Binding
Path=TemplatedParent.View.ColumnHeaderContainerStyle,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderTemplate="{Binding
Path=TemplatedParent.View.ColumnHeaderTemplate,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderTemplateSelector="{Binding
Path=TemplatedParent.View.ColumnHeaderTemplateSelector,
RelativeSource={RelativeSource TemplatedParent}}"
AllowsColumnReorder="{Binding
Path=TemplatedParent.View.AllowsColumnReorder,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderContextMenu="{Binding
Path=TemplatedParent.View.ColumnHeaderContextMenu,
RelativeSource={RelativeSource TemplatedParent}}"
ColumnHeaderToolTip="{Binding
Path=TemplatedParent.View.ColumnHeaderToolTip,
RelativeSource={RelativeSource TemplatedParent}}"
SnapsToDevicePixels="{TemplateBinding
SnapsToDevicePixels}" />
</ScrollViewer>
<ScrollContentPresenter Name="PART_ScrollContentPresenter"
KeyboardNavigation.DirectionalNavigation="Local"
CanContentScroll="True"
CanHorizontallyScroll="False"
CanVerticallyScroll="False" />
</DockPanel>
<ScrollBar Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Row="1"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{TemplateBinding HorizontalOffset}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
<ScrollBar Name="PART_VerticalScrollBar"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GridViewColumnHeaderGripper"
TargetType="Thumb">
<Setter Property="Width"
Value="18" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}"
Background="Transparent">
<Rectangle HorizontalAlignment="Center"
Width="1"
Fill="{TemplateBinding Background}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type GridViewColumnHeader}"
TargetType="GridViewColumnHeader">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="HeaderBorder"
BorderThickness="0,1,0,1"
Padding="0,0,0,0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter x:Name="HeaderContent"
Margin="0,0,0,1"
RecognizesAccessKey="True"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<!--<Thumb x:Name="PART_HeaderGripper"
HorizontalAlignment="Right"
Margin="0,0,-9,0"
Style="{StaticResource GridViewColumnHeaderGripper}" />-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Role"
Value="Floating">
<Setter Property="Opacity"
Value="0.7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Canvas Name="PART_FloatingHeaderCanvas">
<Rectangle Fill="#60000000"
Width="{TemplateBinding ActualWidth}"
Height="{TemplateBinding ActualHeight}" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="Role"
Value="Padding">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Border Name="HeaderBorder"
BorderThickness="0,1,0,1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type ListView}"
TargetType="ListView">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="true" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border Name="Border"
BorderThickness="10">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer Style="{DynamicResource
{x:Static GridView.GridViewScrollViewerStyleKey}}">
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Border"
Property="Background">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ListViewItem}"
TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="Border"
Padding="0"
SnapsToDevicePixels="true"
Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<!--<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0">
</GridViewRowPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListView x:Name="listView">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="Xs" Width="150" x:Name="col1">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Margin="0">
<Line X1="0" X2="{Binding Width, ElementName=col1}" Stroke="Black" StrokeThickness="2"/>
<!--<TextBlock Text="{Binding X}" Background="AntiqueWhite"/>-->
<TextBlock Text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" Background="AntiqueWhite"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Ys" Width="150" x:Name="col2">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Line X1="0" X2="{Binding Width, ElementName=col2}" Stroke="Black" StrokeThickness="2"/>
<!--<TextBlock Text="{Binding Y}"/>-->
<TextBlock Text="YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Xs" Width="150" x:Name="col3">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Line X1="0" X2="{Binding Width, ElementName=col3}" Stroke="Black" StrokeThickness="2"/>
<TextBlock Text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" Background="AntiqueWhite"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Ys" Width="150" x:Name="col4">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<Line X1="0" X2="{Binding Width, ElementName=col4}" Stroke="Black" StrokeThickness="2"/>
<TextBlock Text="YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Delete">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="Delete"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
The codebehind is:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
listView.ItemsSource = new List<dynamic> {
new {X=5,Y=5},
new {X=5,Y=5},
new {X=5,Y=5},
new {X=5,Y=5},new {X=5,Y=5},
new {X=5,Y=5},
new {X=5,Y=5},
new {X=5,Y=5}};
}
}
So the collection is drop dead simple, moreover ListView only shows multiple X and multiple Y strings for each item.
This is how application window looks like with gaps between columns.
How to remove gaps?

As you can see in this source code this is the default margin for GridViewColumns.
private static readonly Thickness _defalutCellMargin = new Thickness(6, 0, 6, 0);
This value is uses in private CreateCell(GridViewColumn column) method of GridViewRowPresenter and can't be overridden. Only thing you can do is setting an inverse margin in cell template.
Margin="-6,0"
See this related question too.

Related

Rounded edge 3D style button in WPF

I am trying to create a round edge 3D shape styled button in WPF. I want to create a button look like this image.
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="GelBackground" Opacity="1" RadiusX="9" RadiusY="9"
Fill="{TemplateBinding Background}" StrokeThickness="0.35">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#002060" Offset="0" />
<GradientStop Color="#002060" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine" Margin="2,2,2,0" VerticalAlignment="Top" RadiusX="8" RadiusY="8"
Opacity="1" Stroke="Transparent" Height="5px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#002060" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkBlue">
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" TargetName="GelBackground" Value="Blue">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#002060"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="55"/>
<Setter Property="Height" Value="30"/>
</Style>
I used above code for creating button but it will not giving expected result. look like this.
Any help will be appreciated.

You can use borders inside a button template with a blur-effect to achive the requested result:
<Button Content="English" Width="100" Height="50">
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border CornerRadius="5" Background="{TemplateBinding Background}" Name="button" Width="100">
<Grid>
<Border BorderThickness="1,0,1,1" BorderBrush="Black" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="2" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border BorderThickness="0,1,0,0" BorderBrush="White" Margin="2" Opacity="0.7" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="2" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#002060" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontFamily" Value="Consolas" />
</Style>
</Button.Style>
</Button>
Result:

XAML: Access OpacityMask VisualBrush path inside a button control

I'm a newby in designing WPF frontends, please bear with me. Currently I am creating a style for my XAML apps and need assistance at one point.
I have 3 XAML files: 1 for my brush painting paths, 1 for my styles/colores and the mainWindow.xaml.
Within my style I want to create a custom button, containing a stack panel, a grid and a rectangle with a opcityMask fill which is painting a visualBrush path on it.
Would you mind helping me on how to access and change the painting path of my rectangle fill?
Is there a possibility to attach a dependency property or something else changable property to change the Rectangle.OpacityMask -> VisualBrush -> Visual path directly from my mainWindow.xaml?
How can I access such a brush painting path within a style from another xaml file?
Is there a way to attach a new property to the code in mainWindow.xaml where the used painting path can be set?
Or how are you changing such paths when using styles? Thank you all soooo much for your well appreciated help!
If something is not described 100% precise, just let me know.
Here is my code:
mainWindow.xaml
<Window x:Class="SynchDepots.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SynchDepots"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources\Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
[...]
<StackPanel>
<Grid>
[...]
**<Button Grid.Column="0" Grid.Row="1" x:Name="btnTestForNewButtons" Style="{StaticResource DefaultButton2}" Content="Test button" />**
</Grid>
<Grid>
[...]
</Grid>
</StackPanel>
Styles.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SynchDepots">
<!-- ###############
###### COLORS ######
################ -->
<!--#region COLORS-->
<!--Colors-->
<!--
Work related:
ColorCCBlueDark #FF24387F
ColorCCBlueLight #FF009DDC
##############################
Private related:
-->
<Color x:Key="ColorAccentDark">#FF24387F</Color>
<Color x:Key="ColorAccentLight">#FF009DDC</Color>
<SolidColorBrush x:Key="ColorColoredDefaultText" Color="White" />
<SolidColorBrush x:Key="ColorAccentDarkSolid" Color="{StaticResource ColorAccentDark}"/>
<SolidColorBrush x:Key="ColorAccentLightSolid" Color="{StaticResource ColorAccentLight}"/>
<SolidColorBrush x:Key="ColorBackgroundDarkSquare" Color="#E01B1B1B" />
<SolidColorBrush x:Key="ColorBackgroundLightSquare" Color="#E0212121" />
<!--#endregion-->
<!-- ###############
###### BUTTONS #####
################ -->
<!--#region BUTTONS-->
<!--DefaultButton2-->
<Style x:Key="DefaultButton2" TargetType="Button">
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Height" x:Name="BtnHeight" Value="20"/>
<Setter Property="Width" x:Name="BtnWidth" Value="120"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
<GradientStop Color="#D83A3A3A" Offset="0"/>
<GradientStop Color="#D8686868" Offset="1"/>
<GradientStop Color="#D8363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="315"
Color="#FF878787"
RenderingBias="Quality"
Opacity="0.4"
ShadowDepth="5"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="pr7">
<StackPanel x:Name="btnStackPanel">
<Border Background="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF464646" Offset="0.6"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid x:Name="pr8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="99"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="2" x:Name="rctImg">
<Rectangle.Width>16</Rectangle.Width>
<Rectangle.Height>16</Rectangle.Height>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1" />
<GradientStop Color="{StaticResource ColorAccentDark}" Offset="0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<VisualBrush x:Name="opacityMaskVisualPath" Stretch="Uniform" Visual="**{StaticResource imgBtnPreferencesTune}**"/>
</Rectangle.OpacityMask>
</Rectangle>
<Rectangle x:Name="btnRectangleSplitter" Grid.Column="1" Width="1" Height="Auto" HorizontalAlignment="Center">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00959595" Offset="0.05"/>
<GradientStop Color="#FF727272" Offset="0.4"/>
<GradientStop Color="#FF727272" Offset="0.6"/>
<GradientStop Color="#00959595" Offset="0.95"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="btnTxtContent" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" Text="{TemplateBinding Content}"></TextBlock>
</Grid>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
[...]
<!--#endregion-->

I fixed this problem as follows:
- seperated all elements and placed them into their own style;
- putting each VisualBrush -> Visual into a single style, linked to the Path/Data style;
- putting the button design into a single style;
- referenced the styles one by one in the MainWindow.xaml:
MainWindow.xaml
<Window x:Class="SynchDepots.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:local="clr-namespace:SynchDepots"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources\Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
[...]
<Button Grid.Column="1" Grid.Row="1" Style="{StaticResource DefaultButton}">
<StackPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0" Width="118" Height="18">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="97"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Style="{StaticResource rctForImgBtnPreferencesGearWheel}"/>
<Rectangle Grid.Column="1" Style="{StaticResource rctSplitter}"/>
<TextBlock Grid.Column="2" VerticalAlignment="Center" TextAlignment="Center">Geiler Scheiß</TextBlock>
</Grid>
</StackPanel>
</Button>
Referenced to the single styles:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SynchDepots">
<!-- ###############
###### COLORS ######
################ -->
<!--#region COLORS-->
<!--Colors-->
<!--
Work related:
ColorCCBlueDark #FF24387F
ColorCCBlueLight #FF009DDC
##############################
Private related:
-->
<Color x:Key="ColorAccentDark">#FF24387F</Color>
<Color x:Key="ColorAccentLight">#FF009DDC</Color>
<SolidColorBrush x:Key="ColorColoredDefaultText" Color="White" />
<SolidColorBrush x:Key="ColorAccentDarkSolid" Color="{StaticResource ColorAccentDark}"/>
<SolidColorBrush x:Key="ColorAccentLightSolid" Color="{StaticResource ColorAccentLight}"/>
<SolidColorBrush x:Key="ColorBackgroundDarkSquare" Color="#E01B1B1B" />
<SolidColorBrush x:Key="ColorBackgroundLightSquare" Color="#E0212121" />
<!--#endregion-->
<!-- ###############
####### TEXTS ######
################ -->
<!--#region TEXTS-->
<!--ColoredDetaultText-->
<Style x:Key="WhiteText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="{StaticResource ColorColoredDefaultText}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontStyle" Value="Normal"/>
</Style>
<!--#endregion-->
<!-- ###############
###### BUTTONS #####
################ -->
<!--#region BUTTONS-->
<!--DefaultButton-->
<Style x:Key="DefaultButton" TargetType="Button">
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Height" x:Name="BtnHeight" Value="20"/>
<Setter Property="Width" x:Name="BtnWidth" Value="120"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF464646" Offset="0.6"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
<GradientStop Color="#FF3A3A3A" Offset="0"/>
<GradientStop Color="#FF686868" Offset="1"/>
<GradientStop Color="#FF363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="315"
Color="#FF878787"
RenderingBias="Quality"
Opacity="0.4"
ShadowDepth="5"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.65">
<GradientStop Color="#FF292929" Offset="0"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
<!--<GradientStop Color="#FFA8A8A8" Offset="1"/>-->
<GradientStop Color="#FF363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.7">
<GradientStop Color="#FF282828" Offset="0"/>
<GradientStop Color="#FF3C3C3C" Offset="1"/>
<GradientStop Color="#FF282828" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.200"
Storyboard.TargetProperty="FontSize" To="13"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.800"
Storyboard.TargetProperty="FontSize" To="12"
AccelerationRatio="0.4"
DecelerationRatio="0.6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<!--DefaultButton2-->
<Style x:Key="DefaultButton2" TargetType="Button">
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Height" x:Name="BtnHeight" Value="20"/>
<Setter Property="Width" x:Name="BtnWidth" Value="120"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
<GradientStop Color="#D83A3A3A" Offset="0"/>
<GradientStop Color="#D8686868" Offset="1"/>
<GradientStop Color="#D8363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="315"
Color="#FF878787"
RenderingBias="Quality"
Opacity="0.4"
ShadowDepth="5"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="btnGridRoot">
<StackPanel x:Name="btnStackPanel">
<Border Background="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF464646" Offset="0.6"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid x:Name="btnGridForContent" Width="120" Height="18">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="99"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
</Grid>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
[...]
</Style.Triggers>
</Style>
<!--#endregion-->
<!-- ###############
##### CONTENTS #####
################ -->
<!--#region CONTENTS -->
<!--#endregion-->
<!-- ###############
## SHAPES / FORMS ##
################ -->
<!--#region SHAPES / FORMS-->
<!--Main Rectangle for Button Images-->
<Style x:Key="rctBaseForImg" TargetType="Rectangle">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Margin" Value="2,1"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1" />
<GradientStop Color="{StaticResource ColorAccentDark}" Offset="0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<!--Rectangle for seperator-->
<Style x:Key="rctSplitter" TargetType="Rectangle">
<Setter Property="Width" Value="1"/>
<Setter Property="Height" Value="18"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00959595" Offset="0.05"/>
<GradientStop Color="#FF727272" Offset="0.4"/>
<GradientStop Color="#FF727272" Offset="0.6"/>
<GradientStop Color="#00959595" Offset="0.95"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<!--Rectangle for path imgBtnPreferencesGearWheel-->
<Style x:Key="rctForImgBtnPreferencesGearWheel" BasedOn="{StaticResource rctBaseForImg}" TargetType="Rectangle">
<Setter Property="OpacityMask">
<Setter.Value>
<VisualBrush Stretch="Uniform" Visual="{StaticResource imgBtnDefault}"/>
</Setter.Value>
</Setter>
</Style>
<!--#endregion-->
And this is referenced to the paths documented in my Icons.xaml:
<!--imgBtnPreferences // Settings-->
<Path x:Key="imgBtnDefault"
Data="M10 17l5-5-5-5v10z"
Fill="White" />
[...]

How to styling WPF button like in CSS attached example

I try to get the look of the button like in css you can see here.
When you press this button it looks as if it goes inside.
Following is my XAML try, I used DropShadowEffect, but is not exactly like in css.
How can I achieve exactly look like in css?
Is it possible to translate CSS to XAML?
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Window1" Height="250" Width="400">
<Window.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border BorderThickness="0,0,0,0"
CornerRadius="5" Margin="0,6,0,-5" AllowDrop="True">
<Border.Background>
<RadialGradientBrush SpreadMethod="Reflect">
<GradientStop Color="#FFA8A8A8" Offset="0.923"/>
<GradientStop Color="White"/>
<GradientStop Color="#FFE0E0E0" Offset="0.391"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<Border x:Name="Shadowborder" BorderBrush="Black" BorderThickness="0,0,0,10"
CornerRadius="5">
<Border.Effect>
<DropShadowEffect Direction="270" Opacity="0.5"/>
</Border.Effect>
</Border>
<Border CornerRadius="5" x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
<Setter Property="Margin" TargetName="border" Value="0,5,0,-5"/>
<Setter Property="Margin" TargetName="Shadowborder" Value="0,5,0,-5"/>
<Setter Property="Effect" TargetName="Shadowborder">
<Setter.Value>
<DropShadowEffect Direction="270" Opacity="0.3" BlurRadius="1" ShadowDepth="1"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" Content="Hello!"/>
</Grid>
</Window>

Achieve exactly look like in CSS?
Yes, you only need to convert to XAML from CSS - by your brain.
Maybe it's a bit bloated, but it should be the most similar, welcome others to improve
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="25,10"
Content="Hello!"
FontSize="36"
FontFamily="Franklin Gothic Medium">
<Button.Template>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
Storyboard.TargetProperty="Margin"
To="0,4,0,4"
Duration="0:0:0.15">
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
Storyboard.TargetProperty="ShadowDepth"
To="2"
Duration="0:0:0.15">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
Storyboard.TargetProperty="Margin"
To="0,0,0,8"
Duration="0:0:0.15">
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
Storyboard.TargetProperty="ShadowDepth"
To="6"
Duration="0:0:0.15">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Grid>
<Grid.Effect>
<DropShadowEffect x:Name="BUTTON_SHADOW"
BlurRadius="6"
Color="Gray"
Direction="-90"
ShadowDepth="6" />
</Grid.Effect>
<Border CornerRadius="0,0,10,10"
VerticalAlignment="Bottom"
Height="18">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#DEDEDE"
Offset="0.3" />
<GradientStop Color="#BEBEBE"
Offset="0.5" />
<GradientStop Color="#4E4E4E"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Name="BUTTON_FACE"
Margin="0,0,0,8">
<Border.Effect>
<DropShadowEffect BlurRadius="0"
Color="White"
Direction="90"
ShadowDepth="1" />
</Border.Effect>
<Border CornerRadius="10"
Background="#E8E8E8">
<Border.Effect>
<DropShadowEffect BlurRadius="1"
Direction="-90"
ShadowDepth="1"
Color="White" />
</Border.Effect>
<Grid>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,2"
EndPoint="2,0"
MappingMode="Absolute"
SpreadMethod="Reflect">
<GradientStop Color="#00FFFFFF"
Offset="0" />
<GradientStop Color="#00FFFFFF"
Offset="0.2" />
<GradientStop Color="#FFD2D2D1"
Offset="0.2" />
<GradientStop Color="#FFD2D2D1"
Offset="0.8" />
<GradientStop Color="#00FFFFFF"
Offset="0.8" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#00FFFFFF"
Offset="0" />
<GradientStop Color="#7FFFFFFF"
Offset="0.2" />
<GradientStop Color="#7FFFFFFF"
Offset="0.8" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#4CD2D2D2"
Offset="0" />
<GradientStop Color="#00D2D2D2"
Offset="0.2" />
<GradientStop Color="#00D2D2D2"
Offset="0.8" />
<GradientStop Color="#4CD2D2D2"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0"
StartPoint="0,1">
<GradientStop Color="#00FFFFFF"
Offset="0.5" />
<GradientStop Color="#4CFFFFFF"
Offset="0.5" />
<GradientStop Color="#33FFFFFF"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border>
<Border.Effect>
<DropShadowEffect BlurRadius="0"
Direction="-90"
ShadowDepth="1"
Color="White" />
</Border.Effect>
<ContentPresenter x:Name="contentPresenter"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="0"
Direction="90"
ShadowDepth="1"
Color="#262F33" />
</ContentPresenter.Effect>
</ContentPresenter>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
And it seem I've found something interesting.
Using CSS in XAML - XamlCSS
https://forums.xamarin.com/discussion/67249/xamlcss-styling-xaml-applications-with-css

WPF- Background overflowing the border of the tab item

I am trying to make the background not overflow the tab item in WPF. Here's what is happening (the blue background should not extend outside the border):
Here's my WPF XAML code:
<Window x:Class="DevelopmentConfigurator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DevelopmentConfigurator"
mc:Ignorable="d"
Title="Development Configurator" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="467*"/>
</Grid.ColumnDefinitions>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2" Margin="10">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Background="{TemplateBinding Background}" Height="30">
<Border Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="0,2,2,0" Padding="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FF0067CD"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Background" Value="White"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF00A0E8" Offset="0"/>
<GradientStop Color="#FF0067CD" Offset="1"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
<GradientStop Color="#FFCDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Packages">
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Updates" Padding="0" />
<TabItem Header="EnvironmentVariables" />
</TabControl>
</Grid>
</Window>

Move the background binding from the Grid to the Border of your template.
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Height="30">
<Border Name="Border" Background="{TemplateBinding Background}" ...

SnapsToDevicePixels option

I am trying to style some tabs but I ran into this issue where the color of the border changes as I resize window. First of all, I used this http://blogs.intuidev.com/post/2010/01/25/TabControlStyling_PartOne.aspx to style the tabs if you're wondering about the code.
Also, here is the pic of what's wrong.
EDIT:
<Color x:Key="BorderColor_Base">#888</Color>
<Color x:Key="TabControl_BackgroundColor_Base">#CCC</Color>
<SolidColorBrush x:Key="TabControl_BackgroundBrush_Base"
Color="{StaticResource TabControl_BackgroundColor_Base}"/>
<LinearGradientBrush x:Key="TabItemPanel_BackgroundBrush"
StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99"
Color="{StaticResource BorderColor_Base}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItem_BorderBrush_Selected"
Color="{StaticResource BorderColor_Base}" />
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource TabItemPanel_BackgroundBrush}"
Padding="{StaticResource TabItemPanel_Padding}">
<TabPanel Grid.Row="0" IsItemsHost="True"/>
</Border>
<ContentPresenter Grid.Row="1" ContentSource="SelectedContent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Background="{StaticResource TabControl_BackgroundBrush_Base}"
BorderBrush="{StaticResource TabItem_BorderBrush_Selected}"
Margin="{StaticResource TabItemMargin_Selected}"
BorderThickness="2,1,1,1">
<!-- This is where the Content of the TabItem will be rendered. -->
<Viewbox>
<TextBlock x:Name="Header">
<ContentPresenter x:Name="ContentSite"
ContentSource="Header"
Margin="7,2,12,2"
RecognizesAccessKey="True"/>
</TextBlock>
</Viewbox>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Base}" />
<Setter Property="Panel.ZIndex" Value="90" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="2,1,1,0" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Header" Property="Background" Value="#CCC" />
<Setter TargetName="Header" Property="Foreground" Value="#888" />
<Setter Property="Panel.ZIndex" Value="80" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The issue is with this brush:
<LinearGradientBrush x:Key="TabItemPanel_BackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent" />
<GradientStop Offset="0.99" Color="{StaticResource BorderColor_Base}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
You are using a gradient from transparent to #888 as your background, so you are seeing one of the colors "in between" transparent and #888. Instead, you can use a Transparent background and border of #888, like so:
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Transparent" BorderBrush="#888" BorderThickness="0,0,0,1" Padding="{StaticResource TabItemPanel_Padding}"
SnapsToDevicePixels="True" />
<TabPanel Grid.Row="0" IsItemsHost="True" />
<ContentPresenter Grid.Row="1" ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You may need to tweak the Margin of the Border and/or the TabPanel to ensure they line up correctly though.

Labas!
Try to increase line's height, for instance set it to 5 or 10 pixels. If color is wrong again it means that you wrong styled TabControl.

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

ListView template without gaps between columns - c#

Related

Rounded edge 3D style button in WPF

XAML: Access OpacityMask VisualBrush path inside a button control

How to styling WPF button like in CSS attached example

WPF- Background overflowing the border of the tab item

SnapsToDevicePixels option

Categories

Resources