We Keep Coding

WPF Custom Fonts is not showing on the Design Window

I'm working on a WPF application using C#. So far, I have added a custom font using a ResourceDictionary on my application. When I run the app I can see the font works fine, but on the Design tab of my XAML it always shows the default font. Could I be missing something to set my designer correctly?
App.xaml
<Application x:Class="Bali.Chat.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Bali.Chat"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/Fonts.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Fonts.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<FontFamily x:Key="LatoRegular">pack://application;,,,/Fonts/#Lato Regular</FontFamily>
<FontFamily x:Key="LatoThin">pack://application;,,,/Fonts/#Lato Thin</FontFamily>
</ResourceDictionary>
MainWindow.xaml
<Window x:Class="Bali.Chat.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:Bali.Chat"
mc:Ignorable="d"
Icon="Images/Logo/logo-small.png"
WindowStyle="None"
AllowsTransparency="True"
Title="Bali Chat"
Height="250" Width="400">
<StackPanel>
<TextBlock Text="Default Font!" FontSize="40" />
<TextBlock Text="Thin Font" FontSize="40" FontFamily="{StaticResource LatoThin}" />
<TextBlock Text="Regular Font" FontSize="40" FontFamily="{StaticResource LatoRegular}" />
</StackPanel>
</Window>
This is what I get on my designer
And this is what I get if I run the application
I really would like to preview what I'm trying to render without having to start the application or check it on the live preview. The tutorial I am following does show the presenter seeing the proper font in the designer, so I know there are some issues. Thanks in advance.

Custom Window with all sides Grip

Recently I want to make a custom window with WPF for my program.
Here is the code of the Window:
<Window x:Class="Test.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:Test"
mc:Ignorable="d"
Title="Test" Height="450" Width="850" Background="Transparent" AllowsTransparency="True" WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip" WindowStyle="None">
</Window>
I want to recreate a titlebar that I set the WindowStyle to None.
Now I need to resize the window with the grip. However, the Grip will not work anymore if I set the WindowStyle to None.
In spite I can set the ResizeMode to CanResizeWithGrip. Whereas, it only works on the bottom right side of the Window.
I want to make the Grip work all sides of the window. How can I achieve it?

You can set the ResizeBorderThickness property of a WindowChrome to make a custom window resizable:
<Window x:Class="WpfApp1.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" WindowStyle="None">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0" ResizeBorderThickness="5" />
</WindowChrome.WindowChrome>
<Grid Background="Yellow">
<TextBlock>Resizable window...</TextBlock>
</Grid>
</Window>

External image in UserControl not loading when control is used

I have an Image that I need to load from an external file into a Button.
The Image resides in a folder in the same directory as the final executable file.
/Resources/image.png
It's not included in the Project Resources and it should not be for the needs of the Application.
The Image is loaded and displayed into a UserControl fine, but when I place my UserControl into my main View,
I get the following error:
Cannot locate resource 'views/usercontrols/resources/playerbuttonsicons/repeat-icon.png'.
The UserControl is located under Views/UserControls in my Project Tree as the error says.
I have tried various ways of specifying the image path (absolute, relative, uri, pack etc), but none of them worked.
The problem is to be tackled using xaml only, if possible.
UserControl code:
<UserControl x:Class="MusicPlayer.Views.UserControls.NowPlayingControl"
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:MusicPlayer.Views.UserControls"
mc:Ignorable="d"
d:DesignWidth="400"
x:Name="ParentControl">
<!--Resources-->
<UserControl.Resources>
</UserControl.Resources>
<!--Design-->
<DockPanel x:Name="ParentContainer">
<Button x:Name="btnPlay">
<Button.Background>
<ImageBrush ImageSource="Resources/PlayerButtonsIcons/play-icon.png" />
</Button.Background>
</Button>
</DockPanel>
</UserControl>
MainView code:
<Window x:Class="MusicPlayer.MainView"
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:MusicPlayer"
mc:Ignorable="d"
xmlns:vm="clr-namespace:MusicPlayer.ViewModels"
xmlns:uc="clr-namespace:MusicPlayer.Views.UserControls"
x:Name="ParentControl">
<!--Resources-->
<Window.Resources>
<vm:MainViewModel x:Key="VM" />
</Window.Resources>
<!--Design-->
<Grid x:Name="ParentContainer"
DataContext="{StaticResource VM}">
<uc:NowPlayingControl />
</Grid>
</Window>

