We Keep Coding

Black area to the right, inside window

A large black area appears on the right side of the window when I run the program, and I can't figure out why. It's not there in the preview on the XAML file page in Visual Studio 2017, and I ran it once on a Windows 7 computer, and the black area wasn't there (I'm primarily on Windows 10). The problem could possibly be in another file, but I cannot find it.
<Window x:Class="Project.Widget"
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:Project"
mc:Ignorable="d"
Title="Menu"
WindowStartupLocation="Manual"
ResizeMode="NoResize"
Width="109"
SizeToContent="WidthAndHeight"
WindowState="Minimized"
Background="#2D3A48"
Topmost="False"
Loaded="Window_Loaded"
Closing="Window_Closing" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="77"/>
<RowDefinition Height="28"/>
<RowDefinition Height="90"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Image x:Name="Icon"
Source="./Resources/Icon.png"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="77"
Width="109" />
<Label x:Name="labelUsername"
Grid.Row="1"
Content=""
FontSize="14"
Foreground="White"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Label x:Name="labelScore"
Grid.Row="2"
Content="0%, 0 of 0"
Foreground="White"
FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,0,0,0" />
<Image x:Name="AvgScoreDot"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="50"
Source=".\Resources\yellow_dot.png"
Margin="0,32,0,0"/>
<Label x:Name="labelAvgScore"
Grid.Row="2"
Content="0.0"
Foreground="White"
FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,35,0,0"
FontWeight="Bold" />
<Button x:Name="MailBtn"
Grid.Row="3"
Height="60"
Width="109"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="#FF2D3A48"
Click="Mail_Click" >
<Button.Background>
<ImageBrush
ImageSource="/Resources/mail.png"
Stretch="None" />
</Button.Background>
</Button>
<Button x:Name="MailBadgeBtn"
Grid.Row="3"
Content="0"
Foreground="White"
FontSize="11"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Height="20"
Width="20"
Margin="0,30,24,10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Click="MailBadgeBtn_Click" BorderThickness="0">
<Button.Background>
<ImageBrush
ImageSource=".\Resources\red_dot.png" />
</Button.Background>
</Button>
<TextBlock x:Name="labelConnection"
Grid.Row="0"
Text=" No Connection or blocked by Firewall"
Foreground="Red"
Background="White"
TextWrapping="Wrap"
TextAlignment="Center"
VerticalAlignment="Center"
Height="77"
Width="109"
HorizontalAlignment="Center" />
</Grid>
Here's an image of what I get when I run it:

Here's what I get when I remove SizeToContent="WidthAndHeight" and add a height of 300 (I also had to remove your event handlers since I don't have that code, and add garbage images to the Resources folder since I don't have the original images):
Is that more like what you were looking for? You can also choose to explicitly set SizeToContent to "Manual".

Buttons resize with page when i dont want them toWPF

Hello I added some buttons to my Main_Page.xaml and they resize with the window while running the application and i dont want that. I want them to stay the same proportion when i run the app.
Button names are: Exercise_tab_left_button, Exercise_tab_right_button
<Page x:Class="TrackFit_Project.Main_Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TrackFit_Project"
mc:Ignorable="d"
d:DesignHeight="453.635" d:DesignWidth="855.207"
Title="Main_Page"
ShowsNavigationUI = "false" >
<TabControl Margin="10,10,10.333,10.333">
<TabItem Header="Exercise"
HorizontalAlignment="Left"
Width="58"
Height="22"
Margin="-2,-2,0,0"
VerticalAlignment="Top">
<Grid Background="#FFE5E5E5">
<Button x:Name="Exercise_Tab_Profile_Button" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Click="profileButtonClick">
<Image>
<Image.Source>stock profile image.png</Image.Source>
</Image>
</Button>
<Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" HorizontalAlignment="Left" Height="295" Margin="137,50,0,0" Stroke="Black" VerticalAlignment="Top" Width="625"/>
<TextBlock HorizontalAlignment="Left" Height="234" Margin="169,87,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="548"/>
**<Button x:Name="Exercise_tab_left_button" Content="<" Margin="148,189,655,154" FontSize="18" FontWeight="Bold"/>
<Button x:Name="Exercise_tab_Right_button" Content=">" Margin="717,189,83,155" FontSize="18" FontWeight="Bold"/>**
<TextBlock x:Name="Log_Out_Text_Block" HorizontalAlignment="Left" Margin="10,105,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold">
<Hyperlink x:Name="Log_out_hyperlink" Click="Log_out_hyperlink_Click">Log out</Hyperlink>
</TextBlock>
</Grid>
</TabControl>

