We Keep Coding

Wpf : How to make a letter pop out of the border

how do make a letter pop out of the border?
I want to express it like this picture
I wrote a letter in the text on Border,
The letters are covered like in the picture.
Can you make this stick out like the picture below?
How can solve this?
this is my xaml code
<Window x:Class="TestProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestProject"
Width="800"
Height="600"
Title="ItemsControl 엘리먼트 : Template/ItemsPanel/ItemTemplate/ItemContainerStyle 속성 사용하기"
FontFamily="나눔고딕코딩"
FontSize="16">
<Window.Resources>
<local:TaskCollection x:Key="TaskCollectionKey" />
</Window.Resources>
<Grid>
<ItemsControl
HorizontalAlignment="Center"
VerticalAlignment="Center"
ItemsSource="{Binding Source={StaticResource TaskCollectionKey}}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border
BorderBrush="Black"
BorderThickness="3"
CornerRadius="15">
<ItemsPresenter />
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DataTemplate.Resources>
<Grid>
<Ellipse
Stroke="Black"
StrokeThickness="3"
Fill="Gold" />
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock
Margin="5"
Text="{Binding Path=Priority}" />
<TextBlock
Margin="5"
Text="{Binding Path=TaskName}" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Margin" Value="10" />
<Setter Property="Control.Width" Value="100" />
<Setter Property="Control.Height" Value="100" />
<Style.Triggers>
<Trigger
Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=Content.Description}" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
</Window>

If you put the textblock in a canvas, that will not clip.
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock
Margin="5"
Text="{Binding Path=Priority}" />
<Canvas>
<TextBlock
Text="{Binding Path=TaskName}" />
</Canvas>
</StackPanel>

Columns mentioned in DataGrid.Columns is not visible when AutoGenerateColumns=false in CustomControl DataGrid (WPF Datagrid)

