Develop Reference

How to set the rounded corners of TabItem to achieve the same effect as Google?

I have the code for the TabControl below. I want to achieve tab style similar to google chrome browser.
I want to make the bottom corners slightly rounder towards the pinkish background and not inwards.
How to set the rounded corners of TabItem to achieve the same effect as Google?
The resulting graph I have now：
Xmal:
<Window.Resources>
<SolidColorBrush x:Key="PrimaryBG" Color="#ad00ad"/>
<SolidColorBrush x:Key="Blueish" Color="#5252ff"/>
<SolidColorBrush x:Key="Greenish" Color="#005757"/>
<SolidColorBrush x:Key="Blackish" Color="#2e2e00"/>
<Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter ContentSource="SelectedContent"/>
</Border>
</Border>
</Border>
<TabPanel Grid.Row="0" IsItemsHost="true" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TabItem">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<!--In order to click on the blank part of the TabItem can be successfully selected-->
<Border Background="Transparent" >
<Grid>
<Grid x:Name="g">
<Border CornerRadius="5,5,7,7" Background="{TemplateBinding Background}" Margin="0,0,0,-1"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
</Grid>
<Border BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<!--Add ControlTemplate.Triggers to change the background color of the selected TabItem.-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="{DynamicResource PrimaryBG}" Name="grid" >
<TabControl HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" Margin="0,0,0,0"
Name="tabControl1" VerticalAlignment="Top" >
<TabItem Header="Dashboard" Name="tabItem1" Background="{DynamicResource Blueish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">
<Border Background="#5252ff" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}">
<StackPanel>
<TextBox Width="200" Height="25"/>
<TextBox Width="200" Height="25"/>
</StackPanel>
</Border>
</TabItem>
<TabItem Header="Invoicing" Name="tabItem2" Background="{DynamicResource Greenish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">
<Border Background="#005757" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >
<Button Width="80" Height="25"/>
</Border>
</TabItem>
<TabItem Header="Transactions" Name="tabItem3" Background="{DynamicResource Blackish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0" >
<Border Background="#2e2e00" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >
<ComboBox Width="300" Height="25"/>
</Border>
</TabItem>
</TabControl>
</Grid>
Edit:
Is it possible to give a path of the red line in the figure?

You can create any shape by Path and place it both sides of tab. For example, such Path would be as follows.
<Path Width="20" Height="40" Stretch="Uniform" Fill="Blue"
StrokeThickness="2" Stroke="Red"
Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0"/>
You can flip it by <ScaleTransform ScaleX="-1"/>.
Edit:
Edited Path. You can draw outline by Stroke and leave a segment open by removing Z.

List Tabitems in a dropdownlist wpf

I need to display all the tab headers in a dropdownlist.I have implemented the tab and added the down arrow button to it. I added a popup to list the items along with the button. But i cannot find a way to bind the header of the tab items to the list in the pop (Name = PresetPopup). I have tried binding the itemsource of "ConnectionList". But the ConnectionList is not recogonized in the ConnectionPages.xaml.cs file. Any code how to bind this will be helpful. Or any other way to do this?
<Style TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<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>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border Height="30" VerticalAlignment="Center" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<materialDesign:PackIcon Kind="ArrowDropDown" VerticalAlignment="Center" Width="15" />
<ToggleButton Name="OpenPopupButton" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Center">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</ToggleButton.Style>
<materialDesign:PackIcon Background="White" Foreground="Black" Kind="ArrowDropDown" Height="15" VerticalAlignment="Center" Width="15" />
</ToggleButton>
<Popup Name="PresetPopup" IsOpen="{Binding ElementName=OpenPopupButton, Path=IsChecked}" PlacementTarget="{Binding ElementName=OpenPopupButton}" AllowsTransparency="True" PopupAnimation="Slide" StaysOpen="False" >
<ListBox Name="ConnectionList" ItemsSource="{Binding ConnectionsTab}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="a"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
</Grid>
</Border>
</StackPanel>
<Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
...........
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Actually my final output requirement is similiar to this
final output

