We Keep Coding

WPF ScrollViewer without "bars", just the buttons on the left and right

How can I achieve to have a TabControl where my tabs are scrollable in a ScrollViewer, but without having the "bar" of the scrollviewer, and the navigation buttons surrounding the tabs. Like an internet browser does
I added the tabs in scrollviewer as shown below, but I don't know if it is achievable to customize the scrollviewer to my needs.
<ScrollViewer
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
Grid.Row="0" Grid.Column="1">
<TabPanel
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Margin="2,2,2,0"
IsItemsHost="true"/>

You can try this or the code below.
The code is not mine, I just copied it from here, but i think that's the code you are looking for.
<TabControl x:Name="myTab" >
<TabControl.Resources>
<LinearGradientBrush x:Key="TabItemDefaultBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#FFF" />
<GradientStop Offset="1.0" Color="#EEE" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="TabItemSelectBackgroundBrush" Color="#AAA" />
<SolidColorBrush x:Key="TabItemMouseoverBrush" Color="#BBB" />
<SolidColorBrush x:Key="CloseButtenBackgroundBrush" Color="#169" />
<SolidColorBrush x:Key="CloseButtenMouseoverBrush" Color="#E5E" />
<SolidColorBrush x:Key="CloseButtenPressBrush" Color="#E0E" />
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="tabBorder"
MinWidth="100"
MinHeight="30"
Margin="0,0,20,0"
Background="{StaticResource TabItemDefaultBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="3,15,0,0">
<Grid>
<Button
x:Name="tabButton"
Width="15"
Height="15"
Margin="90,10,0,0"
Click="tabButton_Click"
Visibility="Hidden">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.Background>
<VisualBrush Viewbox="0,0,1024,1024" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Path
x:Name="mypath"
Data="M509.953388 63.243393c-246.709915 0-446.708971 200.00008-446.708971 446.708971 0 246.711961 200.00008 446.708971 446.708971 446.708971 246.711961 0 446.708971-199.998033 446.708971-446.708971C956.662359 263.243473 756.664326 63.243393 509.953388 63.243393zM735.3683 670.450778c17.933441 17.933441 17.933441 46.984081 0 64.917522-8.965186 8.965186-20.712741 13.44829-32.456203 13.44829-11.746532 0-23.493064-4.483104-32.459273-13.44829L509.953388 574.868863 349.455997 735.3683c-8.968256 8.965186-20.712741 13.44829-32.459273 13.44829s-23.493064-4.483104-32.459273-13.44829c-17.933441-17.933441-17.933441-46.984081 0-64.917522l160.499437-160.497391L284.537452 349.452927c-17.933441-17.933441-17.933441-46.984081 0-64.917522 17.933441-17.931395 46.984081-17.931395 64.917522 0l160.497391 160.499437 160.499437-160.499437c17.931395-17.931395 46.984081-17.931395 64.915475 0 17.933441 17.933441 17.933441 46.984081 0 64.917522L574.87091 509.953388 735.3683 670.450778z"
Fill="{StaticResource CloseButtenBackgroundBrush}" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="mypath" Property="Fill" Value="{StaticResource CloseButtenMouseoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="mypath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<ContentPresenter
x:Name="ContentSite"
Margin="12,2,12,2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tabBorder" Property="Background" Value="{StaticResource TabItemSelectBackgroundBrush}" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="tabButton" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="tabBorder" Property="Background" Value="{StaticResource TabItemMouseoverBrush}" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="tabButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrolltoLeft" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
x:Name="border"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="0"
CornerRadius="0"
TextBlock.Foreground="White">
<Grid>
<Viewbox Margin="-5,-2,0,0">
<Path
x:Name="BPath"
Data="M269.6 535.8l462.9 319.3c30.6 21.1 72.3-0.8 72.3-38V177.5c0-34.1-38.2-54.2-66.3-34.8L269.6 466.2c-24.3 16.8-24.3 52.8 0 69.6z"
Fill="Gray" />
</Viewbox>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrolltoRight" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
x:Name="border"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="0"
CornerRadius="0"
TextBlock.Foreground="White">
<Grid>
<Viewbox Margin="-5,-2,0,0">
<Path
x:Name="BPath"
Data="M767.6 547.8L304.7 867.1c-30.6 21.1-72.3-0.8-72.3-38V189.5c0-34.1 38.2-54.2 66.3-34.8l468.9 323.5c24.3 16.8 24.3 52.8 0 69.6z"
Fill="Gray" />
</Viewbox>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<RepeatButton
x:Name="ScrolltoLeft_Btn"
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Top"
Command="{x:Static ScrollBar.LineLeftCommand}"
CommandTarget="{Binding ElementName=sv}"
Style="{StaticResource ScrolltoLeft}" />
<ScrollViewer
x:Name="sv"
Grid.Row="0"
Grid.Column="1"
HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="ScrollViewer_PreviewMouseWheel"
VerticalScrollBarVisibility="Disabled">
<TabPanel
x:Name="HeaderPanel"
Panel.ZIndex="1"
IsItemsHost="true"
KeyboardNavigation.TabIndex="1" />
</ScrollViewer>
<ContentPresenter
x:Name="PART_SelectedContentHost"
Grid.Row="1"
Grid.ColumnSpan="2"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
ContentSource="SelectedContent"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<RepeatButton
x:Name="ScrolltoRight_Btn"
Grid.Row="0"
Grid.Column="2"
VerticalAlignment="Top"
Command="{x:Static ScrollBar.LineRightCommand}"
CommandTarget="{Binding ElementName=sv}"
Style="{StaticResource ScrolltoRight}" />
</Grid>
</ControlTemplate>
</TabControl.Template>
<TabItem Background="AliceBlue" Header="test1" >
<Label Content="test1 Content goes here..." />
</TabItem>
<TabItem Background="AliceBlue" Header="test2" >
<Label Content="test2 Content goes here..." />
</TabItem>
<TabItem Background="AliceBlue" Header="test3" >
<Label Content="test3 Content goes here..." />
</TabItem>
<TabItem Header="test4" />
<TabItem Header="test5" />
<TabItem Header="test6" />
<TabItem Header="test7" />
<TabItem Header="test8" />
<TabItem Header="test9" />
<TabItem Header="test10" />
<TabItem Header="test11" />
<TabItem Header="test12" />
<TabItem Header="test13" />
<TabItem Header="test14" />
private void tabButton_Click(object sender, RoutedEventArgs e)
{
Button b = sender as Button;
TabItem item = FindParent<TabItem>(b);
myTab.Items.Remove(item);
}
public T FindParent<T>(DependencyObject child) where T : DependencyObject
{
//get parent item
DependencyObject parentObject = VisualTreeHelper.GetParent(child);
//we've reached the end of the tree
if (parentObject == null) return null;
//check if the parent matches the type we're looking for
T parent = parentObject as T;
if (parent != null)
return parent;
else
return FindParent<T>(parentObject);
}
private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
ScrollViewer scrollviewer = sender as ScrollViewer;
if (e.Delta > 0)
scrollviewer.LineLeft();
else
scrollviewer.LineRight();
e.Handled = true;
}

