Skip to content

Various changes for cards and shadows #2765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 6 commits into from
Jul 8, 2022
Merged

Various changes for cards and shadows #2765

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e1ee65
Various changes for cards and shadows
ElieTaillard Jul 6, 2022
6855ad5
add new depth lvl and mark old ones obselete
ElieTaillard Jul 8, 2022
e798c89
change default shadow depth on cards
ElieTaillard Jul 8, 2022
5cda8e4
adjust shadows
ElieTaillard Jul 8, 2022
79bdaf8
remove [Obselete] to fix the pipeline
ElieTaillard Jul 8, 2022
b351e01
add obselete attribute
ElieTaillard Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Various changes for cards and shadows
  • Loading branch information
@ElieTaillard
ElieTaillard committed Jul 6, 2022
commit 2e1ee65c42da4f20e44ef4fe2cf32637e31c78e0
101 changes: 88 additions & 13 deletions MainDemo.Wpf/Shadows.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,20 +55,41 @@
materialDesign:ShadowAssist.ShadowDepth="Depth5"
Content="DEPTH 5"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="shadow_6" Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth6"
Content="DEPTH 6"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="shadow_7" Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth7"
Content="DEPTH 7"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="shadow_8" Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth8"
Content="DEPTH 8"/>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel
Orientation="Horizontal"
Margin="0 32 0 0">
<smtx:XamlDisplay UniqueKey="shadow_6">
<smtx:XamlDisplay UniqueKey="shadow_9">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Content="1"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_7"
UniqueKey="shadow_10"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
Expand All @@ -77,7 +98,7 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_8"
UniqueKey="shadow_11"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
Expand All @@ -86,7 +107,7 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_9"
UniqueKey="shadow_12"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
Expand All @@ -95,27 +116,54 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_10"
UniqueKey="shadow_13"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth5"
Content="5"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_14"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth6"
Content="6"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_15"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth7"
Content="7"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_16"
Margin="16 0 0 0">
<Button
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
materialDesign:ShadowAssist.ShadowDepth="Depth8"
Content="8"/>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel
Orientation="Horizontal"
Margin="0 32 0 0">
<smtx:XamlDisplay UniqueKey="shadow_11">
<smtx:XamlDisplay UniqueKey="shadow_17">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth1"
Padding="32"
Content="DEPTH 1"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_12"
UniqueKey="shadow_18"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth2"
Expand All @@ -124,7 +172,7 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_13"
UniqueKey="shadow_19"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth3"
Expand All @@ -133,7 +181,7 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_14"
UniqueKey="shadow_20"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth4"
Expand All @@ -142,19 +190,46 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_15"
UniqueKey="shadow_21"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth5"
Padding="32"
Content="DEPTH 5"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_22"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth6"
Padding="32"
Content="DEPTH 6"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_23"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth7"
Padding="32"
Content="DEPTH 7"/>
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_24"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth8"
Padding="32"
Content="DEPTH 8"/>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel
Orientation="Horizontal"
Margin="0 32 0 0">
<smtx:XamlDisplay UniqueKey="shadow_16">
<smtx:XamlDisplay UniqueKey="shadow_26">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth3"
materialDesign:ShadowAssist.ShadowEdges="Bottom,Right"
Expand All @@ -163,7 +238,7 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_17"
UniqueKey="shadow_27"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth3"
Expand All @@ -173,7 +248,7 @@
</smtx:XamlDisplay>

<smtx:XamlDisplay
UniqueKey="shadow_18"
UniqueKey="shadow_28"
Margin="16 0 0 0">
<materialDesign:Card
materialDesign:ShadowAssist.ShadowDepth="Depth3"
Expand Down
2 changes: 1 addition & 1 deletion MaterialDesignThemes.Wpf/Card.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ namespace MaterialDesignThemes.Wpf
public class Card : ContentControl
{
private Border? _clipBorder;
private const double DefaultUniformCornerRadius = 2.0;
private const double DefaultUniformCornerRadius = 4.0;
public const string ClipBorderPartName = "PART_ClipBorder";

#region DependencyProperty : UniformCornerRadiusProperty
Expand Down
3 changes: 3 additions & 0 deletions MaterialDesignThemes.Wpf/Converters/ShadowInfo.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ static ShadowInfo()
{ ShadowDepth.Depth3, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth3"] },
{ ShadowDepth.Depth4, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth4"] },
{ ShadowDepth.Depth5, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth5"] },
{ ShadowDepth.Depth6, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth6"] },
{ ShadowDepth.Depth7, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth7"] },
{ ShadowDepth.Depth8, (DropShadowEffect)resourceDictionary["MaterialDesignShadowDepth8"] },
};
}

Expand Down
5 changes: 4 additions & 1 deletion MaterialDesignThemes.Wpf/ShadowAssist.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ public enum ShadowDepth
Depth2,
Depth3,
Depth4,
Depth5
Depth5,
Depth6,
Depth7,
Depth8
}

[Flags]
Expand Down
2 changes: 1 addition & 1 deletion MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<Style x:Key="MaterialDesignElevatedCard" TargetType="{x:Type wpf:Card}">
<Setter Property="Background" Value="{DynamicResource MaterialDesignCardBackground}" />
<Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth2" />
<Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth1" />
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
Expand Down
17 changes: 10 additions & 7 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Shadows.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@

<!-- thanks: http://marcangers.com/material-design-shadows-in-wpf/ -->

<Color x:Key="MaterialDesignShadow">#AA000000</Color>
<Color x:Key="MaterialDesignShadow">#000000</Color>
<SolidColorBrush x:Key="MaterialDesignShadowBrush" Color="{StaticResource MaterialDesignShadow}"/>

<DropShadowEffect x:Key="MaterialDesignShadowDepth1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth2" BlurRadius="8" ShadowDepth="1.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth3" BlurRadius="14" ShadowDepth="4.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth5" BlurRadius="35" ShadowDepth="13" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />

<DropShadowEffect x:Key="MaterialDesignShadowDepth1" BlurRadius="2" ShadowDepth="1" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True"/>
<DropShadowEffect x:Key="MaterialDesignShadowDepth2" BlurRadius="4" ShadowDepth="1.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth3" BlurRadius="6" ShadowDepth="2" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth4" BlurRadius="8" ShadowDepth="2.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth5" BlurRadius="10" ShadowDepth="3" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth6" BlurRadius="12" ShadowDepth="3.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth7" BlurRadius="14" ShadowDepth="4" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
<DropShadowEffect x:Key="MaterialDesignShadowDepth8" BlurRadius="16" ShadowDepth="4.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".42" RenderingBias="Performance" po:Freeze="True" />
Copy link
Member

@Keboo Keboo Jul 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

@ElieTaillard ElieTaillard Jul 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


</ResourceDictionary>