Develop Reference

How to do a list of square in GRID XAML?

I am trying to create a grid in XAML by the following:
GRID Type
I tried something like this but I have no ideea how to add the red squares.
Do I have to make a grid in grid?
Right now, I have this code
<Window x:Class="MonitorComenzi.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:MonitorComenzi"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
</Grid>
</Window>

You can make nested Grids, its absolutly fine, but a single StackPanel do the trick as well. Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="10"
Grid.Row="1"
Grid.Column="0">
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
</StackPanel>
</Grid>

WPF Using GridSplitter for individual Row Column in Grid

I want to have GridSplitter that resizes only one cell (actually not correct term per se for WPF Grid, let's call it individual Grid[r][c]) and cell adjacent to it to be resized.
Here what I tried:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
<TextBlock>Testing 1</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
<TextBlock>Testing 2</TextBlock> </Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2">
<TextBlock>Testing 2</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0">
<TextBlock>Testing 3</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
<TextBlock>Testing 4</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2">
<TextBlock>Testing 5</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0">
<TextBlock>Testing 6</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="1">
<TextBlock>Testing 7</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="2">
<TextBlock>Testing 8</TextBlock></Border>
<GridSplitter Grid.Row="0"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="0"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
</Grid>
I want it to behave in a way that individual cell in the Grid shall be resized.
At app start
While resizing via grid splitter:
After Reisize:
I wanted that Only Grid[ 0][ 0] and Grid[ 0][ 1] to be resized

You have 3 columns and 3 lines, not 3 columns inside each line,
try this:
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="0"/>
<GridSplitter Grid.Column="1"/>
<GridSplitter Grid.Column="2"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Grid>

Have own code (for "simplicity", sorry) which addresses vertical gridsplitting. Given time, will be including an update for the horizontal, but assuming it's no more than defining distinct grid columns instead of Celso's distinct grid rows.
There's certainly some issue in applying the particular member fields of GridSizeBehaviour.
Replace CurrentAndNext with the BasedOnAlignment property in the first attached vertical gridsplitting example to find that all rows are affected- not just the the row the gridsplitter was defined on.
To bug out GridSizeBehaviour, replace CurrentAndNext with PreviousAndCurrent in there for the 0'th row definition and find that once the gridsplitter is clicked, it never returns/loses visibility, along with the rest of the controls on the form.
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
<Button Grid.Row="2" Grid.Column="0">Button 2</Button>
<Button Grid.Row="2" Grid.Column="2">Button 3</Button>
</Grid>
Perhaps there is an API solution to this? But using Celso's idea of nested grids, it works in the following code:
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
</Grid>
<Grid Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0">Button 2</Button>
<Button Grid.Column="2">Button 3</Button>
</Grid>
</Grid>
More needs to be done with this, however, for if the user drags the gridsplitter to the edge of a form maximised to screen size, it cannot be retrieved! Looks like it was never the policy of MS to touch row/columns/cells in a grid, as they are basically user defined criteria.

XAML Grid Columns Width

I have problem with Grid container as it doesn't work as I saw in some old tutorials.
I have following XAML:
<UserControl
x:Class="UWA.Views.LastActivities"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWA.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:Key="FullItem">
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image x:Name="icon" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Height="45" Width="45" VerticalAlignment="Center" Margin="5" Source="ms-appx:///Assets/Square44x44Logo.png"/>
<TextBlock x:Name="title" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Title, FallbackValue=Title}" Margin="3,0,0,0" VerticalAlignment="Center" FontWeight="Bold" FontSize="21.333" />
<TextBlock x:Name="description" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Description, FallbackValue=Description}" Margin="3,0,0,0" VerticalAlignment="Center" FontSize="18.667" FontWeight="Bold" Foreground="#FF838383" />
<TextBlock x:Name="content" Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Converter, FallbackValue=Content}" Margin="3,0,0,0" HorizontalAlignment="Left" FontSize="16" Foreground="#FF838383" />
<TextBlock x:Name="time" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="2h" Margin="0,0,3,0" VerticalAlignment="Center" TextAlignment="Right" Foreground="#FFC1C1C1" FontSize="16" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListView x:Name="listView" Margin="0" FontSize="16" ItemTemplate="{StaticResource FullItem}"/>
</Grid>
</UserControl>
It's just ListView with custom ItemTemplate and it looks like this:
I would like to move my 3rd column ("2h" text on screen) way to the right and be aligned with it. HorizontalAlignment doesn't work.
As far as I've read this should work. My 1st column is set to Auto so it'll get Width based on content which in my case is always 55 (45 image width + margins). 3rd column is also set to auto and 2nd column is set to 1* (default) so it should get all left space. But it doesn't. For now it seems to work like there is 3 times Auto.

