Customization in WinUI Shadow

13 Dec 20224 minutes to read

This section explains the customization features available in the WinUI Shadow control.

Applying Color for shadow

The shadow color can be customized using the Color property. The default value of the Color property is Black color with a 25% alpha value.

XAML

<syncfusion:SfShadow Color="Red">
   <Button Height="50" Width="100" Content="Button"/>
</syncfusion:SfShadow>

C#

SfShadow shadow = new SfShadow();
shadow.Color = Color.FromArgb(255, 255, 0, 0);
   
Button button = new Button(); 
button.Height = 50;
button.Width = 100;
button.Content = "Button";
shadow.Content = button;

Applying BlurRadius for shadow

The blur level of the shadow effect can be customized using the BlurRadius property. The default value of BlurRadius property is 8.

XAML

<syncfusion:SfShadow BlurRadius="10" OffsetX="10" OffsetY="10">
   <Button Height="50" Width="100" Content="Button"/>
</syncfusion:SfShadow>

C#

SfShadow shadow = new SfShadow();
shadow.BlurRadius = 10;
shadow.OffsetX = 10;
shadow.OffsetY = 10;

Button button = new Button();
button.Height = 50;
button.Width = 100;
button.Content = "Button";
shadow.Content = button;

Applying CornerRadius for shadow

The corner radius of the shadow can be customized using the ShadowCornerRadius property. The default value of ShadowCornerRadius property is 0.

XAML

<syncfusion:SfShadow ShadowCornerRadius="10" OffsetX="10" OffsetY="10">
   <Button Height="50" Width="100" Content="Button" CornerRadius="10"/>
</syncfusion:SfShadow>

C#

SfShadow shadow = new SfShadow();
shadow.ShadowCornerRadius = 10;
shadow.OffsetX = 10;
shadow.OffsetY = 10;
   
Button button = new Button(); 
button.Height = 50;
button.Width = 100;
button.Content = "Button";
button.CornerRadius = 10;
shadow.Content = button;

Positioning the shadow

The position of the shadow can be customized using the OffsetX and OffsetY properties. The default value of the OffsetX and OffsetY properties is 4.

XAML

<syncfusion:SfShadow OffsetX="10" OffsetY="10">
   <Button Height="50" Width="100" Content="Button"/>
</syncfusion:SfShadow>

C#

SfShadow shadow = new SfShadow();
shadow.OffsetX = 10;
shadow.OffsetY = 10;
   
Button button = new Button(); 
button.Height = 50;
button.Width = 100;
button.Content = "Button";
shadow.Content = button;

Enable or Disable the shadow

The Shadow control provides support to enable or disable the shadow effect by using the EnableShadow property. The default value of the EnableShadow property is true.

The below code snippet shows how to disable the shadow effect:

XAML

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <syncfusion:SfShadow EnableShadow="False">
     <Button Height="50" Width="100" Content="Button"/>
   </syncfusion:SfShadow>
</StackPanel>

C#

SfShadow shadow = new SfShadow();
shadow.EnableShadow = false;
   
Button button = new Button(); 
button.Height = 50;
button.Width = 100;
button.Content = "Button";
shadow.Content = button;