I am trying to Create a Custom Control by extending the DataGrid in WPF, but the problem is that when I use this custom control in view and Provide the specific columns by setting the AutoGenerateColumns to False, the columns is not getting generated. In the OnApplyTemplate() when I tried to fetch the Datagrid through the Template it shows as column count as 0, whereas in the view in code behind it shows the no of columns correctly whatever is specified in the xaml.
Where I am wrong or something extra needs to be set for this?
My Custom control code-
public class DataGridControl: DataGrid
{
static DataGridControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DataGridControl), new FrameworkPropertyMetadata(typeof(DataGridControl)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DataGrid dataGrid = Template.FindName("PART_DataGrid", this) as DataGrid;
int noOfColumns = dataGrid.Columns.Count// (0 it should come as 3)
}
}
Generic.xaml(inside the Control Template and border)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
.....
xmlns:local="clr-namespace:Siemens.WPF.DataGridControl">
<LinearGradientBrush x:Key="lightBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
.....
</LinearGradientBrush>
<LinearGradientBrush x:Key="normalBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
......
</LinearGradientBrush>
<Style TargetType="{x:Type local:DataGridControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:DataGridControl}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<DataGrid x:Name="PART_DataGrid"
ItemsSource="{TemplateBinding ItemsSource}"
AutoGenerateColumns="{TemplateBinding AutoGenerateColumns}">
<DataGrid.Resources>
<!--A custom DataGridColumnHeadersPresenter is required to "not" display the custom ColumnHeader template as background of the datagrid header-->
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<!--"part_fillercolumnheader" (DataGridColumnHeader type) is removed, and a plain rectangle is placed in its place.-->
<Rectangle Fill="{StaticResource normalBrushBack}" />
<!--Leave the item presenter in its place.-->
<ItemsPresenter x:Name="itemsPresenter" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--End of custom DataGridColumnHeadersPresenter template-->
<!--Custom Column Header Gripper styling-->
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="3"/>
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Custom Column Header template to show extra elements in the header-->
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<!--Let's keep the top section grid to contain the DataGridHeaderBorder, and left+right thumbs.-->
<Grid x:Name="fullHeader" Background="{StaticResource normalBrushBack}">
<!--Here is the theme based DataGridHeaderBorder. I've used Aero here.-->
<aero:DataGridHeaderBorder x:Name='HeaderBorder'
SortDirection="{TemplateBinding SortDirection}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
IsClickable="{TemplateBinding CanUserSort}"
BorderThickness="0,0,1,1"
BorderBrush="{TemplateBinding Foreground}"
Background="Transparent"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="#FFC9CACA">
<!--Put 3 elements inside the border: Content of header, a drop down button, and a sort order indicator.-->
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition MinHeight="15" Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--For ContentPresenter-->
<ColumnDefinition Width="*" />
<!--For drop down button-->
<ColumnDefinition Width="23" />
<!--For sort order indicator-->
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<!--A hidden rectangle is placed to be shown when mouse hovers on the column (to highlight the column.)-->
<Rectangle x:Name="HoverRectangle"
Stretch="Fill"
Grid.ColumnSpan="3"
Fill="{StaticResource lightBrushBack}"
Opacity="0"
StrokeThickness="0" />
<!--Content of the header.-->
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Margin="2,0,0,0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Cursor="{TemplateBinding Cursor}" />
<!--A drop down filter button.-->
<Button x:Name="PART_FilterBtn"
HorizontalAlignment="Right"
Command="{Binding FilterClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
CommandParameter="{Binding ElementName=HeaderBorder}"
Grid.Row="0" Cursor="Hand"
Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Path Data="M 0,0 L 1,1 1,3 2,3 2,1 3,0 Z"
Stretch="UniformToFill"
Stroke="{TemplateBinding Foreground}"
Fill="{TemplateBinding Foreground}"
Margin="4,4,0,4"/>
</ControlTemplate>
</Button.Template>
</Button>
<Path x:Name="PART_SortArrow"
Grid.Column="2"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="8"
RenderTransformOrigin=".5,.5"
Visibility="Visible"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z">
</Path>
</Grid>
</aero:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="PART_SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property='IsMouseOver' SourceName="fullHeader" Value='True'>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='1.0' />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='0' />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush options:Freeze="True" StartPoint="0.504,0.03" EndPoint="0.504,1.5">
<GradientStop Offset="0.0" Color="#E3F7FF" />
<GradientStop Offset="0.3" Color="#E3F7FF" />
<GradientStop Offset="0.35" Color="#BCECFE" />
<GradientStop Offset="1.0" Color="#B9E9FC" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#69BBE3" />
</DataTrigger>
</Style.Triggers>
</Style>
<!--End of custom DataGridColumnHeader template-->
</DataGrid.Resources>
</DataGrid>
<Popup x:Name="PART_PopUp"
Grid.Column="3"
AllowsTransparency="True"
AllowDrop="True"
Width="200"
Height="253"
MinHeight="253"
MaxHeight="253"
PopupAnimation="Slide"
VerticalOffset="-15"
IsOpen="{Binding IsFilterPopUpVisible,RelativeSource={RelativeSource AncestorType=local:DataGridControl}}"
PlacementTarget="{Binding ElementName=PART_FilterBtn}"
StaysOpen="False"
Placement="Mouse" >
<Border Background="White" BorderBrush="DarkGray" BorderThickness="2">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="10,5,0,5">
<Button Margin="10,0,0,0" Name="PART_SelectAllBtn" Command="{Binding SelectAllClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" CommandParameter="{Binding ElementName=PART_ListBox}" >
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select All" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
<Button Margin="30,0,0,0" Name="PART_SelectNoneBtn" Command="{Binding SelectNoneClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" CommandParameter="{Binding ElementName=PART_ListBox}" >
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select None" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
<TextBox x:Name="PART_TextBox" Width="185" Height="25" Text="" Margin="3,0,3,3"/>
<ListBox x:Name="PART_ListBox"
Height="160"
MaxHeight="160"
MinHeight="160"
Width="185"
SelectionMode="Multiple"
DisplayMemberPath="Value"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ItemsSource="{Binding FilterCollectionList, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" Margin="0,0,0,5"
ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem" >
<CheckBox x:Name="PART_CheckBox" Margin="5,2" IsChecked="{Binding IsSelected}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding CheckedCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<StackPanel Orientation="Horizontal" Margin="0,0,0,15" HorizontalAlignment="Center">
<Button x:Name="PART_OkBtn" Height="22" Width="70" Content="Ok"
IsEnabled="{Binding IsOkButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
Command="{Binding OkButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
/>
<Button x:Name="PART_CancelBtn" Height="22" Width="70" Content="Cancel" Margin="5,0,0,0"
Command="{Binding CancelButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml
<dataGrid:DataGridControl x:Name="dataGridControl" AutoGenerateColumns="False">
<dataGrid:DataGridControl.Columns>
<DataGridTextColumn Header="RollNo" Binding="{Binding RollNo}" />
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" />
</dataGrid:DataGridControl.Columns>
</dataGrid:DataGridControl>
MainWindow.xaml.cs
public MainWindow()
{
InitializeComponent();
List<Student> studList =
new List<Student>() { new Student { RollNo = 1, Name = "Full Name
1", FirstName = "FirstName1", LastName="LastName1", Address =
"Pune1", PinCode= "411057"},};
dataGridControl.ItemsSource = studList;
int noOfColumns = dataGridControl.Columns.Count; //(showing 3 as expected)
}