combobox text input with scrolling

editable wpf combobox.
There is a problem that the Textbox does not scroll when entering long strings.
like this link
Editable combobox text scrolling
TextBox.ScrollToHome () but it does not work.
this is my code and
my sample image
<Style TargetType="{x:Type ComboBox}" x:Key="autoComplateComboBox">
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
<Setter Property="TextElement.Foreground" Value="Black"/>
<Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
KeyboardNavigation.DirectionalNavigation="Contained"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Grid.Column="2"
ClickMode="Press" Focusable="False" Click="ToggleButton_Click"
IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Template="{StaticResource ComboBoxToggleButtonTemplate}">
</ToggleButton>
<ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
HorizontalAlignment="Left" VerticalAlignment="Center"
Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}">
</ContentPresenter>
<TextBox Name="txtInput" Margin="3, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" TextChanged="txtInput_TextChanged" SelectionChanged="txtInput_SelectionChanged"
HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Left" Focusable="True" GotFocus="txtInput_GotFocus" LostFocus="txtInput_LostFocus">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Border Name="PART_ContentHost" Focusable="False"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<!-- Popup showing items -->
<Popup Name="PART_Popup" Placement="Bottom" Focusable="False" AllowsTransparency="True" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0"
CornerRadius="0" BorderThickness="1,1,1,1"
BorderBrush="{StaticResource BasicNormalBorderBrush}"/>
<ScrollViewer Margin="4" SnapsToDevicePixels="True">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
......

Switch PART_ContentHost type from Border to ScrollViewer in TextBox ControlTemplate
<TextBox Name="txtInput" Margin="3, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" TextChanged="txtInput_TextChanged" SelectionChanged="txtInput_SelectionChanged"
HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Left" Focusable="True" GotFocus="txtInput_GotFocus" LostFocus="txtInput_LostFocus">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<ScrollViewer Name="PART_ContentHost" Focusable="False"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>

Creating a good-looking SplitView in UWP

I followed a tutorial for adding a SplitView control to my page. The code looks like:
<SplitView x:Name="MainSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<StackPanel Background="Gray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" FontSize="18" />
<TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="AboutButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" FontSize="18" />
<TextBlock Text="About" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
SplitView content here
</SplitView.Content>
</SplitView>
But the final result looks like this. Not really cool.
How can I reach something like the Insider Hub's?

There is a very nice example made by Justin Xin Liu on GitHub. Take a look at that for tips! ( I use same approach )
https://github.com/JustinXinLiu/SwipeableSplitView
So inside the pane use a listview like so:
<SplitView.Pane>
<ListBox ItemsSource="{x:Bind ViewModel.MenuItems}" SelectedItem="{x:Bind ViewModel.SelectedMenuItem, Mode=TwoWay, Converter={StaticResource ObjectToMenuItemConverter}}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="Presentation:MenuItem">
<StackPanel Orientation="Horizontal" Height="48">
<TextBlock Grid.RowSpan="2" Text="{x:Bind Icon, Mode=OneWay}" Style="{StaticResource IconTextBlockStyle}" />
<TextBlock Grid.Column="1" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource MenuTitleTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</SplitView.Pane>
And the first TextBlock is filled with an Icon using following style
<Style x:Key="IconTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Width" Value="48" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Center" />
</Style>
There is also a MenuListBoxItemStyle style for the ListBox, this will enable some animation. You can see if you want it or not.
If you want to see how I implemented it in my app, you can take a look at https://github.com/AppCreativity/Kliva. But that has an already more complex setup for the side pane, so maybe not easy to follow. On the other hand I haven't implemented the swipe guesture that Justin does in his project so maybe my app design is more like the one you want.

