How to set Shadow for an UIElement in UWP?

Question

How to set exact .css styles like spread,blur,inset,etc.. in UWP using DropShadow?

My .css style :

div#myDIV {
 background-color:yellow;
 width:200px;
 height:100px;
 box-shadow:20px 20px 20px 10px red; }

And

div#myDIV {
 background-color:yellow;
 width:200px;
 height:100px;
 box-shadow:20px 20px 50px 10px pink inset;}

If there is any other way other than DropShadow,suggest me!!

Update :

I tried to use DropShadowPanel,like this

XAML:

<Grid  x:Name="MainGrid" Margin="100,100 0 0"> </Grid>

C# :

  Rectangle host = new Rectangle { Width = 200, Height = 200, Fill = new SolidColorBrush(Colors.White) };
  DropShadowPanel dropShadowPanel = new DropShadowPanel { };
  dropShadowPanel.Color = Color.FromArgb(255, 0, 0, 0);
  dropShadowPanel.ShadowOpacity = 0.13;
  dropShadowPanel.OffsetX = 0;
  dropShadowPanel.OffsetY = 0.8;
  dropShadowPanel.BlurRadius = 1.8;
  dropShadowPanel.IsMasked = true;
  dropShadowPanel.Content = host;
  MainGrid.Children.Add(dropShadowPanel);

And the output was :

I Don't know what's happening here.I tried apply shadow for the rectangle,but here the whole content filled with shaodw color.What is the problem here?

score 1 · Accepted Answer · answered Jul 09 '21 at 02:37

1

How to set exact .css styles like spread,blur,inset,etc.. in UWP using DropShadow?

For making drop shadow, you could use DropShadowPanel to approach within xaml.

Here is sample code

<controls:DropShadowPanel BlurRadius="8"
                                  ShadowOpacity="1"
                                  OffsetX="2"
                                  OffsetY="2"
                                  Color="Black"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"
                                  IsMasked="True">
          <TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget sem luctus, gravida diam cursus, rutrum ipsum. Pellentesque semper magna nec sapien ornare tincidunt. Sed pellentesque, turpis quis laoreet pellentesque, urna sapien efficitur nulla, at interdum dolor sapien ut odio. Sed ullamcorper sapien velit, id finibus risus gravida vitae. Morbi ac ultrices lectus. Aenean felis justo, aliquet a risus ut, condimentum malesuada metus. Duis vehicula pharetra dolor vel finibus. Nunc auctor tortor nunc, in varius velit lobortis vel. Duis viverra, ante id mollis mattis, sem mauris ullamcorper dolor, sed rhoncus est erat eget ligula. Aliquam rutrum velit et felis sollicitudin, eget dapibus dui accumsan."/>
        </controls:DropShadowPanel>

And this is document that you could refer. And you could also use UWP ThemeShadow to implement control's shadow. For more please refer this document , And please note ThemeShadow was introduced in Windows 10 version 1903, you need set the app's min version as 1903.

answered Jul 09 '21 at 02:37

Nico Zhu

32,367
2
15
36

What about spread and inset(shadow inside an element) property in .css? And How DropShadowPanel is different from DropShadow ? – PremKumar Shanmugam Jul 09 '21 at 02:56
DropShadowPanel does not contain spread and inset property. And `DropShadow` is Composition api, you could also use it to implement shadow in the code behind. and `DropShadowPanel` was implemented base on [DropShadow](https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/rel/7.0.0/Microsoft.Toolkit.Uwp.UI.Controls.Core/DropShadowPanel/DropShadowPanel.cs#L43) – Nico Zhu Jul 09 '21 at 03:14
Then,how to apply shadow inside the border(element) like inset in css? – PremKumar Shanmugam Jul 09 '21 at 08:22
this case reply may [help](https://stackoverflow.com/a/45395336/7254781). – Nico Zhu Jul 09 '21 at 08:52
1

I tried it in C#. But, there is an issue with it . I have update the question. Kindly look into it!! – PremKumar Shanmugam Jul 12 '21 at 04:39
Please set dropShadowPanel `dropShadowPanel.VerticalAlignment = VerticalAlignment.Center; dropShadowPanel.HorizontalAlignment = HorizontalAlignment.Center;` – Nico Zhu Jul 12 '21 at 06:14
1

Yaeh. It's working. But what happening here? – PremKumar Shanmugam Jul 12 '21 at 06:27
1

If you have set host with other color, you could find the shadow and host are not in the same position. – Nico Zhu Jul 12 '21 at 06:29
@PremKumarShanmugam, Do you have any updates for this thread? – Nico Zhu Jul 12 '21 at 07:18
1

No. Thanks a lot. If I got issues in future. I will ask!!1 – PremKumar Shanmugam Jul 12 '21 at 07:40

How to set Shadow for an UIElement in UWP?

1 Answers1