Create property for custom control
#region GridColumns
private ObservableCollection<DataGridColumn> _gridColumns;
public ObservableCollection<DataGridColumn> GridColumns
{
get => _gridColumns;
}
#endregion GridColumns
Add columns from created property using method OnApplyTemplate
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (!AutoGenerateColumns)
{
var grid = GetTemplateChild("PART_Grid") as DataGrid;
foreach (var column in _gridColumns)
grid.Columns.Add(column);
}
}
Change MainWindow.xaml
<dataGrid:DataGridControl x:Name="dataGridControl" AutoGenerateColumns="False">
<dataGrid:DataGridControl.GridColumns>
<DataGridTextColumn Header="RollNo" Binding="{Binding RollNo}" />
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" />
</dataGrid:DataGridControl.GridColumns>
</dataGrid:DataGridControl>

C# WPF Button should be displayed as selected

I'm using C# WPF Application
I need your help.
If I press on a button it should be selected, but if I now press on another button it should be selected and the other button should not be selected.
It should show where the user is.The button should be selected until another button has been clicked.
But when you go with the mouse over, the normal mouse over effect should come.
<Window x:Name="windowsForm" x:Class="Vorschau.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:Vorschau"
mc:Ignorable="d"
Title="Vorschaukomponente" Height="514.583" Width="805.208" FontFamily="Century Gothic" WindowStartupLocation="Manual" BorderThickness="0" ResizeMode="NoResize" WindowStyle="None" Icon="C:\Users\user\Documents\Visual Studio 2015\Projects\Vorschau\Vorschau\img\coordinates.ico" Background="{x:Null}" AllowsTransparency="True">
<Window.Resources>
<Style x:Key="border_res" TargetType="{x:Type Border}">
<Setter Property="Background" Value="#3A3A3B" />
<Setter Property="CornerRadius" Value="10" />
</Style>
</Window.Resources>
<Border Style="{StaticResource border_res}">
<Grid>
<Canvas HorizontalAlignment="Left" Height="60" VerticalAlignment="Top" Width="185" Background="#FFE57E31">
<Canvas Height="64" Canvas.Top="451" Width="185" Background="#FF2C373F">
<Label x:Name="lbCopyright" Content="© Name 2017" Canvas.Left="10" Canvas.Top="29" Width="121" Foreground="#FF1B1D1F"/>
</Canvas>
<Canvas Height="391" Canvas.Top="60" Width="185" Background="#FF37424A">
<Button x:Name="btVorschau" Content="Vorschau" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" Foreground="LightGray" FontSize="16"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Click="Button_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="btEinstellung" Content="Einstellung" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" Foreground="LightGray" FontSize="16"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Canvas.Top="50" Click="btEinstellung_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Canvas>
<Canvas Height="60" Canvas.Left="185" Width="618" Background="#FFEEE9ED">
<Label x:Name="lbClose" Content="X" Canvas.Left="578" FontSize="20" MouseDoubleClick="lbClose_MouseDoubleClick"/>
<Label x:Name="lbMinimize" Content="-" Canvas.Left="556" FontSize="22" Canvas.Top="-2" MouseDoubleClick="lbMinimize_MouseDoubleClick"/>
<Label x:Name="lbWhereIAm" Content="Label" Canvas.Left="10" Canvas.Top="15" Width="162" FontSize="20"/>
</Canvas>
<Canvas x:Name="canvasContent" Height="455" Canvas.Left="185" Canvas.Top="60" Width="618" Background="#FFD1CFD0">
<TabControl x:Name="tabControl" Height="241" Canvas.Left="93" Canvas.Top="87" Width="440" SelectedIndex="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<TabItem x:Name="tabitem1" Header="TabItem">
<Grid Background="#FFE5E5E5">
<Label x:Name="label1" Content="Label" HorizontalAlignment="Left" Margin="99,95,0,0" VerticalAlignment="Top" Background="#FF2387FF"/>
</Grid>
</TabItem>
<TabItem x:Name="tabitem2" Header="TabItem" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Grid Background="#FFE5E5E5">
<Label x:Name="label" Content="Label" HorizontalAlignment="Left" Margin="138,124,0,0" VerticalAlignment="Top" Background="#FFF70000"/>
</Grid>
</TabItem>
</TabControl>
</Canvas>
<Image x:Name="image" Height="38" Canvas.Left="10" Canvas.Top="10" Width="38" Source="C:\Users\user\Documents\Visual Studio 2015\Projects\Vorschau\Vorschau\img\coordinatesWhite.png"/>
<Label x:Name="lbLogoname" Content="Vorschaukomponente" Canvas.Left="37" Canvas.Top="10" Width="143" FontWeight="Bold" Foreground="White"/>
</Canvas>
</Grid>
</Border>
</Window>