Using AppStudio Libraries
https://github.com/wasteam/waslibs
ShellPage
<Page
x:Name="PageLayout"
x:Class="UniversalProject.UWP.ShellPage"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:was_control="using:AppStudio.Uwp.Controls"
xmlns:controlEx="using:UniversalProject.UWP.Built_In.ControlEx"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
KeyUp="OnKeyUp">
<Page.Resources>
<DataTemplate x:Key="NavigationItemTemplate">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl
Margin="12,10"
Content="{Binding Icon}"
Foreground="{StaticResource NavigationPaneText}"/>
<ContentControl
Margin="6,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding Image}" />
<TextBlock
Grid.Column="1"
Margin="16,10"
Text="{Binding Caption}"
Foreground="{StaticResource NavigationPaneText}" />
<ToolTipService.ToolTip>
<TextBlock Text="{Binding Caption}" Foreground="{ThemeResource SystemBaseHighColor}"/>
</ToolTipService.ToolTip>
</Grid>
</DataTemplate>
<Style x:Key="NavigationSeparatorStyle" TargetType="ContentControl">
<Setter Property="Margin" Value="8,0" />
<Setter Property="MinHeight" Value="7"/>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Line
X1="0"
X2="1"
Stretch="UniformToFill"
Stroke="{StaticResource NavigationPaneText}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DefaultHeaderTemplate">
<Grid Background="Transparent">
<TextBlock
Margin="14,8"
Text="{Binding}"
Style="{StaticResource AppBarTitleStyle}" />
</Grid>
</DataTemplate>
<Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="2,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
SelectionCheckMarkVisualEnabled="True"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{StaticResource NavigationPaneText}"
FocusSecondaryBorderBrush="{StaticResource NavigationPaneText}"
PlaceholderBackground="Transparent"
PointerOverForeground="{StaticResource NavigationPaneText}"
SelectedForeground="{StaticResource NavigationPaneText}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline">
<ListViewItemPresenter.SelectedBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.6"/>
</ListViewItemPresenter.SelectedBackground>
<ListViewItemPresenter.SelectedPressedBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="1.0"/>
</ListViewItemPresenter.SelectedPressedBackground>
<ListViewItemPresenter.SelectedPointerOverBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.8"/>
</ListViewItemPresenter.SelectedPointerOverBackground>
<ListViewItemPresenter.PointerOverBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.1"/>
</ListViewItemPresenter.PointerOverBackground>
<ListViewItemPresenter.PressedBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.3"/>
</ListViewItemPresenter.PressedBackground>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid x:Name="MainLayout" Background="{StaticResource AppBackground}">
<was_control:ShellControl
x:Name="shell"
Header="App Name"
NavigationItems="{Binding NavigationItems}"
BorderBrush="{StaticResource AppBarBackground}"
HeaderBackground="{StaticResource HeaderAppbarBackground}"
HeaderForeground="{StaticResource AppBarForeground}"
HeaderTemplate="{StaticResource DefaultHeaderTemplate}"
NavigationForeground="{StaticResource NavigationPaneText}"
SeparatorStyle="{StaticResource NavigationSeparatorStyle}"
NavigationBackground="{StaticResource NavigationPaneBackground}"
HamburgerBackground="{StaticResource SystemControlBackgroundAccentBrush}"
HamburgerBorderBrush="{StaticResource NavigationPaneButton}"
HamburgerForeground="{StaticResource NavigationPaneText}"
NavigationItemTemplate="{StaticResource NavigationItemTemplate}"
NavigationSubItemTemplate="{StaticResource NavigationItemTemplate}"
ListViewItemContainerStyle="{StaticResource ListViewItemContainerStyle}">
<was_control:ShellControl.CommandBar>
<CommandBar x:Name="commandbar" RequestedTheme="Dark">
<CommandBar.SecondaryCommands>
<controlEx:SecondaryIconButton Glyph="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="createButton"
x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
<controlEx:SecondaryIconButton Glyph="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="importExportButton"
x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
</CommandBar.PrimaryCommands>
</CommandBar>
</was_control:ShellControl.CommandBar>
<Grid x:Name="contentgrid" Margin="0,0,0,0">
<Frame x:Name="frame" />
</Grid>
</was_control:ShellControl>
</Grid>

The modern way of doing this is using NavigationView. It looks great by default and requires less messing around to implement. It's built-in to the OS since build 16299 and available in WinUI 2 for downlevel support.

