About the author

Alberto Venditti is an Italian passionate professional with more than twenty-five years of experience on technical training and consulting, designing and developing IT solutions in the area of the big landscape of Microsoft technologies, with special focus on .NET, Azure and SQL Server [1] .

As a Microsoft Certified Trainer, he taught dozens of classes for developers about various programming languages.

In 2009 he deepened his study and interest in Microsoft Silverlight, and this was the seed for his current affection for OpenSilver, a modern technology that he loves and would like to make known to the developers’ community, in a simple and clear way, through this book.

Introduction

OpenSilver is a framework for building rich, browser-hosted applications that run on a variety of operating systems and devices, ranging from standard PCs to tablets and smartphones. It is the successor of Silverlight, a platform introduced by Microsoft in 2007 for developing and deploying rich internet applications (RIAs). In 2012 Silverlight started to decline and became unsupported in most browsers in 2017, with an announced end of support by Microsoft from October 2021. Reasons of the death of Silverlight are multiple, but the main one stood in the fact it was based on a browser plug-in technology, that HTML5 and JavaScript in some way overtook.

Developing with Silverlight had lots of benefits, such as the ability to expose a development ecosystem richer than the traditional blend of HTML, CSS and JavaScript, that powered ordinary web pages at that time. Avoiding HTML, CSS and JavaScript, with Silverlight the programmer was able to create applications with interactive graphics, vector animations, embedded videos, and so on, just designing the UI with XAML and programming the logic with code written in C# (or other .NET languages), in a way similar to programming in Microsoft WPF (Windows Presentation Foundation), but targeting browsers and not desktop applications. Moreover, the Silverlight plug-in guaranteed a seamless cross-browser compatibility and a pixel-perfect rendering; the rich collection of controls and visual containers available made easy the development of responsive UIs, without the need of adopting and integrating complicated CSS frameworks. A Silverlight application was similar to a single page web application (that means: no GET and POST HTTP requests between different web pages and no visual content reloaded on each round-trip to the web server), hosting most of the logic on the client (that is: at the browser level) and just exchanging data with the server, as it happens in a client-server application.

Fortunately, all those wonderful features are not gone with the Silverlight death, because they survive in OpenSilver (born in 2021): it can be defined as a free, open-source UI framework for building modern .NET web applications in C# and XAML. OpenSilver doesn’t make use of browser plug-in technology anymore, but it leverages the WebAssembly runtime technology, ensuring broad compatibility across modern web browsers, regardless of the operating system. OpenSilver offers a good code compatibility with Silverlight, enabling developers to migrate existing Silverlight applications without entirely rewriting their codebase: the operation is not super-easy, but is feasible while preserving the investment done at the time of Silverlight. Companies like Userware offer professional support in these scenarios.

To have an idea of what can be developed by using OpenSilver, you can visit this page from the official website:

https://opensilver.net/gallery

Reading this book

This book is an introductory journey on OpenSilver planet. It doesn’t claim to be complete or exhaustive. Its goal is to let you understand the basic concepts of OpenSilver and become able to develop your OpenSilver applications knowing the foundations of this technology and avoiding errors typical of the beginners.

The various sections of the book are designed to be read in sequence, to train you step by step from simple to complex topics; but, of course, you are free to skip sections about subjects you’re familiar with.

In order to make your reading experience proficient, what you need is:

· good knowledge of C# language, including object-oriented programming, event-driven programming, lambda expressions and asynchronous programming;

· basic knowledge of XAML (an experience in WPF would be great);

· proficiency in the use of Visual Studio or Visual Studio Code;

· basic knowledge of HTML and CSS;

· good understanding of the traditional web application development paradigm based on HTTP;

· experience on database design and management (the reference will be Microsoft SQL Server);

· experience on developing basic web APIs and web services.

Concepts like client-server round-trip, serialization (in XML or JSON), caching, session, cookies, sandbox and API are taken for granted.

Table of content

About the author.............................................................. 6

Introduction..................................................................... 6

Reading this book............................................................. 7

OpenSilver versions......................................................... 8

Sample code..................................................................... 9

Hello OpenSilver............................................................. 9

About the OpenSilver Application class........................... 15

About XAML in OpenSilver............................................ 17

Simple and complex properties......................................... 17

Attached properties.......................................................... 19

