[Question]: How to create a rounded window?

[Mohammad Mostafa Dastjerdi]

here is what I'm doing:

	<fw:AcrylicWindow.Style>
		<Style TargetType="fw:AcrylicWindow" BasedOn="{StaticResource AcrylicWindowStyle}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type fw:AcrylicWindow}">
						<Border x:Name="windowBorder"
						        BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Window}}}"
						        BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Window}}}"
						        Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type Window}}}"
						        CornerRadius="20">
							<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
							                  ContentStringFormat="{TemplateBinding ContentStringFormat}" />
						</Border>
						<ControlTemplate.Triggers>
							<DataTrigger Binding="{Binding IsActive, RelativeSource={RelativeSource Self}}" Value="False">
								<Setter Property="BorderBrush" TargetName="windowBorder" Value="Gray" />
							</DataTrigger>
							<DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource Self}}" Value="Maximized" />
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</fw:AcrylicWindow.Style>

But I cannot make its corners round.

How would I achieve that?

[Artur Tkachenko]

<Window ...>

<Window.Clip>
    <RectangleGeometry Rect="0,0,1080,600" RadiusX="10" RadiusY="10"/>
</Window.Clip>

[Mohammad Mostafa Dastjerdi]

• the outer layout of window is not rounded
• just one edge is rounded

[Artur Tkachenko]

I know only this way.. If you find a more correct solution, I will be glad to see it

[Artur Tkachenko]

• just one edge is rounded

About one edge - you can set window size in this line: Rect="0,0,1080,600"

[Mohammad Mostafa Dastjerdi]

I know only this way.. If you find a more correct solution, I will be glad to see it

The way I had done also behaved like this.

[Artur Tkachenko]

It's strange, developers not check issues and not answer here, but he fixed windows and now simple fw:AcryllicWindow or Window fw:AcrylicWindow.Enabled="True" works with rounded corners now in windows 11.
Builded in Windows 11 (Latest Preview), Visual Studio 2022 (Preview), .NET6 (Preview) and FluentWPF 0.10.0 (Preview).
(Maybe works and on .net <6, vs <2022)

Thanks silent developers <3 I think issue can be closed now.

[TMS]

I actually needed the same, and it seems that dev's last answer is sufficient, since setting the correct clipping size made my window's all corners rounded in win10.

[Sterak]

I didn't understand very well, I'm very new to this, can someone explain to me how to get all the corners rounded? mine was only 1, this difficulty of mine is also related because my English is not very good.

[minami_SC]

Sorry for responding so late.

FluentWPF uses undocumented Win32API(SetWindowCompositionAttribute method).
That method applies acrylic effect to whole window region. Currently there is no way to clip acrylic effect for rounded corner.

BTW, I'm checking the window behavior with FluentWPF in Windows11 environment. In Windows11 environment, the corner of window is automatically clipped roundly.

[Selastin]

@sourcechord it will be possible to create rounded corners if you use Windows.UI.Composition with WPF,and you can do much more than ordinary acrylic, you can animate the acrylic brush and also the flickering on resize will be removed too. Here is a sample demo that i created, i am working to create something similar to this library. This demo doesn't have rounded corners but it can be made.

net5.0-windows10.0.19041.0.zip

Although this acrylic looks good still i cant figure out a way to match the clipping of acrylic visual with window during maximize/restore/minimize animations. currently double clicking title bar area will use fade animation on acrylic while maximizing/restoring, to make this much it needed a lot of code. since .NET5 already have some WinRT stuff it made 50% easy.

Try resizing the window, you can see the change in flickering issue