Can't eliminate padding/margin between Tiles in Windows 8 Metro 'ListView'

I'm trying to build two ListView objects within a StackPanel and have all of the ItemTemplate Tiles "touch" each other (meaning no margin or padding within the ListViews). It seems that Windows 8 Metro has some sort of built-in padding/margin. My question: How do I remove these or set them to 0?
Here is my code:
<StackPanel x:Name="teesSP"
HorizontalAlignment="Left"
Orientation="Horizontal"
VerticalAlignment="Top" >
<ListView x:Name="timesLV1"
SelectionMode="Multiple"
SelectionChanged="timesLV_Click"
ItemTemplate="{StaticResource TimeTileTemplate}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<ListView x:Name="timesLV2"
SelectionMode="Multiple"
SelectionChanged="timesLV_Click"
ItemTemplate="{StaticResource TimeTileTemplate}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
My ItemTemplate is:
<DataTemplate x:Key="TimeTileTemplate">
<Grid HorizontalAlignment="Center" Background="White" >
<Border BorderBrush="Black" BorderThickness="2" >
<StackPanel Margin="0,0,0,0" Orientation="Horizontal"
Width="130" Height="60" VerticalAlignment="Center" >
<TextBlock Margin="2,0,0,0" TextWrapping="Wrap"
Style="{StaticResource ItemSubtitleStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Text="{Binding startTime}" Width="70" />
<TextBlock TextWrapping="Wrap"
Style="{StaticResource ItemTitleStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Text="{Binding startHole}" Width="40" />
</StackPanel>
</Border>
</Grid>
</DataTemplate>
...and it renders the following:

You should supply a negative Margin:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,0,-8" />
</Style>
</ListView.ItemContainerStyle>

After 1 hour searching. Here is a way better solution than the negative margin:
Following, the code allowing you to have the margin you want! (here: 0)
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter ContentMargin="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListView ItemContainerStyle="{StaticResource ListViewItemStyle1}">
//your listView items
</ListView>

I have already found rather clear solution for this problem!
<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter ContentMargin="0" SelectionCheckMarkVisualEnabled="False" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListView IsSwipeEnabled="False"
ItemContainerStyle="{StaticResource NoSpacesListViewItemStyle}"
ItemTemplate="{StaticResource SomeTemplate}"
ItemsSource="{Binding SomeData}"
SelectionMode="None"/>
Also I can admit that Selection borders will not work in this case. So this method is not appropriate for ListViews with selection.
There is full default ListViewItemStyle with same changes:
<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
ContentMargin="0"
ContentTransitions="{TemplateBinding ContentTransitions}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
Padding="{TemplateBinding Padding}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
PointerOverBackgroundMargin="1"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
SelectionCheckMarkVisualEnabled="False" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Yes, there is a 4px Margin in the ListViewItem control's template (take a look at ContentBorder element):
<Border x:Name="OuterContainer">
<!-- Visual States -->
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckSelectingThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,9.5,9.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
<Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
<Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
</Border>
<Border x:Name="ContentContainer">
<Grid x:Name="InnerDragContent">
<Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBackgroundThemeBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/>
<Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Margin="4" Opacity="0"/>
<Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
<Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/>
<Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
<Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>
</Grid>
</Border>
<Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Margin="4" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource ListViewItemSelectedBorderThemeThickness}"/>
<Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" VerticalAlignment="Top">
<Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
</Grid>
</Border>
<TextBlock x:Name="MultiArrangeOverlayText" Foreground="{StaticResource ListViewItemDragForegroundThemeBrush}" FontSize="26.667" FontFamily="{StaticResource ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/>
</Grid>
</Border>
</Grid>
</Border>
You can override these Margins via this template editing with easy. Select an ListViewEditItem and perform the Edit Style->Edit a Copy...action.

EDIT: Apparently it is within the ListView template. Edit it in Blend 2012 that comes with VS2012 RTM.
Go to Blend, create a template copy, then go to the xaml within VS2012 XAML go to the at the top and go to the Margin's and set them all to 0.