Various changes for cards and shadows

[ElieTaillard]

Changes

• Changed the default UniformCornerRadius of the Cards: 4px
• Changed the default ShadowDepth of the Cards: Depth1
• Changed the DropShadowEffect on Shadows (changed the BlurRadius and ShadowDepth for each depth level)
• Added 3 depth levels (total of 9)

Consequences:

• Shadow on cards is different by default
• Shadow on elevated buttons is different by default
• The depth levels are totally different

I tried to match the specs as much as possible.
Please tell me if you like the changes.
I can adjust the shadow opacity if necessary.

Specs

Results

Examples with the same Background as the specs:

[ElieTaillard]

I'm not 100% sure about the depth1 shadow. Tell me what do you think.

[Keboo]

Adding link to spec document: https://material.io/design/environment/elevation.html

[Keboo]

I am wondering if these should actually be larger. Looking at the default depths on the spec it looks like the elevation differences at the higher levels slowing increase the dp (radius and depth here) as you get to the higher elevations.

Thoughts?

[ElieTaillard]

Thank you for your feedback @Keboo. Yes I agree with you. I had looked at the shadows only for the cards and it says it goes from 1dp to 8dp. That's why I had made 8 levels. But actually, there are more than 8 levels.
Finally, I think I'm going to keep the Depth0 to Depth5 levels and add some new levels. I think I'll name them DP1, DP2, DP3 etc. I think it's more meaningful.

[ElieTaillard]

Finally, I decided to create new shadow levels and keep the old ones. The old ones can still be used but I think they should be considered as obselete. The obselete attribute makes the pipeline fail so I removed it from the code. I just put obselete regions for now.
In the code, I used the term dp. I know it's not really dp but at least it's in line with the specs. So if in the specs it says to use a 3dp elevation, you know right away which one to use.
I also adjusted the shadow effects so that the elevation is more visible especially for 1dp.

Here is the final result:

If we want to stay consistent with the new shadow system we will have to change the ShadowDepth on each components of the library.
For the changes, here's what Google recommends:

Component	Default elevation values (dp)
Dialog	24
Modal bottom sheet Modal side sheet	16
Navigation drawer	16
Floating action button (FAB - pressed)	12
Standard bottom sheet Standard side sheet	8
Bottom navigation bar	8
Bottom app bar	8
Menus and sub menus	8
Card (when picked up)	8
Contained button (pressed state)	8
Floating action button (FAB - resting elevation) Snackbar	6
Top app bar (scrolled state)	4
Top app bar (resting elevation)	0 or 4
Refresh indicator Search bar (scrolled state)	3
Contained button (resting elevation)	2
Search bar (resting elevation)	1
Card (resting elevation)	1
Switch	1
Text button	0
Standard side sheet	0

So if we decide to adopt this new system, we will have to change for example the property wpf:ShadowAssist.ShadowDepth on the Contained buttons and apply the value Depth_2dp

[Keboo]

I think actually putting the Obsolete attribute on these is a good idea. What are your thoughts on these suggested update values (since there are no exact equivalents)?

[Obsolete("Use Depth_0dp instead")]
Depth0,
[Obsolete("Considersing Depth_2dp instead")]
Depth1,
[Obsolete("Considersing Depth_3dp instead")]
Depth2,
[Obsolete("Considersing Depth_7dp instead")]
Depth3,
[Obsolete("Considersing Depth_12dp instead")]
Depth4,
[Obsolete("Considersing Depth_24dp instead")]
Depth5,

[ElieTaillard]

That sounds good to me

[Keboo]

To fix the pipeline failing on warnings. We can simply suppress these. This will ensure that people properly update their enum values before removing them in 5.x.

Suggested change

	#region ObseleteDepth
	{ ShadowDepth.Depth0, null },
	{ ShadowDepth.Depth1, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth1"] },
	{ ShadowDepth.Depth2, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth2"] },
	{ ShadowDepth.Depth3, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth3"] },
	{ ShadowDepth.Depth4, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth4"] },
	{ ShadowDepth.Depth5, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth5"] },
	#endregion
	#region ObseleteDepth
	#pragma warning disable CS0618 // Type or member is obsolete
	{ ShadowDepth.Depth0, null },
	{ ShadowDepth.Depth1, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth1"] },
	{ ShadowDepth.Depth2, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth2"] },
	{ ShadowDepth.Depth3, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth3"] },
	{ ShadowDepth.Depth4, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth4"] },
	{ ShadowDepth.Depth5, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth5"] },
	#pragma warning restore CS0618 // Type or member is obsolete

[ElieTaillard]

Perfect, thank you, I'll do that

[Norc89]

@Xaalek @Keboo @henon @sebastiandymel
Can someone please tell me how to change shadow color,... Designer prepare black background and i don't find a way how to set this.

[Keboo]

@Norc89 at present there is not a way to change the color. However, this library is just using the WPF DropShadowEffect so you can simply look at the existing ones and create your own in your app to achieve whatever color you want.