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.
Related
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.
I am creating a WPF application and want my window to be borderless, and also possible to be resized only from the top.
What I have tried so far
I initially thought this would work:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="200" Height="150"
WindowStyle="None"
ResizeMode="CanResize"
AllowsTransparency="True"
BorderThickness="0,5,0,0"
BorderBrush="Black">
<Grid Background="Gray" />
</Window>
I do get a window with top border only, but I cannot resize it.
Then I tried WindowChrome.ResizeGripDirection="Top" with ResizeMode="CanResizeWithGrip".
<Window ...
WindowStyle="None"
ResizeMode="CanResizeWithGrip"
AllowsTransparency="True"
WindowChrome.ResizeGripDirection="Top"
BorderThickness="0,5,0,0"
BorderBrush="Black">
...
</Window>
This does not work either (unable to resize from top border), and the grip does not even appear on top. It stays on the bottom-right corner (I can resize with the grip, though).
This answer seems like the answerer may initially have done this, but the code is unavailable.
This answer has a link to a blog post, I am not too eager to try it because I would like a solution without code behind.
And then there is this answer:
I get an error with this approach:
<Window ...
WindowStyle="None"
ResizeMode="CanResizeWithGrip"
AllowsTransparency="False">
<Grid Background="Gray" />
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CornerRadius="0"
GlassFrameThickness="1"
UseAeroCaptionButtons="False"/>
</Setter.Value>
</Setter>
</Window>
The property 'Content' is set more than once.
With code behind:
<Window ...
WindowStyle="None"
ResizeMode="CanResize"
AllowsTransparency="False">
<Grid Background="Gray" />
</Window>
In constructor:
WindowChrome chrome = new WindowChrome();
chrome.CornerRadius = new CornerRadius(0);
chrome.GlassFrameThickness = new Thickness(0, 1, 0, 0);
chrome.UseAeroCaptionButtons = false;
Which gives me:
And this could be resized from all directions. And I only want it to be able to resize from top. (Surprise: I did not even assign the new chrome object to anything. How did that work? That's another question I guess).
Question
How do I make a borderless window which can only be resized with the top border? (It's best if I can do this with only a top border whose color could be changed).
You may have success setting the WindowChrome.ResizeBorderThickness property to remove all borders except the top, e.g. ResizeBorderThickness="0, 5, 0, 0".
It may not be the cleanest way to achieve your result, but I've had some success adapting the answer here: http://www.eidias.com/blog/2014/1/27/restyle-your-window (it was the easiest way I found to get WindowChrome working):
Create a custom window style in a ResourceDictionary:
<ResourceDictionary x:Class="WpfApplication.WindowStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="30"
CornerRadius="4"
GlassFrameThickness="0"
ResizeBorderThickness="0, 5, 0, 0"
UseAeroCaptionButtons="False" />
</Setter.Value>
</Setter>
<Setter Property="Window.BorderThickness" Value="0, 5, 0, 0" /
</Style>
</ResourceDictionary>
Reference the dictionary where required (I put it in 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>
<ResourceDictionary Source="WindowStyle.xaml" />
</Application.Resources>
</Application>
Reference the Style in the required Window:
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
Style="{StaticResource ResourceKey=CustomWindowStyle}">
<Grid>
</Grid>
</Window>
That should produce a window that looks like your final one, but can only be resized from the top (only the top resize handle can be grabbed).
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'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
I recently created an UserControl for my WrapPanel to visualize some data.
I applied a Padding to it in order to get some space between each element.
The first version looked like this:
<UserControl x:Class="IFCS.EntityOverviewPanel"
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:l="clr-namespace:IFCS"
mc:Ignorable="d"
Padding="5, 5, 5, 5"
d:DesignHeight="300" d:DesignWidth="300">
<!-- Code -->
</UserControl>
Now I just applied a ControlTemplate to it which overrides my Padding setting.
The current version looks like this:
<UserControl x:Class="IFCS.EntityOverviewPanel"
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:l="clr-namespace:IFCS"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<!-- Code -->
</ControlTemplate>
</UserControl.Template>
</UserControl>
I would like to apply Padding to my UserControl again but everything I tried didn't work.
I tried to apply a Style using
<UserControl.Style>
<Style TargetType="{x:Type UserControl}">
<Setter Property="Padding" Value="5, 5, 5, 5"/>
</Style>
</UserControl.Style>
but this didn't work.
Setting the Padding in the "header" isn't working too.
Where do I have to set the Padding value in order to achieve the same result as in the first version?
<UserControl Padding="5,5,5,5">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<ContentPresenter Margin="{TemplateBinding Padding}" />
<!-- Code -->
</ControlTemplate>
</UserControl.Template>
<!-- Content -->
</UserControl>