Modify the Grid in your DataTemplate and set the HorizontalAlignment Property to "Stretch"
Add to your List the ItemContainerStyle. Set the HorizontalAlignment property to "Stretch"
<UserControl
x:Class="UWA.Views.LastActivities"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWA.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:Key="FullItem">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image x:Name="icon" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Height="45" Width="45" VerticalAlignment="Center" Margin="5" Source="ms-appx:///Assets/Square44x44Logo.png"/>
<TextBlock x:Name="title" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Title, FallbackValue=Title}" Margin="3,0,0,0" VerticalAlignment="Center" FontWeight="Bold" FontSize="21.333" />
<TextBlock x:Name="description" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Description, FallbackValue=Description}" Margin="3,0,0,0" VerticalAlignment="Center" FontSize="18.667" FontWeight="Bold" Foreground="#FF838383" />
<TextBlock x:Name="content" Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Converter, FallbackValue=Content}" Margin="3,0,0,0" HorizontalAlignment="Left" FontSize="16" Foreground="#FF838383" />
<TextBlock x:Name="time" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="2h" Margin="0,0,3,0" VerticalAlignment="Center" TextAlignment="Right" Foreground="#FFC1C1C1" FontSize="16" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListView x:Name="listView" Margin="0" FontSize="16" ItemTemplate="{StaticResource FullItem}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>

WPF Grid Rows and ResizeGrip do not anchor correctly