Can you make a style with Buttons like the ones in the picture with an text over the image marked with a color?

I am wondering if its possible in WPF to make a Button style where you have a text, an image and text over the image (upon the image) with a color mark as illustrated on the picture below?
Until now i only got this
<Style TargetType="{x:Type Button}" x:Key="CatProBtn">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<!--<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>-->
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}"
HorizontalAlignment="Right" VerticalAlignment="Center"
/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="PreviewMouseDown">
<SoundPlayerAction Source="C:\Users\shaban\Downloads\Cash_register_beep_sound_.wav" />
</EventTrigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<!--<Setter TargetName="PathIcon" Property="Fill" Value="Black" />-->
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Wheat"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
....
<Button
Style="{StaticResource CatProBtn}"
Margin="1,1,0,3"
Name="Shaban"
Height="Auto"
Width="Auto"
Grid.Row="1"
Grid.Column="1"
Click="Button_Click">
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Text="Ispinde"></TextBlock>
<Image Source="C:\Users\shaban\Pictures\Picture5.png" Stretch="Uniform"></Image>
<TextBlock Text="Ispinde" HorizontalAlignment="Right"/>
</StackPanel>
</Button>

Inspire from code like this in your Button and modify the values to achieve your desired result.
Use a Grid to layout your content. Superimpose the price on the Image.
<Button MinHeight="50" HorizontalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Title" TextAlignment="Center"/>
<!-- This is where your image is in your code -->
<TextBlock Grid.Row="1" Text="Your
image
here..." FontSize="14" Background="Gray" TextAlignment="Center"/>
<TextBlock Grid.Row="2" Text="Description Description Description" TextAlignment="Center" TextWrapping="Wrap" FontSize="8" MaxWidth="100"/>
<!-- Superimpose price on top of image with some opacity -->
<TextBlock Grid.Row="1" Text="20,00 kr." Background="Yellow" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,12" Opacity="0.6" FontSize="8"/>
</Grid>
</Button>
Result