you can use Listbox , to show group of buttons
Solution 1 :
<Style TargetType="{x:Type ListBox}">
<Setter Property="ListBox.ItemTemplate">
<Setter.Value>
<DataTemplate>
<ToggleButton Content="{Binding}"
IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Solution 2
Use radio button change the template
<RadioButton Content="Point" >
<RadioButton.Template>
<ControlTemplate>
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>

WPF MenuItem apply style to boxed header

I'm currently trying to apply styling to my menuItem. I had to center it's header inside the control, and the only way to it that I had found is this:
<MenuItem>
<MenuItem.Header>
<TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
Now, I am trying to apply styles, but I can't seem to manage to bind the textboxes' text from style to the actual xaml value.
My style:
<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#0a99f3" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid Background="{TemplateBinding Background}">
<MenuItem>
<MenuItem.Header>
<TextBlock Text="{TemplateBinding Text}" />
</MenuItem.Header>
</MenuItem>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TemplateBinding is just one of the approaches I tried, though none worked even remotely close.
EDIT - FULL XAML ON REQUEST:
<Window x:Class="DownloadManager.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:DownloadManager"
xmlns:controls="clr-namespace:DesignInControl"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1000" Background="#22282a" ResizeMode="NoResize">
<Border BorderThickness="1" BorderBrush="#ffcd22" Margin="10,10,10,10">
<Grid>
<controls:CircularProgressBar VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" SegmentColor="#ffcd22" StrokeThickness="5" Percentage="100" Radius="80" Grid.ZIndex="0"/>
<Border VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" Width="170" Height="170">
<TextBlock FontSize="60" Text="10%" FontFamily="simplifica" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Image x:Name="noshare_png" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-8,10" Source="noshare.png" Width="100" Height="100"/>
<Border Width="210" Height="100" Margin="97,10,665,540">
<TextBlock Text="NoShare" FontSize="85" FontFamily="simplifica" Foreground="#ffcd22" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<Menu x:Name="menu" HorizontalAlignment="Left" Height="100" Margin="352,10,0,0" VerticalAlignment="Top" Width="600" FontFamily="simplifica" FontSize="30">
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="File"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="Settings"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="About"/>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
</Border>
</Window>

Use MenuItem.HeaderTemplate.
<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#0a99f3" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Updated: Combined your style with the original solution.

How to create Button click on the modern window theme page

