Light bars in the Card at the corners when using UniformCornerRadius

[MEDUZAprogrammer]

Bug explanation

I have a window style called WindowStyle, after upgrading from 4.9.0 by 5.1.0 light bars appeared in the corners with the parameter UniformCornerRadius= "10", which is very annoying for users of my application, since at 4.9.0 there was no such problem, these stripes are not visible on a white background. Removed \ < ContentPresenter Content="{TemplateBinding Content}"/>, the problem remained.

Changed the layout in the tree, removed most of the properties in the style and elements, BorderThickness = 0, BorderBrush = Transparent, didn't help. How do I get rid of these light bars?

<Style TargetType="{x:Type Window}" x:Key="WindowStyle">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="AllowsTransparency" Value="True"/>
    <Setter Property="WindowStyle" Value="None"/>
    <Setter Property="ResizeMode" Value="CanResize"/>
    <Setter Property="ShowInTaskbar" Value="True"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="WindowChrome.WindowChrome">
        <Setter.Value>
            <WindowChrome NonClientFrameEdges="None" CornerRadius="0" 
                  ResizeBorderThickness="7" CaptionHeight="20"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Window}">
                <Border x:Name="Border" Background="{TemplateBinding Background}" Padding="4" BorderThickness="0">
                    <Grid Background="{TemplateBinding Background}">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <materialDesign:Card x:Name="CardBorder" Style="{StaticResource MaterialDesignElevatedCard}" Grid.Row="0" Margin="{TemplateBinding Padding}" UniformCornerRadius="10" UseLayoutRounding="True" 
                                             materialDesign:ElevationAssist.Elevation="Dp2" >

                            <AdornerDecorator Grid.Row="0">
                                <materialDesign:DialogHost DialogMargin="8" IsOpen="{Binding IsLoading, UpdateSourceTrigger=PropertyChanged}" DialogContentUniformCornerRadius="20" CornerRadius="10"
                                                            Style="{StaticResource MaterialDesignEmbeddedDialogHost}" UseLayoutRounding="True" 
                                                            DialogContent="{Binding LoadingDialogContent, UpdateSourceTrigger=PropertyChanged}" IsRestoreFocusDisabled="True">
                                        <Grid>

                                            <Grid.Resources>
                                                <ResourceDictionary>
                                                    <ResourceDictionary.MergedDictionaries>
                                                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Snackbar.xaml" />
                                                    </ResourceDictionary.MergedDictionaries>
                                                </ResourceDictionary>
                                            </Grid.Resources>

                                            <ContentPresenter Content="{TemplateBinding Content}"/>

                                            <materialDesign:Snackbar IsActive="{Binding SnackIsActive}" MessageQueue="{Binding SnackMessageQueue}" Margin="2" ActionButtonStyle="{StaticResource MaterialDesignSnackbarActionLightButton}"/>

                                        </Grid>
                                </materialDesign:DialogHost>
                            </AdornerDecorator>

                        </materialDesign:Card>

                        <ResizeGrip x:Name="WindowResizeGrip" Grid.Row="1"
                                HorizontalAlignment="Right" VerticalAlignment="Bottom"
                                Visibility="Collapsed" IsTabStop="False" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="WindowState" Value="Maximized">
                        <Setter TargetName="Border" Property="Padding" Value="0"/>
                        <Setter TargetName="CardBorder" Property="UniformCornerRadius" Value="0"/>
                        <Setter Property="WindowChrome.WindowChrome">
                            <Setter.Value>
                                <WindowChrome NonClientFrameEdges="None" CornerRadius="15" ResizeBorderThickness="7" CaptionHeight="20"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Padding" Value="0 4 4 0"/>
                    </Trigger>
                    <Trigger Property="ResizeMode" Value="CanResizeWithGrip">
                        <Setter TargetName="WindowResizeGrip" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Version

5.1.0

[corvinsz]

@MEDUZAprogrammer is the XAML you provided above reproducing the bug you are describing? I'm asking because I'm unable to reproduce your problem. This is what the window looks like for me with the above style you posted (the red background is there to make the edges stand out, it's not part of the actual window/app):

Is it possible you provide more details or possibly a repo that showcases this bug?

[MEDUZAprogrammer]

Yes, the XAML code reproduces the error. Check if there is a Grid inside the Card, assign it a Background, for example Black, and the problem appears. The Card background property is set to the default value of the style Style="{StaticResource MaterialDesignElevatedCard}".

Assigned Card Background = "Transparent", the light bars disappeared, but then the shadow is not visible materialDesign:ElevationAssist.Elevation="Dp2". Assigned Card Background = "Red",

I assume that it is the Background of Card that is visible.

If you set 4.9.0, then there are no stripes, without setting Background = "Transparent" in Card.

[MEDUZAprogrammer]

<UserControl x:Class="App.Forms.MainMenu.Menu"
             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:App.Forms.MainMenu" 
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    (Code)
</UserControl>

1) Code:

    <Grid>
        <materialDesign:Card Margin="25" UniformCornerRadius="0" Padding="0" BorderThickness="0" >
            <Grid Background="Black" Margin="0"/>
        </materialDesign:Card>
    </Grid>