You can overlay a Control over another Control by using Grids. It will be something like:
<Button>
<Grid>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Text="Ispinde"/>
<Image Source="C:\Users\shaban\Pictures\Picture5.png"" Stretch="Uniform"/>
</StackPanel>
<Grid Width="100" Height="40" HorizontalAlignment="Right">
<Grid Background="Red" Opacity="0.6"/>
<TextBlock Foreground="White" Text="Overlay"/>
</Grid>
</Grid>
</Button>

WPF TabItem - Image Binding

Issue
I am trying to bind an Image from my TabItem to my TabControlResource section but I cannot seem to do this. The Header text is fine as the TabItem has a Header attribute but there is nothing I can add my image to.
Code
Here is the whole of my TabControl code:
<TabControl Margin="10" BorderBrush="#c83620" BorderThickness="4" Background="#e37e6e" FontFamily="Segoe UI" FontSize="14" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
<StackPanel Orientation="Horizontal" Margin="6,4,6,4">
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
<Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#e37e6e" />
<Setter TargetName="Text" Property="TextBlock.Foreground" Value="White"/>
<Setter TargetName="Text" Property="TextBlock.FontWeight" Value="Bold"/>
<Setter TargetName="Border" Property="Margin" Value="1,1,1,-4"/>
<Setter TargetName="Border" Property="Padding" Value="2"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Text" Property="TextBlock.Foreground" Value="#c83620"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Margin="-3,0,0,0" Header="Login">
</TabItem>
<TabItem Header="General" >
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
As you can see from the section below I am binding the content of the label to the header of the TabItem and it works fine:
<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
<StackPanel Orientation="Horizontal" Margin="6,4,6,4">
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
<Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
</StackPanel>
</Border>
But I want different images for each of the TabItems. Where can i bind the Image to on the TabItem to get the correct image?

You can do that by using other properties of the Template, for example Tag property. So the image binding should look like this.
<Image Name="img" Height="15" Width="15" Margin="0,0,4,0"
Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
And you should define in the resources all images like that.
<Image x:Key="testImage" Source="/WPFTest;component/Images/Reload.png" />
And bind it to the Tag property of TabItem.
<TabItem Header="General" Tag="{StaticResource testImage}" >

Add Controllers to <Style> from Code-Behind (WPF)

