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.
Related
this is in XAML Designer
Expected:
Actual:
This is my window's XAML:
<Window
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:WpfApp2"
xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="WpfApp2.MainWindow"
mc:Ignorable="d"
ResizeMode="NoResize"
Title="MainWindow" SizeToContent="WidthAndHeight" AllowsTransparency="True" WindowStyle="None" Loaded="Window_Loaded">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="5, 0, 5, 0"></Setter>
<Setter Property="Height" Value="30"></Setter>
</Style>
</StackPanel.Resources>
<Button>测试</Button>
<Button>测试</Button>
<Button>测试</Button>
</StackPanel>
<Canvas Height="2" Background="Red" />
</StackPanel>
There is extra space around the window.
I found that as long as the height is less than 40, there will be extra space.But I didn't set minHeight.
this is my app.xaml:
<Application x:Class="WpfApp2.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp2"
StartupUri="MainWindow.xaml">
<Application.Resources>
</Application.Resources>
my environmental information:
Windows 11
Visual Studio 2022
.net framework 4.8
In WPF SizeToContent does not work very well with WindowStyle=None. It seems the renderer is still taking a non-existant border into account when initially drawing the Window.
A simple hack to overcome this: set Height="1" on the Window to force its initial size to something smaller than the eventual size. Then when the content is rendered, SizeToContent="WidthAndHeight" will cause the window to resize itself to the correct size.
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>
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
I feel like this is a common sense and trivial, but i don't understand what i'm doing to begin with. I don't have any other resource I can use for help either. Sometimes i wonder if I'm even googling the question right.
I have some custom styles & templates I've made, but now the file is rather large and difficult to work with. I want to put each style or template in there own XAML files (sorta like headers/implementation files) so that a friend could work on one and then we add it to the project. (Such as Dictionary1.xaml ... ). I started a blank project to keep it simple.
Dictionary1.XAML
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary x:Key="SomeKey">
<Color x:Key="detailMark">Black</Color>
<SolidColorBrush x:Key="detailMarkBrush" Color="{StaticResource ResourceKey=detailMark}" />
<Style x:Key="flatTextBox" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Rectangle Stroke="{StaticResource ResourceKey=detailMarkBrush}" StrokeThickness="1"/>
<TextBox Margin="1" Text="{TemplateBinding Text}" BorderThickness="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
App.XAML
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<local:MainWindow x:Key="SomeKey"/>
</Application.Resources>
</Application>
And MainWindow.XAML
<Window x:Class="WpfApplication1.MainWindow"
xmlns:local="clr-namespace:WpfApplication1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"
Height="350" Width="525">
<Grid>
<TextBox Style="{DynamicResource flatTextBox}"> <!-- doesn't autocomplete/work -->
</TextBox>
</Grid>
</Window>
Edit:
<TextBox Style="{Binding Mode=OneWay, Source={StaticResource SomeKey}}">
<!-- Throws System.Windows.Markup.XamlParseException -->
</TextBox>
As Alex mentioned, the right way to do this is using Merged Dictionaries.
Therefore, you should structure your project correctly, otherwise it will end up in a mess.
Keeping your "blank project", it should look like this:
YourProject
App.xaml (.cs)
MainWindow.xaml (.cs)
SomeOtherWindow.xaml (.cs)
Resources folder
Dictionary1.xaml
Dictionary2.xaml
...
Then you have to decide:
Do you want the resources to be available application wide?
Or do you want the resources to vary between certain windows / user controls?
If you want #1, you have to merge the dictionaries in the App.xaml file:
<Application x:Class=...
...>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Dictionary1.xaml"/>
<ResourceDictionary Source="Resources/Dictionary2.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
If you want #2, you have to merge the dictionaries in the specific window / user control file:
<Window x:Class=...
...>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Dictionary1.xaml"/>
<ResourceDictionary>
<!-- Window specific resources -->
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<!-- Content -->
</Window>
I'm trying to do the Getting Started instructions here: http://mahapps.com/MahApps.Metro/guides/quick-start.html.
I've gotten the latest pre-release (tried with stable too), I'm not getting the same window the guide is producing. I'm getting a transparent window and titlebar, so it looks like a floating titlebar, and minimize, maximize and close buttons.
When I add the styling I get a white background with a blue titlebar, but no shadow. Am I doing something wrong here or has anyone else experienced this?
Thanks.
EDIT: here's the XAML
Main Window
<Controls:MetroWindow x:Class="Metro.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="MainWindow" Height="900" Width="1600">
</Controls:MetroWindow>
App.xaml
<Application x:Class="Metro.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
As I mentioned, I followed the getting started instructions, I copy and pasted the exact same code, and got a different result.
EDIT
The quick start guide and the MetroWindow help now updated (04.09.2014).
The screenhots/examples at the quickstart are not quite updated.
You can have a border
<controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Title="MainWindow"
Height="200"
Width="600"
BorderBrush="{DynamicResource AccentColorBrush}"
BorderThickness="1"
WindowStartupLocation="CenterScreen">
</controls:MetroWindow>
or a glow border
<controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Title="MainWindow"
Height="200"
Width="600"
GlowBrush="{DynamicResource AccentColorBrush}"
WindowStartupLocation="CenterScreen">
</controls:MetroWindow>
or a drop shadow
<controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:behaviours="http://metro.mahapps.com/winfx/xaml/shared"
Title="MainWindow"
Height="200"
Width="600"
ResizeMode="CanResizeWithGrip"
WindowTransitionsEnabled="False"
WindowStartupLocation="CenterScreen">
<i:Interaction.Behaviors>
<behaviours:BorderlessWindowBehavior AllowsTransparency="False"
EnableDWMDropShadow="True" />
<behaviours:WindowsSettingBehaviour />
<behaviours:GlowWindowBehavior />
</i:Interaction.Behaviors>
</controls:MetroWindow>
Update
EnableDWMDropShadow has been moved to MetroWindow in version 0.13 alpha (latest version)
<controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:behaviours="http://metro.mahapps.com/winfx/xaml/shared"
Title="MainWindow"
Height="200"
Width="600"
EnableDWMDropShadow="True"
ResizeMode="CanResizeWithGrip"
WindowTransitionsEnabled="False"
WindowStartupLocation="CenterScreen">
</controls:MetroWindow>
hope that helps