We Keep Coding

WPF binding mahapps metro icons in template - Tag binding not working

I have a navbar with several buttons in it. The buttons all use the same style, defined in a ResourceDictionary.
I am trying to add an icon from Mahapps to each button. Each button will need a different kind of icon, which I'd like to set on the view.
In order to achieve this, I need to be able to pass the icon kind to the template via some property of the button.
I am unable to pass the icon kind to the template.
I am testing this on a new project (WPF netcore3.1)
I have seen other posts (post1, post2) that suggest using a rectangle rather than iconPacks, and binding the Visual property of the rectangle using the Tag property of the button:
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source="/IconStyle.xaml" />
</Application.Resources>
<Window x:Class="WpfApp1.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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel>
<Button Style="{StaticResource IconStyle}" Foreground="Red">
<Button.Tag>
<iconPacks:Modern Kind="Home" Width="24" Height="24" />
</Button.Tag>
</Button>
</StackPanel>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1">
<Style x:Key="IconStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal"
DataContext="{Binding RelativeSource={RelativeSource AncestorType=Button}}">
<Rectangle Width="24" Height="24" Fill="{Binding Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{Binding Tag}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe"
FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But doesn't display any icons at all for me.
Any suggestions?

With the IconPacks you don't need the OpacityMask usage. Instead you can work with the PackIconModern control or any other control from the IconPacks package.
Here is an example with only the PackIconModern control from the MahApps.Metro.IconPacks.Modern NuGet package (v4.11.0).
The button style:
<Style x:Key="IconStyle" TargetType="{x:Type Button}">
<Setter Property="Padding" Value="10 5" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FontSize" Value="24" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Segoe UI Light" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<iconPacks:PackIconModern
Kind="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=Tag, Mode=OneWay}"
Width="24"
Height="24"
VerticalAlignment="Center" />
<TextBlock Margin="10 0 0 0"
VerticalAlignment="Center"
Text="{Binding}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
With that style you can the do something like that:
<Grid>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5 10">
<Button Style="{StaticResource IconStyle}"
Foreground="Crimson"
Content="John Doe"
Tag="{x:Static iconPacks:PackIconModernKind.Home}" />
<Button Style="{StaticResource IconStyle}"
Foreground="ForestGreen"
Content="Works..."
Tag="{x:Static iconPacks:PackIconModernKind.Cloud}" />
</StackPanel>
</Grid>
The namespace for the IconPacks control is xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks".
If you need more icons from another package the simply add the NuGet package and use this control then. It's also possible to use the main IconPacks package which contains all icon controls and a control which can handle all possible icon kind enumerations. You will find more information at the wiki of the repository ion GitHub (MahApps.Metro.IconPacks).

How to change focus style of TextBox in WPF?

So I want to change the focus-style of my TextBox in my "Style.xaml" file. I'ts not working and I don't know why. I think that it has to do with the default style of WPF.
Here's the code from my "MainWindow.xaml":
<Window x:Class="WPF_Project.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:WPF_Project"
mc:Ignorable="d"
Title="Application" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Wpf-Project;component/css/Style.xaml">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TextBox FocusVisualStyle="{DynamicResource InputFocus}" Style="{DynamicResource Input}" BorderThickness="1" BorderBrush="#000000" HorizontalAlignment="Left" Height="31" Margin="10,202,0,0" VerticalAlignment="Top" Width="120" TextAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Name="input" TextChanged="input_TextChanged"/>
<Label HorizontalAlignment="Left" Margin="209,202,0,0" VerticalAlignment="Top" Height="31" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Name="output" Width="78" Content="Output"></Label>
</Grid>
</Window>
Here's the code from my "Style.xaml":
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF_Project.css">
<Style x:Key="Input" TargetType="TextBox">
<Setter Property="Background" Value="#FF7DBAEC"></Setter>
<Setter Property="Foreground" Value="Black"></Setter>
</Style>
<Style x:Key="InputFocus" TargetType="TextBox">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="+3" StrokeThickness="1" Stroke="Red"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
This is how it looks like:
Thanks for your help in advance.

I have updated your style like this:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF_Project.css">
<Style x:Key="Input" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border
x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<ScrollViewer
x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="border" Property="Opacity" Value="0.56" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="border" Property="BorderBrush" Value="Red" />
<Setter TargetName="border" Property="BorderThickness" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And new usage:
<Window
x:Class="WPF_Project.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:local="clr-namespace:WPF_Project"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="525"
Height="350"
mc:Ignorable="d">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Wpf_Project;component/css/Style.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid>
<TextBox
Name="input"
Width="120"
Height="31"
Margin="10,202,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Style="{StaticResource Input}"
TextAlignment="Center" />
<Label
Name="output"
Width="78"
Height="31"
Margin="209,202,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Content="Output" />
<TextBox
x:Name="input_Copy"
Width="120"
Height="31"
Margin="10,238,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Style="{StaticResource Input}"
TextAlignment="Center" />
</Grid>
</Grid>
</Window>
Result:

Try to define style like below:
<Style x:Key="InputFocus">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="Red" StrokeThickness="1"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And use the TAB key to set the focus.

XAML TabControl Border Issues

I am trying to make a custom TabControl that supports scrolling but keeps the original look and feel of the TabControl, obviously with the exception that it scrolls.
To begin I chose to edit a copy of the original template TabControl used.
Then I put a ScrollViewer around the TabPanel. However, this has caused a minor issue where the tabs now have a border at the bottom of them when they are selected. This can be seen below by comparing the normal TabControl and the styled TabControl in the image.
At first I assumed this was the z indexing of the scroll viewer but after trying different values and making sure the z index of the scroll viewer and TabPanel are both explicitly higher than the Border's z index, it made no difference.
How can I achieve the same effect where there is no border at the bottom of the selected tab, whilst it is wrapped in a ScrollViewer?
MainWindow.xaml
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Background="Transparent">
<TabPanel IsItemsHost="true"
Margin="2,2,2,0"
Panel.ZIndex="2"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
Panel.ZIndex="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>