I'm a beginner in WPF. It's hard as hell just so you know!
ok, i have a little style for my application (Actually i copied it, and really don't know whats happening in the middle so...)
i wanted to add some Hyperlinks and Buttons to header of application. so i edited the style and added those from there.
but now i want to change content of those from code-behind, but as you already know that's not happening!
This is my style in Application.Resources:
<BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />
<Color x:Key="WindowBackgroundColor">#FF2D2D30</Color>
<Color x:Key="HighlightColor">Orange</Color>
<Color x:Key="BlueColor">AntiqueWhite</Color>
<Color x:Key="ForegroundColor">#FFF4F4F5</Color>
<SolidColorBrush x:Key="WindowBackgroundColorBrush" Color="{StaticResource WindowBackgroundColor}"/>
<SolidColorBrush x:Key="HighlightColorBrush" Color="{StaticResource HighlightColor}"/>
<SolidColorBrush x:Key="BlueColorBrush" Color="{StaticResource BlueColor}"/>
<SolidColorBrush x:Key="ForegroundColorBrush" Color="{StaticResource ForegroundColor}"/>
<Style x:Key="WindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}" />
<Setter Property="Background" Value="Transparent" />
<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 Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource HighlightColorBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource BlueColorBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="contentPresenter" Property="Opacity" Value=".5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type Hyperlink}" TargetType="Hyperlink">
<Setter Property="TextDecorations" Value="{x:Null}"/>
<Setter Property="Foreground" Value="#FFF4F4F5"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style x:Key="MyWindowStyle" TargetType="local:MainWindow">
<Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}" />
<Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
<Setter Property="ResizeMode" Value="NoResize" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CornerRadius="0" GlassFrameThickness="1" UseAeroCaptionButtons="False"/>
</Setter.Value>
</Setter>
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MainWindow">
<Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}" Background="{StaticResource WindowBackgroundColorBrush}">
<Grid>
<Border BorderThickness="1">
<AdornerDecorator>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="27" />
<RowDefinition Height="*" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1" Grid.RowSpan="2" Margin="7"/>
<Image Width="30" Height="30" />
<!-- This is where i want put those Hyperlinks and the Button -->
<TextBlock Margin="50,5,0,0">
<Hyperlink NavigateUri="SupportPage.xaml" RequestNavigate="Hyperlink_Support">Support</Hyperlink>
</TextBlock>
<TextBlock Margin="122,5,0,0">
<Hyperlink NavigateUri="HelpPage.xaml" RequestNavigate="Hyperlink_Help">Support</Hyperlink>
</TextBlock>
<Button Name="btCustom" Content="btThatIWantChangeItsContent" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<TextBlock Margin="220,5,0,0">
<Hyperlink NavigateUri="AboutPage.xaml" RequestNavigate="Hyperlink_About">About</Hyperlink>
</TextBlock>
<!-- to here -->
<Rectangle Mouse.MouseDown="rectangleMoveWindow_MouseDown" Margin="300,0,0,0" x:Name="HeaderBackground" Height="25" Fill="{DynamicResource WindowBackgroundColorBrush}" VerticalAlignment="Top" Grid.Row="0"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
<Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="minimize" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
<Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2" />
</Grid>
</Button.Content>
</Button>
<Grid Margin="1,0,1,0">
<Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="restore" Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="30" Height="25" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
<Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1" />
</Grid>
</Button.Content>
</Button>
<Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="maximize" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="31" Height="25">
<Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2" />
</Grid>
</Button.Content>
</Button>
</Grid>
<Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="close" Style="{StaticResource WindowButtonStyle}">
<Button.Content>
<Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
<Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
<Grid Grid.Row="2">
<Path x:Name="ResizeGrip" Visibility="Collapsed" Width="12" Height="12" Margin="1" HorizontalAlignment="Right"
Stroke="{StaticResource BlueColorBrush}" StrokeThickness="1" Stretch="None" Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3" />
</Grid>
</Grid>
</AdornerDecorator>
</Border>
<Border BorderBrush="{StaticResource BlueColorBrush}" BorderThickness="1" Visibility="{Binding IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource bool2VisibilityConverter}}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Restore" Property="Visibility" Value="Visible" />
<Setter TargetName="LayoutRoot" Property="Margin" Value="7" />
</Trigger>
<Trigger Property="WindowState" Value="Normal">
<Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
<Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip" />
<Condition Property="WindowState" Value="Normal" />
</MultiTrigger.Conditions>
<Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
so i don't know how change content of Hyperlinks or even i could replace them with Button if that is necessary. just tell me how i could change those content. of course i have to say i tried FindResource but couldn't find that Hyperlinks or Buttons. Thanks in advance guys.

