WPF - HorizontalAlignment="Right" does nothing - wpf

Question

I am trying to make a custom title bar for my window. I have a grid with buttons, that are all the same size, but they refuse to align right. Here is my XAML code:
<Window x:Class="EditorZero.MainWindow"
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:EditorZero"
mc:Ignorable="d"
Title="EditorZero" Height="768" Width="1200" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" ResizeMode="CanResize">
<Border BorderBrush="Black" BorderThickness="2px">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Canvas Grid.Row="0" Background="#343434">
<Grid Width="150px" Height="36px" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">X</Button>
<Button Grid.Column="1">[]</Button>
<Button Grid.Column="2">-</Button>
</Grid>
</Canvas>
<Canvas Grid.Row="1" Background="#232323"></Canvas>
</Grid>
</Border>
</Window>

Answer 1

Remove the Canvas:
<Border BorderBrush="Black" BorderThickness="2px">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Width="150px" Height="36px" Background="#343434" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">X</Button>
<Button Grid.Column="1">[]</Button>
<Button Grid.Column="2">-</Button>
</Grid>
<Canvas Grid.Row="1" Background="#232323"></Canvas>
</Grid>
</Border>

Answer 2

Instead of wrapping inside a canvas, wrap it inside a grid.
I see that you have set a background to the canvas and that is why you are using it. So, apply the background to another Grid. Place your grid of interest inside that as shown below.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#343434">
<Grid Width="150px" Height="36px" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">X</Button>
<Button Grid.Column="1">[]</Button>
<Button Grid.Column="2">-</Button>
</Grid>
</Grid>
<Canvas Grid.Row="1" Background="#232323"></Canvas>
</Grid>