So if we go take a look at a ScrollViewer style template notice there's a Border in there with a set color for it which is the artifact you're seeing.
We could go in and edit a Style template of ScrollViewer and remove that....or for this instance we could just let it keep its Border and override the style inheritance so in your template you could do something like;
<ScrollViewer ...>
<ScrollViewer.Resources>
<Color x:Key="BorderMediumColor">#FFFFFFFF</Color>
</ScrollViewer.Resources>
....
</ScrollViewer>
Wherein it should inherit that new color for the Border in there which in this case I just made white, or you could change the alpha channel too '00' so it's just transparent. Or you could do the previously mentioned and define a new style template without the hardcoded border values.
Hope this helps, cheers!
ADDENDUM : If you can't find the culprit causing the visual border line you can always sort of cheat with the layout of elements within the DOM and utilize margins to overlay the line and achieve the same desired visual result. The line may still technically exist but the illusion that it doesn't can suffice just the same. :)
Working code example
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot"
ClipToBounds="true"
SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local"
UseLayoutRounding="True"> <!-- Gets rid of pixel rounding errors which cause small bugs when window is a certain size -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0, 0, 0, -1.25"
Background="Transparent"> <!-- +- 1.25 seems to be required when mixed with the ZIndex to hide the border underneath the selected tab -->
<TabPanel IsItemsHost="true"
Margin="2,2,2,1.25"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>

You can try this to get custom rounded tabs with blue background
As for scrolling, scrollviewer should do the job
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,1" CornerRadius="4,4,0,0" Margin="2,0" Background="#252e37">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="GhostWhite" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

How to create a simple menu with labels on the left side with WPF?

I've been developing some simple apps (just for educational purposes) with Windows Forms and now I'm starting to learn WPF, but it seems a bit more complex to me.
I would like to create a simple menu like the one you can see in the pictures. I've been trying to find it on Google and YouTube, but I only found tutorials about "Hamburger menu", which isn't what I'm looking for.

This is really an area where WPF shines: the layout you describe can be implemented with nothing more than a restyled tab control.
Start with an unstyled tab control with TabStripPlacement of Left:
Then edit the TabControl style to add gradient and margins behind the TabPanel:
Add the image and override the TabItem style to set the font and remove the background. I used a chevron to indicate selection rather than bolding the text, but that would have been handled the same way.
Here is the full XAML used for the screenshots above:
<Window x:Class="StackOverflowTabControl.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:StackOverflowTabControl"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<Style x:Key="ItemContainerStyle" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Margin="15,5">
<Path Width="10" Height="14" Margin="0,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Stretch="Fill" Fill="#FF000000" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter Content="{TemplateBinding Header}" Margin="20,5,10,5">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Light" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="ItemContainerStyle" Value="{StaticResource ItemContainerStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Padding="5">
<Border.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="#FFC7C7C7" Offset="0"/>
<GradientStop Color="#FFECECEC" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<DockPanel>
<Image DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="20" Source="pack://application:,,,/StackOverflowTabControl;component/twc.png" Width="200" />
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
</DockPanel>
</Border>
<Border x:Name="contentPanel" Grid.Column="1" Margin="5,0,0,0">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Style="{DynamicResource TabControlStyle1}">
<TabItem Header="System Information">
<TextBlock Text="Windows 10 pro" />
</TabItem>
<TabItem Header="Something else">
<TextBlock Text="Other page" />
</TabItem>
</TabControl>
</Grid>
</Window>

How to remove space between buttons in stackpanel C# xaml?

In xaml layout, it has no spaces between buttons. Howeveri when I test it in emulator or device, there are spaces between buttons. How can I fix this?
<phone:PhoneApplicationPage
x:Class="KentKart.Pages.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="SimpleButton" TargetType="Button">
<Setter Property="Margin" Value=",,,-13"/>
<Setter Property="Padding" Value="40,5,0,5"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="#0079c8"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="#0079c8"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Images.xcassets/Background.imageset/bg#2x.png" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
<Grid Background="#0079c8" Height="92" VerticalAlignment="Top">
<TextBlock Width="auto" x:Name="selectedCityText" Foreground="White" Text="" RenderTransformOrigin="-0.243,0.771" FontSize="15" Margin="0,10,0,28" />
</Grid>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<Button Content="X" BorderThickness="0" HorizontalAlignment="Left" Margin="367,0,-12,0" VerticalAlignment="Top" Height="64" Width="113" Click="X_Button" RenderTransformOrigin="0.519,0.125"/>
</StackPanel>
<StackPanel VerticalAlignment="Top" Margin="0,92,0,0">
<Button Style="{StaticResource SimpleButton}" Content="deneme"/>
<Button Style="{StaticResource SimpleButton}" Content="deneme"/>
<Button Style="{StaticResource SimpleButton}" Content="deneme"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
</Grid>
</phone:PhoneApplicationPage>

After a little tweaking, the solution is
<Setter Property="Margin" Value="0,-10,0,-10"/>
You've got a 20 pixel margin to remove. But the 0 for Left and Right are critical, when you leave them blank you can see the defaults are negative (they stick out of the frame). There seems to be a difference in how that's rendered in the designer and on the device.
So there might be an underlying bug worth reporting here.