Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (158).NET Core  (28).NET MAUI  (44)Angular  (65)ASP.NET  (50)ASP.NET Core  (77)ASP.NET MVC  (88)Azure  (32)Blazor  (141)DocIO  (23)Essential JS 2  (80)Essential Studio  (171)File Formats  (27)Flutter  (121)JavaScript  (172)Microsoft  (112)PDF  (66)React  (52)Succinctly series  (126)Syncfusion  (571)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (35)Webinar  (30)Windows Forms  (58)WinUI  (43)WPF  (134)Xamarin  (149)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (117)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (54)Development  (354)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (289)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (29)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (21)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (89)UI  (200)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (326)What's new  (193)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing the New WinUI Shadow Control

Introducing the New WinUI Shadow Control

We at Syncfusion are glad to announce the availability of the new WinUI Shadow control in our 2022 Volume 2 release. It is a content control that can apply shadow effects to framework elements to give them an appearance of depth. It also allows users to easily differentiate the overlapping elements and enjoy a beautiful and appealing user interface.

The key features of the WinUI Shadow control are as follows:

Let’s see them in brief!

Color

The WinUI Shadow control allows users to customize its color.Color Customization in WinUI Shadow Control

Offset

Change the position of the shadow relative to the position of the view.

Offset Position Customization in WinUI Shadow Control

Blur radius

You can adjust the blur level of the shadow like in the following image.

Customizing the Blur Radius in WinUI Shadow Control

Corner radius

Also, you can adjust the corner radius of the shadow based on the control’s corner radius.

Customizing the Corner Radius in WinUI Shadow Control

Shadows in different framework elements

You can apply shadows to shapes, paths, images, and any type of framework elements.

Image with Shadow
Image with Shadow
Star-Shaped Path with Shadow
Star-Shaped Path with Shadow

Getting started with WinUI Shadow control

We have explored the features of the WinUI Shadow control. Now, let’s see how to add it to your app and use it in a button control.

Step 1: Create a WinUI app.

First, create a simple project using the instructions provided in the Create app with Windows App SDK documentation.

Step 2: Add the Syncfusion.Core.WinUI NuGet package.

Then, install the latest Syncfusion.Core.WinUI NuGet package in your app from NuGet Gallery or from the installed location, C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages.

Note: xx.x.x.xx denotes the version of the installed Syncfusion WinUI Core package.

Step 3: Add the namespace.

Now, include the Syncfusion.UI.Xaml.Core namespace in your XAML file using the following code.

xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"

Step 4: Initialize the WinUI Shadow control.

Finally, initialize the WinUI Shadow control and add a button as content to it. Refer to the following code example.

<Page
  x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
  mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
  <Grid>
   <syncfusion:SfShadow>
     <Button Background="White" Height="50" Width="100" Content="Button"/>
   </syncfusion:SfShadow>
  </Grid>
 
</Page>

Executing the above code will create a button with a shadow effect like the following image.

Applying Shadow Effect to a Button

Note: For more details, refer to the Getting started with WinUI Shadow Control documentation

Conclusion

Thanks for reading! I hope you enjoyed learning about the new Syncfusion WinUI Shadow control and its features. This control is available in our 2022 Volume 2 release. Also, check out our Release Notes and What’s New pages to see all the available new updates in this release. Try them out and leave your feedback in the comments section below!

You can download and check out our demo app in the Microsoft Store.

For current customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.

You can also contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top