CODEWITHSUNDEEP
uwpuwp-xaml
PremKumar Shanmugam
PremKumar Shanmugam

Reputation: 441

How to set Shadow for an UIElement in UWP?

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?

enter image description here

Upvotes: 1

Views: 846

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

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.

Upvotes: 1

Related Questions