You have to specify the properties Height and Width instead of setting these values indirectly using the Margin property.
Currently the Margin property determines the width and height of the buttons when they are arranged in the Grid. This can be useful when the UI is static and must not resize when the window is resized.
Assuming you want the UI to dynamically adapt to the size you should embed the Rectangle, TextBlock and the Buttons in a second Grid in a way like this (you might want to figure out the right values for the Margin and size of the buttons):
<Grid Margin="137,50,10,10">
<Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" Stroke="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock HorizontalAlignment="Stretch" Height="234" Margin="32,37" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Stretch" />
<Button x:Name="Exercise_tab_left_button" Content="<" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Left" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
<Button x:Name="Exercise_tab_Right_button" Content=">" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Right" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
</Grid>

UWP App Template

I'm developing a UWP application. The design of the UI is similar to the Email app in Windows 10 (My app design).
This is my XAML code:
<Page
x:Class="Milano.InWork"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Milano"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid BorderBrush="White" BorderThickness="1">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
<Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
</Button.Background>
</Button>
<Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top" Height="43" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
</Button.Background>
</Button>
</Grid>
<Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
</Grid>
<ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
<GridView x:Name="OrdersGridView" >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock Text="{Binding date_created}" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock TextAlignment="Center" HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
</Grid>
What I need to do: When user clicks on Grid in right place of screen app show something like Fragment (I know this is Android thing) with some fields and data, like in the Email Windows 10 app:
Before clicking
After clicking
How I can implement this?
Or where I can read tutorial or something like this?
Thank's for help!

It is a typical Master/Detail design in UWP, you can refer to the official Master/detail sample, when on wide-screen mode, it uses ContentPresenter to show the details, and when on narrow-screen mode, it navigates with parameter to the detail page. The official sample is so clear, you can have a check.
From your first image, I think you can use a ListView to replace your GridView, for both controls, you can use SelectionChanged or ItemClick event to show the details, if you want to use ItemClick event, please don't forget to enable the IsItemClickEnabled property.
There is a MasterDetails (Mail App) sample which uses Template 10 as project template, if you're interest in this sample, you can also have a check.

UWP Navigation Pane Issues

I am looking for a way to create a navigation pane using SplitView and other XAML controls.
I have tried creating something like the code below, but I failed as the controls aren't placed precisely in the center (vertically).
Also the buttons have this weird default animation that skews them when they are clicked. I want to turn it off but I don't know how.
All in all, I want to create a hamburger menu that is similar to Start menu in Windows 10 Anniversary Update. All opinions would be pretty appreciated.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Left" Width="319" DisplayMode="CompactOverlay">
<SplitView.Pane>
<StackPanel>
<Button x:Name="HamburgerButton" Width="320" Height="48" Click="HamburgerButtonClick" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Margin="0,1,0,0" />
<TextBlock Text="MENU" Margin="0,0,0,0" FontWeight="Bold" />
</StackPanel>
</Button>
<Button x:Name="TasksButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Tasks" Margin="0,0,0,0"/>
</StackPanel>
</Button>
<Button x:Name="ArchivedButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
<TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Archived" Margin="0,0,0,0"/>
</StackPanel>
</Button>
</StackPanel>
</SplitView.Pane>
</SplitView>
</Grid>
Here is what I want to achieve:
Screenshots: http://imgur.com/a/utNmC

