We Keep Coding

Custom Title bar in all windows of WPF app

I have custom title bar for all windows of my application.
I want to create a template that I can use many times on different windows or on Message Box
I am thinking what is the best practice to achieve this.
At the moment I have a title bar but it is hard coded in every window.
This is an example of one of the windows
<Window x:Class="MyApp.Configuration.Windows.NotMainWindow"
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"
Title="Some text"
Height="113.868" Width="405.84"
Background="#FFE5E5E5"
WindowStyle="None"
>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="34" />
</WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/somefolder.somefolder;component/Resources/TitleBarIconsStyle.xaml" />
</Window.Resources>
<Border x:Name="MainWindowBorder" BorderThickness="0" >
<Grid x:Name="parentContainer">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<!--Window chrome-->
<Grid Grid.Row="0" Height="30" Background="#585856">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--App icon-->
<Image Source="/Resources/icon.png" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock FontFamily="Arial" Margin="4 3 0 0" Text="Some text"/>
</StackPanel>
<!--Caption buttons-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
Click="CommandBinding_Executed_Minimize"/>
<Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}"
Click="CommandBinding_Executed_Restore" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
<Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}"
Click="CommandBinding_Executed_Maximize" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
<Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
Click="CommandBinding_Executed_Close"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBox x:Name="Input"/>
<Button x:Name="OkButton"
Content="Ok"/>
</Grid>
</Grid>
</Border>
</Window>

Based on this MSDN document , you can not customize (like change colors and add your icons) windows title bar in WPF App.
the solution is create your custom title bar style and set WindowStyle="None" in <Window/> tag.
There one custom title bar in my WPF app :
<Grid FlowDirection="RightToLeft">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<StackPanel Margin="0 0 5 0" Orientation="Horizontal" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="2" FlowDirection="LeftToRight">
<Button x:Name="btnCloseApp" IsEnabled="True" Margin="0 0 4 0" ToolTip="Exit" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnCloseApp_Click">
<materialDesign:PackIcon Kind="Shutdown" Height="20" Width="20"/>
</Button>
<Button x:Name="btnMinimizeApp" IsEnabled="True" ToolTip="Minimize" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnMiniApp_Click">
<materialDesign:PackIcon Kind="WindowMinimize" Height="20" Width="20"/>
</Button>
</StackPanel>
</Grid>
and in picture :
Again don't forget to set WindowStyle="None"

how to make a side bar in WPF

I've came across a problem where I'm trying to make a side bar in WPF. I've made the grid area for it and it seems to exist however when I try to put a label on it the label seems to be hidden behind the grid. I tried using z-index to no prevail however if I use a margin to move the text to the top of the form then it appears.
Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.
Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.
My xaml is bellow
<Window x:Class="CrackleChat.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:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
mc:Ignorable="d"
Height="650" Width="1200" Icon="/Icon.png"
Background="#36393F"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip">
<Window.DataContext>
<viewmodel:MainViewModel></viewmodel:MainViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136">
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
</Window>

For your second subgrid add this: Grid.Row = "1" Otherwise both grids are in the same row (0 based index applies here)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/> <!--This is your second row-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
Edit: added modified code for better explanation.

How can I update this element from the viewmodel

I'm using Material Design toolkit and I want to somehow set the DrawerHost to open or closed from the view model with a property. I have a property in the view model that is already updated from another source. I just need to translate that property to the xaml. Any help appreciated.
<UserControl x:Class="GS.Server.Focuser.FocuserView"
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d">
<materialDesign:DrawerHost HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="2"
IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}"
BorderBrush="{DynamicResource MaterialDesignDivider}">
<materialDesign:DrawerHost.LeftDrawerContent>
<Grid Width="700">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ToggleButton DockPanel.Dock="Top" HorizontalAlignment="Right" Margin="5"
Style="{StaticResource MaterialDesignHamburgerToggleButton}"
Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
CommandParameter="{x:Static Dock.Left}"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}"/>
</StackPanel>
<Label Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">Focuser Settings Go Here</Label>
</Grid>
</materialDesign:DrawerHost.LeftDrawerContent>
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top"
Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
CommandParameter="{x:Static Dock.Left}"
Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<TextBlock Grid.Row="1" Text="This is the Focuser Page"
FontWeight="Bold" FontSize="18"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</materialDesign:DrawerHost>

UserControl's image not show on MainPage

I create a UserControl that contains a static image and I want to display it on my MainPage. However, the image only displays on my UserControl without displaying on MainPage.
This is my UserControl XAML:
<UserControl
x:Class="Example.Views.UserControls.Gift.GiftView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="#dedede">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/Icon/unselect_gift.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gift"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="1" HorizontalAlignment="Stretch" >
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/birthday.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="BirthDay"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="2" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/package.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Package"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</StackPanel>
</Border>
</Grid>
</UserControl>
And this is my MainPage XAML:
<Page
x:Class="Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example"
xmlns:menu="using:Example.Views.UserControls.Menu"
xmlns:popup="using:Example.Views.UserControls.Popup"
xmlns:giftview="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="Root">
<Grid Background="#FFCFD4E2">
<Grid Visibility="Visible">
<giftview:GiftView x:Name="GiftViewTest" DataContext="{Binding GiftViewModel}"/>
</Grid>
</Grid>
</Grid>
</Page>
When I try to clear my project, the image will shows correctly on my MainPage Preview. But when I rebuild my project, it will disappears on my preview again.
How can I do this?

Almost certainly your image cannot be found at runtime.
You'll need to check your project outputs to make sure the assets are in the correct folder.
More than likely you should use resources to access the images: see this other stackoverflow question
Example User Control that works as expected:
<UserControl x:Class="WpfApp1.UserControl1"
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"
mc:Ignorable="d">
<StackPanel Orientation="Vertical">
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="http://lorempixel.com/400/200/" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="sample-image.jpg" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</UserControl>
Project:

I need to put a label in the right hand corner of my popup in XAML

Here is my code. I have tried several things to get the label in the top right hand corner of the popup and make it stay there, but nothing has worked.
Thanks for your help!
XAML:
<Window x:Class="ValidationWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:ValidationWPF"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="259" d:DesignWidth="420" SizeToContent="WidthAndHeight">
<Grid Height="129" Width="345">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="514*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="251*" />
</Grid.RowDefinitions>
<Button Content="Errors" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Grid.Row="1" Margin="132,12,0,0" MouseEnter="button1_MouseHover">
</Button>
<Popup AllowsTransparency="True" PlacementTarget="{Binding ElementName=button1}" StaysOpen="True" AllowDrop="True" Name="PopUp1" PopupAnimation="Scroll">
<Popup.Child>
<Border BorderBrush="White" BorderThickness="3, 3, 0, 0">
<Border BorderBrush="Black" BorderThickness="3, 3, 3, 3">
<TextBlock Background="Salmon">
<Label Background="AliceBlue" Foreground="Black" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandeled" AllowDrop="False" Margin="100,100,0,0">
x
</Label>
<local:ValidationUserControl/>
</TextBlock>
</Border>
</Border>
</Popup.Child>
</Popup>
</Grid>
</Window>
As you see, I have a popup with a label that has an X in it. The label is fully functional. Now I just need it to look like a normal popup with the label in the top right hand corner.

Try this:
<TextBlock Background="Salmon" MinWidth="150" MinHeight="150" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="1" Background="AliceBlue" Foreground="Black" VerticalAlignment="Top" AllowDrop="False">
X
</Label>
</Grid>
</TextBlock>