try this:
1. create a new WpfApplication project
2. remove MainWindow.xaml
3. add pages: startup.xaml, page1.xaml or more, and set diff background
4. change StartupUri="startup.xaml" in App.xaml
5. add NavigationWindow Style in App.xaml
<Style TargetType="{x:Type NavigationWindow}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type NavigationWindow}">
<Border Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<AdornerDecorator Grid.Row="1">
<ContentPresenter Name="PART_NavWinCP" ClipToBounds="true" />
</AdornerDecorator>
<StackPanel Grid.Row="0" Margin="20" Orientation="Horizontal">
<Label>
<Hyperlink NavigateUri="Page1.xaml">Page1</Hyperlink>
</Label>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<StackPanel x:Name="panel" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<StackPanel.Resources>
<sys:String x:Key="help">Support</sys:String>
</StackPanel.Resources>
<Label DataContext="{StaticResource help}">
<Hyperlink><TextBlock Text="{DynamicResource help}"/></Hyperlink>
</Label>
<Button Content="OK" Click="button_Click"/>
</StackPanel>
private void button_Click(object sender, RoutedEventArgs e)
{
panel.Resources["help"] = "Help";
}

custom dropshadow on context menu not applied to submenu

I have a ContextMenu defined in XAML as follows:
<ContextMenu x:Name="deleteContextMenu">
<ContextMenu.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</ContextMenu.BitmapEffect>
<MenuItem Header="Delete" Click="DeleteMenuItem_Click" Name="DeleteMenuItem" Background="{StaticResource ContextMenuBrush}">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem2" Background="{StaticResource ContextMenuBrush}">
</MenuItem>
</MenuItem>
</ContextMenu>
My custom DropShadow is applied to the main ContextMenu pop-up, but when I click the MenuItem, the submenu pop-up still has the horrible default shadow that looks terribly out of place with my color scheme. How can I force all submenus to have the same custom DropShadow effect?
UPDATE:
if I hack the visual tree for a MenuItem on the main context menu pop-up thusly:
StackPanel menuStackPanel = VisualTreeHelper.GetParent(menuItem as DependencyObject) as StackPanel;
Border border = VisualTreeHelper.GetParent(menuStackPanel) as Border;
border.Background = Brushes.Red;
I can control the color of the main pop-up.
For a subMenuItem in the submenu pop-up, there is no parent of any type returned by the visual tree helper.