MessiKing's Template 10 is a good idea and will save you a lot of time. No doubt in that. But that doesn't help you learn how XAML handles controls because they are all handled already by experts. However if you want to learn how it works in pure XAML without any 3rd Party Libraries, see below.
Your XAML will look something like below
<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Stretch" OpenPaneLength="150" DisplayMode="CompactOverlay" IsPaneOpen="True">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="HamburgerButton" Click="HamburgerButtonClick" Style="{StaticResource TextBlockButtonStyle}" FontWeight="Bold" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Padding="5" />
<TextBlock Text="MENU" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button x:Name="TasksButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="1">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Padding="5" />
<TextBlock Text="Tasks" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
<Button x:Name="ArchivedButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="" TextAlignment="Center" Margin="5" />
<TextBlock Text="Archived" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
</StackPanel>
</Button>
</Grid>
</Grid>
</SplitView.Pane>
</SplitView>
Output
Now for the styling for buttons. Default Styling provided by Microsoft includes a StaticResource called TextBlockButtonStyle which will change your button styling to that of a TextBlock. Take a look at this.
Also there is a reason why I wrapped the List Items inside a Grid. because if you change
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
to
<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Bottom">
you will see it something like below.
Good Luck and Happy Coding.

Dziewulski,
If you want to make a hamburgerMenu, using Template 10 would save you much time.
When you install the Template 10 in visual studio, you will be easy to create a project which contained a hamburgerMenu in it.
Please refer to these videos for details:Template 10 for Windows 10 Apps
Template 10: How to Build Your Universal Windows App

try the UWP Toolkit from Microsoft. It contains a hamburger menu:
https://github.com/Microsoft/UWPCommunityToolkit

Adding spacing in UWP StackPanels

I'm currently programming a UWP application for my school and would like to separate some items on a StackPanel, however I have no idea how to do it, and googling only returns static methods rather than dynamic ones, meaning if the window is resize, it screws up. I am trying to move "My Account" and "Settings" to the bottom of the stackpanel bar
<Page
x:Class="G_Student.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:G_Student"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="mainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="navBar"
DisplayMode="CompactOverlay"
IsPaneOpen="False"
CompactPaneLength="50"
OpenPaneLength="200">
<SplitView.Pane>
<StackPanel Background = "#2b2b2b" >
Button x:Name="hamburgerButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="#0063b1"
Foreground="#ffffff"
Click="hamburgerButton_Click"/>
<StackPanel Orientation = "Horizontal" Background="#15476e">
<Button x:Name="homeButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="#15476e"
Foreground="#ffffff"/>
<TextBlock Text = "Home"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="locateButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Class Finder"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="classButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Class List"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="daymapButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "DayMap"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="plannerButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Planner"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="accountButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "My Account"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Background="Transparent">
<Button x:Name="settingsButton"
FontFamily="Segoe MDL2 Assets"
Content=""
Width="50"
Height="50"
Background="Transparent"
Foreground="#ffffff"/>
<TextBlock Text = "Settings"
FontSize="14"
VerticalAlignment="Center"
Foreground="#ffffff"/>
</StackPanel>
</StackPanel>
</SplitView.Pane>
</SplitView>
</Grid>
</Page>
Thanks so much in advance!

Instead of a StackPanel, you could use a Grid with RowDefinitions.
Wrap account and settings in one StackPanel (or another Grid with two auto rows) and set it as the last row that fills available space. Then alignment to bottom to have it at the position you want.
Example code:
<Grid Background="#2b2b2b">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" /> // fills available space
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" /> // hamburger
<StackPanel Grid.Row="1" /> // home
<StackPanel Grid.Row="2" /> // locate
<StackPanel Grid.Row="3" /> // class
<StackPanel Grid.Row="4" /> // daymap
<StackPanel Grid.Row="5" /> // planner
<StackPanel Grid.Row="6" VerticalAlignment="Bottom"> // wrapper
<StackPanel /> // account
<StackPanel /> // settings
</StackPanel>
</Grid>