2) Code;

<Grid>
    <materialDesign:Card Margin="25" UniformCornerRadius="30" Padding="0" BorderThickness="0" >
        <Grid Background="Black" Margin="0"/>
    </materialDesign:Card>
</Grid>

3) Code:

<Grid>
    <materialDesign:Card Margin="25" UniformCornerRadius="30" Padding="0" BorderThickness="0" BorderBrush="Transparent" Style="{StaticResource MaterialDesignOutlinedCard}">
        <Grid Background="Black" Margin="0"/>
    </materialDesign:Card>
</Grid>

4) Code:

    <Grid >
        <materialDesign:Card Margin="25" Background="Black" UniformCornerRadius="30" Padding="0" materialDesign:ElevationAssist.Elevation="Dp12">
            <Grid Margin="0"/>
        </materialDesign:Card>
    </Grid>

[corvinsz]

I still can't reproduce this bug. Neither on the 5.1.0 release nor the pre-release. With the code you provided above:

<Grid>
    <materialDesign:Card Margin="25" UniformCornerRadius="30" Padding="0" BorderThickness="0" >
        <Grid Background="Black" Margin="0"/>
    </materialDesign:Card>
</Grid>

I get the following result:

There is also another issue (#3651) with the Card type I am unable to reproduce. It almost feels like the Card is behaving different depending on the machine you are on.

@MEDUZAprogrammer to make sure we don't misunderstand each other, I uploaded a repo of the example app I created: https://github.com/corvinsz/MDIX3687_LightCornersInCard

Could you download the repo, launch the app and verify that you are still seeing the initial bug you reported?

[nicolaihenriksen]

@corvinsz I am able to reproduce some of what @MEDUZAprogrammer is hinting at with your sample repo. If I set the outer-most Grid in the MainWindow to have a Red background (just for contrast) and then I force the theme into light mode, then I get the following result where you can see some white along the edges. Not sure if this is the exact issue you're chasing.

It should be noted that I am (at the moment) on 4K monitors applying 150% DPI scaling which also has the potential to play a role in something like this (layout rounding etc.). I will try it at my other desk tomorrow where I am not running DPI scaling.

[corvinsz]

I'm now able to reproduce it thanks to @nicolaihenriksen The white border is only visible when the app's theme is set to Light mode. Using a higher DPI scaling amplifies the effect (at least on my 1080p monitor).

Edit: I noticed setting the BorderThickness of the Border in the AdornerDecorator (here) to something like 10 fixes it.

With default BorderThickness (0,0,0,0):

With non-default BorderThickness:

[MEDUZAprogrammer]

Could you download the repo, launch the app and verify that you are still seeing the initial bug you reported?

In your example, when the background color changes, stripes appear:

<Grid Background="Gray">
    <Grid>
        <materialDesign:Card Margin="25"
                             Padding="0"
                             BorderThickness="0"
                             UniformCornerRadius="30" materialDesign:ElevationAssist.Elevation="Dp0">
            <Grid Margin="0" Background="Gray" />
        </materialDesign:Card>
    </Grid>
</Grid>

Also, if your code is left unchanged, then when switching from App.xaml on BaseTheme= "Light" bars appear. (Thanks to @nicolaihenriksen)

_____

My App.xaml:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />

    <materialDesign:BundledTheme BaseTheme="Light"
                         ColorAdjustment="{materialDesign:ColorAdjustment}"
                         PrimaryColor="Indigo"
                         SecondaryColor="DeepPurple" />

</ResourceDictionary.MergedDictionaries>

Checked on my project, changed BaseTheme= "Dark", the stripes are visible:

How do I get rid of this in my project?

[nicolaihenriksen]

@corvinsz @MEDUZAprogrammer I can add that I have tested the sample provided by @corvinsz on my setup without DPI scaling (i.e. same code as the other day). The issue is still present, but much less visible, so I think DPI scaling and layout rounding definitely plays a part here.

[corvinsz]

@nicolaihenriksen @MEDUZAprogrammer this is very weird. With the sample I provided I can't reproduce this bug without DPI scaling:

Even with the Windows 11 screen magnifier zoomed in at 600% there is no white border/corner showing for me.

[MEDUZAprogrammer]

Changing the scale does not affect the bars in any way - all of them are visible!

@nicolaihenriksen I use monitors 3440x1440 and 1920x1080 (scale is 100% everywhere), on users ' computers, mostly 1920x1080 and more (I won't say about the scale) on different monitors you can see stripes - they are the same.

@corvinsz I think the white or black color of the stripes in the corners is poorly visible on a red background, my application has a light theme and most users have a dark desktop background, which immediately catches the eye. If the theme is black, then you can do Background= "Gray" for all Grids (outside and inside the Card), and if the theme is light, then Background= "Black", to make it visible.

UPD: It is mainly used by Windows 10 and Windows 7. I have Windows 10.