The splitview items aren't properly stacking beneath hamburger button - xaml

Question

I am working on Visual Studio 2015 and trying to make a hamburger style navigation... but the items of the pane of the splitview are automatically getting a margin, and are not properly stacking beneath the hamburger button [look at the attached image]. I want them to properly stack beneath the Hamburger button on the leftmost of the grid.
I want to use the listbox so that when user navigates to a different page, it remains selected/highlighted, so I can't remove that.
I have attached the MainPage.xaml code and the code of the style i have used. Hope you would help .. Thanks!
<Page
x:Class="MathAssistant.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MathAssistant"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="HBbutton" Click="HBbutton_Click" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="" FontSize="25" Background="BlueViolet"/>
<TextBlock Name="Heading" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="36" Foreground="CornflowerBlue" />
<SplitView Grid.Row="1"
Grid.ColumnSpan="2"
Name="Menu"
DisplayMode="CompactOverlay"
OpenPaneLength="270"
CompactPaneLength="56">
<SplitView.Pane>
<ListBox SelectionMode="Single"
SelectionChanged="MenuListBox_SelectionChanged">
<ListBoxItem Name="MenuItemUnitConverter">
<StackPanel Orientation="Horizontal">
<Image Margin="0" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
<TextBlock FontSize="24" Margin="20,0,0,0">
<Run Text="Unit Converter"/>
</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MenuItemCalculator" >
<StackPanel Orientation="Horizontal">
<Image Margin="0" Source="Assets/calculatorlogo.png" Style="{StaticResource SplitviewLogoStyle}"/>
<TextBlock FontSize="24" Margin="20,0,0,0">Calculator</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame" Grid.Column="1" Grid.Row="1"></Frame>
</SplitView.Content>
</SplitView>
</Grid>
<Application.Resources>
<Style TargetType="Image" x:Key="SplitviewLogoStyle">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="45" />
</Style>

Answer 1

ListBoxItem has a default padding (that's the opposite of a margin) of "12,11,12,13". Try setting the Padding of the ListBoxItems to 0 then it should be aligned to the left. To set it in the center you could do something like this:
<ListBoxItem Name="MenuItemUnitConverter" Padding="0">
<StackPanel Orientation="Horizontal">
<Image Margin="4" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
<TextBlock FontSize="24" Margin="20,0,0,0">
<Run Text="Unit Converter"/>
</TextBlock>
</StackPanel>
</ListBoxItem>
And modify the Style so that image's margin on left + width + image's margin on the right = SplitView.Width (4+48+4=56):
<Style TargetType="Image" x:Key="SplitviewLogoStyle">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="48" />
</Style>