Experimenting with XAML.............................................. 19

Layout elements............................................................... 20

The StackPanel................................................................ 22

The WrapPanel................................................................ 25

The Grid.......................................................................... 26

Nesting layout containers................................................. 29

Spanning rows and columns............................................. 31

The GridSplitter............................................................... 31

The UniformGrid............................................................. 33

The Canvas...................................................................... 34

Clipping with the Canvas................................................. 36

Scrolling content.............................................................. 37

Scaling.............................................................................. 39

Using the Viewbox for scaling.......................................... 40

Dynamically changing FontSize without the Viewbox...... 41

Full-screen mode.............................................................. 42

Dependency properties and routed events....................... 43

Dependency properties..................................................... 43

Routed events.................................................................. 45

About mouse and keyboard events.................................. 49

Managing mouse events................................................... 49

Managing key presses....................................................... 51

Layout elements............................................................... 53

Displaying static text........................................................ 53

Borders............................................................................. 55

Showing images................................................................ 56

Content controls.............................................................. 57

Buttons............................................................................ 57

ToggleButton and RepeatButton...................................... 58

CheckBox and RadioButton............................................. 58

HyperlinkButton.............................................................. 61

Tooltips............................................................................ 62

Popup............................................................................... 63

Items controls.................................................................. 64

ListBox............................................................................. 64

ComboBox....................................................................... 66

TabControl....................................................................... 67

Text Controls................................................................... 68

TextBox........................................................................... 69

PasswordBox.................................................................... 69

AutoCompleteBox........................................................... 70

Range controls................................................................. 73

Slider................................................................................ 74

ProgressBar...................................................................... 74

Date controls.................................................................... 75

Calendar........................................................................... 75

DatePicker....................................................................... 77

TimePicker....................................................................... 78

Multimedia....................................................................... 79

Element to element binding............................................. 80

Shapes and geometries..................................................... 83

Rectangle......................................................................... 84

Ellipse.............................................................................. 85

Line.................................................................................. 85

Polyline and Polygon........................................................ 86

Lines styles....................................................................... 87

Path and geometries......................................................... 88

PathGeometry.................................................................. 91

LineSegment.................................................................... 92

PolyLineSegment............................................................. 92

ArcSegment...................................................................... 92

BezierSegment................................................................. 93

QuadraticBezierSegment.................................................. 94

PolyBezierSegment.......................................................... 94

PolyQuadraticBezierSegment........................................... 95

Path mini-language........................................................... 95

Clipping............................................................................ 97

Brushes and transparency................................................. 98

LinearGradientBrush........................................................ 98

RadialGradientBrush........................................................ 99

ImageBrush...................................................................... 100

Filling a shape with a video.............................................. 101

Transparency.................................................................... 102

Transforms....................................................................... 102

Blurring and shadowing effects........................................ 105

Drawing with the WritableBitmap.................................... 106

Animations....................................................................... 108

Creating an animation...................................................... 109

Animations with easing.................................................... 112

Key-frame animations...................................................... 114

Frame-based animations................................................... 116

Styles................................................................................ 116

Control templates............................................................. 120

User controls.................................................................... 129

Custom controls............................................................... 135

Interacting with HTML and the browser.......................... 145

Initialization parameters................................................... 151

Applications with multiple pages...................................... 152

Popup windows................................................................ 155

Dialog boxes to open or save a file................................... 159

Page/Frame navigation.................................................... 161

Managing resources.......................................................... 168

Binary resources............................................................... 169

XAML resources.............................................................. 172

RESX resources............................................................... 175

Accessing web services..................................................... 179

More on HttpClient......................................................... 182

Data binding and data forms............................................ 194

Validation and values conversion in data binding............. 199

Data binding on collections............................................. 206

Enhancing data forms....................................................... 213

Other OpenSilver controls............................................... 219

The DataGrid control....................................................... 219

Defining columns explicitly.............................................. 222

Formatting columns......................................................... 224

Formatting rows............................................................... 225

Handling row selection.................................................... 228

Interactive data sorting on the DataGrid.......................... 229

Using DataGrid with PagedCollectionView..................... 230

Editing with the DataGrid................................................ 238

The TreeView control...................................................... 243

The OpenSilver Showcase............................................... 248

OpenSilver vs. Silverlight features.................................... 249

Index of samples.............................................................. 251