once again after hours of struggle with WPF I need your awesome help.
I have read many different StackOverflows, nonetheless, I cannot seem to get my current situation working and I don't understand why. I have chosen to use a Grid in contrast to a DockPanel and I would like to keep it that way as well. According to what I have read the row definitions are ok, the second row of the template grid should automatically stretch. Unfortunately it does not, as it seems that the last row of the grid does not move away.
This is how my window looks at the moment:
As you can see is the blue row not at the bottom of the window. In fact, the window should not be that long in the first place.
This is the code snippet of my Generic.xaml file that is relevant to the problem.
The way it works is, that I have a Skin with a custom control group:
<!-- Window START-->
<ControlTemplate x:Key="WindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Red" Padding="0" VerticalAlignment="Stretch">
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<!-- HEADER START-->
<Frame x:Name="header_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Background="#ddd" BorderThickness="0 0 0 1" BorderBrush="#c9c9c9"/>
<Image x:Name="LogoICon" Source="/MTApp;component/Resources/Icon.png" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="10 8"/>
<Label x:Name="windowTitle" Grid.ColumnSpan="2" Content="{TemplateBinding Title}" VerticalAlignment="Center" Foreground="#393939" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Segoe UI Regular" FontSize="12"/>
<Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="20" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Button x:Name="minimizeBtn" Content="0" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="1" Margin="3 0 0 0" Click="minimizeBtn_Click"/>
<Button x:Name="maximizeBtn" Content="2" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="2" Margin="3 0 0 0" Click="maximizeBtn_Click"/>
<Button x:Name="quitBtn" Content="r" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="3" Margin="3 0 0 0" Click="quitBtn_Click"/>
</Grid>
<!-- HEADER END-->
<!-- CONTENT START-->
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Height="Auto"/>
<!-- CONTENT END-->
<!-- FOOTER START-->
<Border x:Name="footer_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Height="25">
<ResizeGrip />
</Border>
<!-- FOOTER END-->
</Grid>
</Border>
</ControlTemplate>
<!-- Window END-->
<Style x:Key="LightSkin_0_1" TargetType="Window">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template" Value="{StaticResource WindowTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState}" Value="Maximized">
</DataTrigger>
</Style.Triggers>
</Style>
And my MainWindow.xaml is:
<Window x:Class="UHashIt.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:UHashIt"
mc:Ignorable="d"
Title="Window title"
WindowStartupLocation="CenterScreen"
MinHeight="275"
MinWidth="700"
Width="700"
Style="{DynamicResource LightSkin_0_1}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Menu -->
<Border VerticalAlignment="Top" Padding="5" Background="#f2f2f2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1" BorderBrush="LightGray">
<DockPanel >
<Menu DockPanel.Dock="Left">
<MenuItem Header="File">
<MenuItem Header="Add File" />
<MenuItem Header="Export.." />
<Separator />
<MenuItem Header="Close"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="Online Documentation" />
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</DockPanel>
</Border>
<!-- Menu End -->
<!-- Content -->
<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Style="{DynamicResource headline4}" Content="File 1" Grid.Row="0" Grid.Column="1"/>
<TextBox Grid.Row="1" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="1" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="1" Grid.Column="3"/>
<Label Style="{DynamicResource headline4}" Content="File 2" Grid.Row="2" Grid.Column="1"/>
<TextBox Grid.Row="3" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="3" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="3" Grid.Column="3"/>
<!-- Hash Button and Selection -->
<ComboBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Width="200" Height="30">
<ComboBoxItem>
Please Choose Your Algorithm
</ComboBoxItem>
</ComboBox>
<Button Grid.Column="1" Grid.Row="4" Style="{DynamicResource ActionBtn}" Content="Button" HorizontalAlignment="Right"/>
<!-- End-->
</Grid>
<!-- Content End-->
</Grid>
I cannot explain myself why the "blue bar" is not attached to the bottom. Despite the fact, that the window is so big.

I think you want to change this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
to this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Stretch" Background="Blue" MouseDown="Window_MouseDown">

Persistent Navigation Bar in XAML for Windows 8 App

How do I implement a persistent navigation bar. Basically an app bar that cannot be dismissed even by the right click action. MS as referred to this in this article ( https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn440584.aspx ) when discussing the flat navigation in the calculator app and also here ( http://blogs.windows.com/bloggingwindows/2014/05/13/windows-store-refresh-makes-it-easier-to-find-apps/ ) when reviewing changes to the windows store app in windows 8.1.

Here's how you do it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="NavigationPart" Orientation="Horizontal">
<Button Content="Home" />
<Button Content="Products" />
<Button Content="Contact" />
</StackPanel>
<Frame Grid.Row="1" x:Name="ContentPart" />
</Grid>
Best of luck!

After reading your question i started googling and was not able to find any already available app bars for that. So as far as i know there is nothing like persistent App Bar. IsSticky property does help to some extent but still can be dismissed by right click.
But still you can customize things by yourself...
As for eg. you have referred this page in your question.
You can make your own implementation for the same.
This is my implementation just to get you started...
<Page
x:Class="App2.BlankPage5"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="120"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/windows-image.jpg" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Home" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Top Charts" Grid.Column="1" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Categories" Grid.Column="2" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Collection" Grid.Column="3" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Accounts" Grid.Column="4" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="110" Height="110">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/back.png" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="10, 0, 0, 0" Text="Store" FontSize="70" Grid.Column="1" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" >
<TextBlock Text="Your Content Here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100" Foreground="Black"/>
</Grid>
</Grid>
</Page>
It produces the following output :
I have not worked on the respective event handlers and i hope you can do that according to your needs.
A Basic Advice : Don't try to make too many changes to the already available design templates. Stick to them and only apply the required changes.