How to create Button click on a modern window theme page. Here is the modern window them:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:modernui="clr-namespace:FirstFloor.ModernUI"
xmlns:controls="clr-namespace:FirstFloor.ModernUI.Windows.Controls"
xmlns:navigation="clr-namespace:FirstFloor.ModernUI.Windows.Navigation">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/Button.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/Converters.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/TextBlock.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="controls:ModernWindow">
<Setter Property="BackgroundContent" Value="{DynamicResource WindowBackgroundContent}" />
<Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
<Setter Property="Foreground" Value="{DynamicResource WindowText}" />
<Setter Property="BorderBrush" Value="{DynamicResource WindowBorder}" />
<Setter Property="Width" Value="800" />
<Setter Property="Height" Value="640" />
<Setter Property="MinWidth" Value="320" />
<Setter Property="MinHeight" Value="320" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ModernWindow">
<Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}">
<Border.Background>
<SolidColorBrush x:Name="WindowBorderBackground" Color="{DynamicResource WindowBackgroundColor}" />
</Border.Background>
<Border.Resources>
<Storyboard x:Key="BackgroundAnimation">
<ColorAnimation Storyboard.TargetName="WindowBorderBackground" Storyboard.TargetProperty="Color" To="{DynamicResource WindowBackgroundColor}" Duration="0:0:.6" />
</Storyboard>
</Border.Resources>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<AdornerDecorator>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- window background content -->
<ContentControl Grid.RowSpan="5" Content="{TemplateBinding BackgroundContent}" />
<!-- title bar -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="96" />
</Grid.ColumnDefinitions>
<!-- title -->
<TextBlock Text="{TemplateBinding Title}" Margin="8,0" VerticalAlignment="Center" Style="{StaticResource ModernWindowTitle}"
DataContext="{TemplateBinding IsTitleVisible}"
Visibility="{Binding Converter={StaticResource BooleanToVisibilityConverter}}"/>
<!-- title links -->
<ItemsControl Grid.Column="1" ItemsSource="{TemplateBinding TitleLinks}" Margin="0,0,24,0" WindowChrome.IsHitTestVisibleInChrome="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Line x:Name="Separator" X1=".5" Y1="3" X2=".5" Y2="12" Margin="5,0" VerticalAlignment="Center" Stroke="{DynamicResource SeparatorBackground}" />
<Button Content="{Binding DisplayName}"
Command="navigation:LinkCommands.NavigateLink"
CommandParameter="{Binding Source}"
CommandTarget="{Binding ElementName=ContentFrame}"
Style="{StaticResource SystemButtonLink}" />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- userName -->
<TextBlock Grid.Column="2" Text="{Binding Converter={StaticResource ToUpperConverter}}" FontFamily="Segoe UI" FontSize="11" VerticalAlignment="Center"
DataContext="{TemplateBinding AuthUserName}" />
<!-- logo (visible only when LogoData is not null) -->
<Border Grid.Column="3" Background="{DynamicResource Accent}" Width="36" Height="36" Margin="8,0"
DataContext="{TemplateBinding LogoData}"
Visibility="{Binding Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=inverse}">
<Path Data="{Binding}" Stretch="Fill" Fill="White" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<!-- window system buttons-->
<StackPanel Grid.Column="4" Orientation="Horizontal" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True">
<Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="{x:Static modernui:Resources.Minimize}" Style="{StaticResource SystemButton}">
<Button.Content>
<Grid Width="13" Height="12" 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="{x:Static modernui:Resources.Restore}" Style="{StaticResource SystemButton}" Visibility="Collapsed" >
<Button.Content>
<Grid Width="13" Height="12" 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="{x:Static modernui:Resources.Maximize}" Style="{StaticResource SystemButton}" >
<Button.Content>
<Grid Width="13" Height="12">
<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="{x:Static modernui:Resources.Close}" Style="{StaticResource SystemCloseButton}" >
<Button.Content>
<Grid Width="13" Height="12" 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 Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="42" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
--><!-- back button --><!--
<controls:ModernButton Margin="8,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
EllipseDiameter="24" IconWidth="12" IconHeight="12"
IconData="F1 M 33,22L 33,26L 19.75,26L 27,33L 20.5,33L 11,24L 20.5,15L 27,15L 19.75,22L 33,22 Z"
Command="NavigationCommands.BrowseBack"
CommandTarget="{Binding ElementName=ContentFrame}"
ToolTip="{x:Static modernui:Resources.Back}"
WindowChrome.IsHitTestVisibleInChrome="True" />
--><!-- main menu --><!--
<controls:ModernMenu Grid.Column="1"
SelectedSource="{Binding Source, ElementName=ContentFrame, Mode=TwoWay}"
LinkGroups="{TemplateBinding MenuLinkGroups}" />
</Grid>-->
<!-- content frame -->
<controls:ModernFrame x:Name="ContentFrame" KeepContentAlive="False" Grid.Row="1" Grid.RowSpan="2" Margin="3,3,3,3" Source="{Binding ContentSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ContentLoader="{TemplateBinding ContentLoader}"/>
<!-- resize grip -->
<Grid Grid.Row="2" x:Name="ResizeGrip" Background="Transparent" Visibility="Collapsed" HorizontalAlignment="Right" VerticalAlignment="Bottom" WindowChrome.ResizeGripDirection="BottomRight">
<Path Width="12" Height="12" Margin="1"
Stroke="{DynamicResource WindowText}"
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>
<ControlTemplate.Triggers>
<Trigger Property="IsActive" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource WindowBorderActive}" />
</Trigger>
<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>
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CornerRadius="0" GlassFrameThickness="1" UseAeroCaptionButtons="False" NonClientFrameEdges="None" />
</Setter.Value>
</Setter>
</Style>
We Need to button on the top header of the modern window and click or command of the button. I want to do some implementation on this command. How to make command here?