I have a hacky suggestion:
<ContextMenu x:Name="deleteContextMenu">
<ContextMenu.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</ContextMenu.BitmapEffect>
<ContextMenu.Resources>
<Style TargetType="{x:Type PopupRoot}">
<Setter Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</Setter.Value>
</Setter>
</Style>
</ContextMenu.Resources>
<MenuItem Header="Delete" Name="DeleteMenuItem" Background="White" UsesItemContainerTemplate="True">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem2" Background="White" UsesItemContainerTemplate="True">
</MenuItem>
</MenuItem>
</ContextMenu>
The child items of a MenuItem are displayed in a Popup (can be seen in MenuItem ControlTemplate Example. Thanks to this and snoop the style <Style TargetType="{x:Type PopupRoot}"> should apply the shadow to the child items.
Plan B:
You'll need to add the PresentationFramework.Classic (or another Aero etc.) assembly to the project.
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic
<ControlTemplate TargetType="MenuItem" x:Key="miTest">
<Grid SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="{TemplateBinding Panel.Background}" Stroke="{TemplateBinding Border.BorderBrush}" StrokeThickness="1" Name="Bg" />
<Rectangle RadiusX="2" RadiusY="2" Stroke="#00FFFFFF" StrokeThickness="1" Name="InnerBorder" Margin="1,1,1,1" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="37" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
<ColumnDefinition Width="17" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding MenuItem.Icon}" ContentSource="Icon" Name="Icon" Margin="1,1,1,1" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
<Border BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" BorderBrush="#FFCDD3E6" Background="#FFE6EFF4" Name="GlyphPanel" Width="22" Height="22" Margin="1,1,1,1" Visibility="Hidden">
<Path Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="#FF0C12A1" Name="Glyph" Width="9" Height="11" FlowDirection="LeftToRight" />
</Border>
<ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Grid.Column="2" />
<TextBlock Text="{TemplateBinding MenuItem.InputGestureText}" Margin="{TemplateBinding Control.Padding}" Visibility="Collapsed" Grid.Column="4" />
<Path Data="M0,0L4,3.5 0,7z" Fill="{TemplateBinding TextElement.Foreground}" Margin="4,0,0,0" VerticalAlignment="Center" Grid.Column="5" />
</Grid>
<Popup IsOpen="{TemplateBinding IsSubmenuOpen}" Placement="Right" HorizontalOffset="-2" VerticalOffset="-3" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" AllowsTransparency="True" Name="PART_Popup" Focusable="False">
<mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw">
<mwt:SystemDropShadowChrome.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</mwt:SystemDropShadowChrome.BitmapEffect>
<Border BorderThickness="1,1,1,1" BorderBrush="#FF959595" Background="#FFF5F5F5" Name="SubMenuBorder">
<ScrollViewer Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=FrameworkElement, ResourceId=MenuScrollViewer}}" Name="SubMenuScrollViewer" Margin="1,0,1,0">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Fill="#FFF5F5F5" Name="OpaqueRect" Width="Auto" Height="Auto" />
</Canvas>
<Rectangle RadiusX="2" RadiusY="2" Fill="#FFF1F1F1" Width="28" Margin="1,2,1,2" HorizontalAlignment="Left" />
<Rectangle Fill="#FFE2E3E3" Width="1" Margin="29,2,0,2" HorizontalAlignment="Left" />
<Rectangle Fill="#FFFFFFFF" Width="1" Margin="30,2,0,2" HorizontalAlignment="Left" />
<ItemsPresenter Name="ItemsPresenter" Margin="2,2,2,2" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" />
</Grid>
</ScrollViewer>
</Border>
</mwt:SystemDropShadowChrome>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="MenuItem.IsSuspendingPopupAnimation" Value="True">
<Setter Property="Popup.PopupAnimation" TargetName="PART_Popup" Value="None" />
</Trigger>
<Trigger Property="MenuItem.IsHighlighted" Value="True">
<Setter Property="Shape.Stroke" TargetName="InnerBorder" Value="#D1DBF4FF" />
</Trigger>
<Trigger Property="MenuItem.Icon" Value="{x:Null}">
<Setter Property="UIElement.Visibility" TargetName="Icon" Value="Collapsed" />
</Trigger>
<Trigger Property="MenuItem.IsChecked" Value="True">
<Setter Property="UIElement.Visibility" TargetName="GlyphPanel" Value="Visible" />
<Setter Property="UIElement.Visibility" TargetName="Icon" Value="Collapsed" />
</Trigger>
<Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup" Value="True">
<Setter Property="FrameworkElement.Margin" TargetName="Shdw" Value="0,0,5,5" />
<Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw" Value="#71000000" />
</Trigger>
<Trigger Property="MenuItem.IsHighlighted" Value="True">
<Setter Property="Shape.Fill" TargetName="Bg">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#34C5EBFF" Offset="0" />
<GradientStop Color="#3481D8FF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Stroke" TargetName="Bg" Value="#8571CBF1" />
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="#FF9A9A9A" />
<Setter Property="Panel.Background" TargetName="GlyphPanel" Value="#FFEEE9E9" />
<Setter Property="Border.BorderBrush" TargetName="GlyphPanel" Value="#FFDBD6D6" />
<Setter Property="Shape.Fill" TargetName="Glyph" Value="#FF848589" />
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding Path=VerticalOffset, ElementName=SubMenuScrollViewer}" />
<Setter Property="Canvas.Left" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="HorizontalOffset" ElementName="SubMenuScrollViewer" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Usage:
<ContextMenu x:Name="deleteContextMenu">
<ContextMenu.BitmapEffect>
<DropShadowBitmapEffect Color="#FFB3C7E5" Direction="-60" ShadowDepth="5" Opacity="0.8"/>
</ContextMenu.BitmapEffect>
<MenuItem Header="Delete" Name="DeleteMenuItem" Background="White" Template="{StaticResource miTest}">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem2" Background="White" Template="{StaticResource miTest}">
<MenuItem Header="DeleteChild" Name="DeleteMenuItem3" Background="White" Template="{StaticResource miTest}">
</MenuItem>
</MenuItem>
</MenuItem>
</ContextMenu>

You need to set the Style for the Submenu. Here is a MSDN example. Obviously, just take the code that you need.
http://msdn.microsoft.com/en-us/library/ms744758%28v=vs.85%29.aspx