I resolved my problem with the following steps.
Included all the external files into my Project Resources. Marked them as Content and Copy Always.
Instead of loading the Images into my UserControl at run-time, I loaded them in my App.xaml Resources.
The Images are now used as StaticResource in my UserControl.
App.xaml
<Application x:Class="MusicPlayer.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MusicPlayer"
xmlns:ex="clr-namespace:SharpUtilities.WPF"
StartupUri="Views/MainView.xaml">
<Application.Resources>
<BitmapImage x:Key="PlayerPlayIcon"
UriSource="Resources/play-icon.png" />
</Application.Resources>
</Application>
UserControl.xaml
<UserControl x:Class="MusicPlayer.Views.UserControls.NowPlayingControl"
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:MusicPlayer.Views.UserControls"
mc:Ignorable="d"
d:DesignWidth="400"
x:Name="ParentControl">
<DockPanel x:Name="ParentContainer">
<Button x:Name="btnPlay">
<Button.Background>
<ImageBrush ImageSource="{StaticResource PlayerPlayIcon}" />
</Button.Background>
</Button>
</DockPanel>
</UserControl>

Display wpf window on top of the screen

I am developing a WPF application. I need to to display a window on top of the screen like a window taskbar.
This is my xaml code:
<Window x:Class="testProject.Notification.TestWindow"
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:testProject.Notification"
mc:Ignorable="d"
Title="TestWindow" Height="80" Topmost="True" ResizeMode="NoResize" WindowStyle="None">
<Grid Background="Blue"/>
</Window>
I need a bluewindow like below(screen shot from mac osx application):

This will do the trick for you
<Window x:Class="AtDTopCorner.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="35"
WindowStyle="None"
WindowStartupLocation="Manual"
Top="5"
Left="0"
AllowsTransparency="True"
Background="Blue"
Width="{Binding Source={x:Static SystemParameters.FullPrimaryScreenWidth}}">
</Window>

Adding a Usercontrol with a transparent Background to a Window

I have created a UserControl with some rounded edged Border as first real element. The actuall Background is transparent.
<UserControl
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:QP_WPF" x:Class="GUI_WPF_Interior"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:themes="clr-namespace:Xceed.Wpf.Toolkit.Themes;assembly=Xceed.Wpf.Toolkit"
mc:Ignorable="d"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
d:DesignWidth="600
" Background="transparent">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ColorsAndBrushes.xaml" />
<ResourceDictionary Source="ControlTemplates.xaml"/>
</ResourceDictionary.MergedDictionaries>
</UserControl.Resources>
<Border Margin="10" Background="{StaticResource BG_GradientBrush_2}" CornerRadius="12,12,12,12">
....
(the Margin is only to provide a better visual for the problem)
Now I want to display this UserControl in a window. But the area that is used by the margin and the rounded edges stays white.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:qp="clr-namespace:QP_WPF;assembly=QP_WPF"
Title="MainWindow" Height="680" Width="600"
WindowStyle="None"
AllowsTransparency="True"
MouseLeftButtonDown="Window_MouseLeftButtonDown">
<Grid Background="Transparent">
<qp:GUI_WPF_Interior x:Name="GUIInterior" Background="Transparent"/>
</Grid>
</Window>
What do I need to doe so that the Window only displays my UserControls parts that are not transparent?

Try to add also background=transparent to the window besides AllowTransparency