Weird visual artifacts in Demo. (Navigation Rail)

[M0n7y5]

Hi, i found weird visual artifacts in Demo app, section Navigation Rail. You can see whats happening on gif bellow:

[Keboo]

Thanks for reporting this. This was a known bug at time of release. It is actually related to the ripple control, not the Navigation Rail. Since this was a pre-existing problem and not caused by the navigation rail, I elected to release it as is, and plan to circle back on this one.

[stigrune]

Looks like its the AdornerDecorator for the ShadowEdge in the CardTemplate that causes the issue. It happens only when the TabControl has a ShadowDepth set. Maybe this information can help someone else continue debugging.

[HClausing]

By the moment, It's better to work with materialDesign:ShadowAssist.ShadowDepth="Depth0" on TabControl instance.

[jairbubbles]

We have the same issue in our application.

More over it looks similiar to the blurry text menu issue we've been experiencing too. Maybe we can try a similar hack? https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/pull/2053/files

[jairbubbles]

@stigrune Indeed the ArdornerDecorator was provoking the issue, I'm not sure why it's needed there I kept the border with the edge and it still looks good.

[emanuelhristea]

So is there any workaround for this issue? I am facing it without setting any shadow assist depth. It happens on all cards and group Boxes. Do I have to override the style for all of them?

[rickpmartin]

We noticed the same issue in our application, as well as some other visual artifacts like borders showing up after mouse over effects, presumably all caused by the adorner layer. We ended up shipping using version 2.4.0.1044 of the package as it does not have this issue (this was a while ago, and I think the issue was caused shortly after that version). We're looking into upgrading now and want to get to the bottom of this, so if I find more information I'll circle back here.

[rickpmartin]

I should mention all the issues I just described only happen to controls on a Card with a shadow applied, so almost certainly related to the AdornerDecorator mentioned above.

[rickpmartin]

After more investigation we were able to find a work around for the additional borders showing up after mouse over effects, I don't know if this will help with the original issue posted as we aren't seeing that. It might be worth a try though. The fix was to add a Grid wrapper as a direct descendant of the Card with the same background set:

<!-- Styles -->
<Style TargetType="material:Card">
    <Setter Property="Background" Value="White" />
</Style>

<Style x:Key="CardContent" TargetType="Panel">
    <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=material:Card}}" />
</Style>

<!-- Usage -->
<material:Card>
    <Grid Style="{StaticResource CardContent}">
        ...
    </Grid>
</material:Card>

[Keboo]

@rickpmartin thank you that is very helpful information.

[Erapchu]

@Keboo Hello! I did some work on the problem. So, issue is because videocard draw shadow under rendered circle. When circle is rendering while animate (click on control), it grows sideways, then collapse to invisible dot and videocard can't handle this behavior. We can see how after click animation looks fine, but after that (after ~0.5 second) it leaves a trail, like something collapse to origin when we click. Probably, this can help to resolve problem (ripple style):

ripple_visualstates.txt

(UIElement.RenderTransform).(ScaleTransform.ScaleX) - this "say" to videocard that we are using it's power to draw elements, work with rendering not by CPU, but videocard only. So, check on your side please, related issue should be vanished. But, there a fly in the ointment - try press left mouse button and hold on element to prolong animation. There're will be artifacts too, but not so a lot. As a result, need to do some experiment to resolve it.

[riquich]

I had the same artifacts on an extreme level in my stackpanel located in dialoghost DialogContent. Tried layout rounding, software rendering to no avail but setting ShadowAssist.ShadowDepth to "Depth0" definitely cleared the issue. Thanks

[gitjsdr26]

I've the same problem with DialogHost, it seems to be likely #2341. I confirm that setting property materialDesign:ShadowAssist.ShadowDepth="Depth0" in materialDesign:DialogHost solve the issue. Thanks to @riquich