0 Comments

Blazor.Animate is a new MIT-licensed Blazor-component which allows you to easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the AOS-library.

blazoranimate

Blazor.Animate is available through Nuget. Its source code and project home can be found from GitHub.

What can it do?

With Blazor.Animate you can animate how other components are brought into the view.

How to use it?

To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:

    <Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" >
        <Counter></Counter>
    </Animate>

Is it really that easy?

Yes, after you have added the required Nuget-package and JSInterop. For guidance, please see the readme for a more throughout Getting Started guide: https://github.com/mikoskinen/Blazor.Animate

What animations are supported?

Here’s the built-in animations provided by Blazor.Animate:

  • Fade
  • FadeIn
  • FadeUp
  • FadeDown
  • FadeLeft
  • FadeRight
  • FadeUpRight
  • FadeUpLeft
  • FadeDownRight
  • FadeDownLeft
  • FlipUp
  • FlipDown
  • FlipLeft
  • FlipRight
  • SlideUp
  • SlideDown
  • SlideLeft
  • SlideRight
  • ZoomIn
  • ZoomInUp
  • ZoomInDown
  • ZoomInLeft
  • ZoomInRight
  • ZoomOut
  • ZoomOutUp
  • ZoomOutDown
  • ZoomOutLeft
  • ZoomOutRight

Are there any samples of these animations?

Blazor.Animate’s sample site contains a testbed-page which can be used to check all the animations: https://animateblazorsamplessvc.azurewebsites.net/testbed

image

Is that all?

There’s also easings. And default animations. And named animations. And anchoring.

All these are demonstrated in the sample and in the readme.

Did you do all the animations?

No. All the animations are provided by AOS.

Where to learn more?

The best way to learn more is to head to GitHub and to browse the source or the sample code. If you have any questions, please submit a GitHub issue on the repo.

0 Comments

Null conditional operator allows us to write more terse code. And unfortunately, more subtle bugs. The combination of Null Conditional Operator with Any() is easily my current favourite for The Winner of 2019’s Most Bugs Caused by a New C# Feature.

Combining Null Conditional Operator ?. with System.Linq.Enumerable.Any allows us to quickly check if our collection is not null AND not empty. So instead of writing this:

        public static void DoWork(List myWorkItems)
        {
            if (myWorkItems != null && myWorkItems.Any())
            {
                Console.WriteLine("Doing work");
                return;
            }

            Console.WriteLine("Nothing to do");
        }

We can use Null Conditional Operator and save few key strokes:

        public static void DoWork(List myWorkItems)
        {
            if (myWorkItems?.Any() == true)
            {
                Console.WriteLine("Doing work");
                return;
            }

            Console.WriteLine("Nothing to do");
        }

Maybe we could make the code even better, by reducing nesting by inverting the if:

        public static void DoWork(List myWorkItems)
        {
            if (myWorkItems?.Any() == false)
            {
                Console.WriteLine("Nothing to do");
                return;
            }

            Console.WriteLine("Doing work");
        }

Ah, no. Did you spot the bug?

image

If we expand the example, we get a better picture of the situation:

image

Why this happens? Because myWorkItems?.Any() doesn’t return false when the collection is null. It returns Nullable Boolean instead:

image

Getting around the issue is quite simple: Instead of checking for == false, we check for != true:

            if (myWorkItems?.Any() != true)
            {
                Console.WriteLine("Nothing to do");
                return;
            }

But do we always remember this? Based on the code I’ve seen this year the answer is quite simply no.

Maybe there’s a Roslyn Analyzer for spotting this automatically?

0 Comments

There’s a new version of Adaptive Cards for Blazor available: version 1.1.0 has just been released and it adds support for Action.ToggleVisibility.

ToggleVisibility adds an ability to create cards where card elements can be hidden or shown runtime. It’s quite similar to ShowCard, but instead of the action targeting a card inside a card, ToggleVisiblity can target any element, like a container or an image.

Quick introduction of Adaptive Cards for Blazor

Adaptive Cards for Blazor is a community project that provides Adaptive Cards support for your Blazor applications. Here’s some interesting features provided by the project:

  • Templating: Combine models (objects) and the schema.
  • Card Collections: Display a list of cards based on model and use template selector to customize the output.
  • Action support: Handle Submit and OpenUrl actions using C#.
  • Native .NET-based solution: Blazor Adaptive Cards is based on the official .NET SDK for Adaptive Cards.

The roadmap

Now that version 1.1.0 is ready, the main focus will be on versions 2.0.0 and 3.0.0. The current goal is to release 2.0.0 in November 2019. The version 2.0.0 will add .NET Core 3.1 support to Adaptive Cards for Blazor.

Even more important is the 3.0.0 version. The aim is to release preview of 3.0.0 in May 2020 with support for .NET 5’s Blazor WebAssembly. 

Of course, minor versions may be released for bugfixes and for new features.

For the up-to-date roadmap, please see the following page: https://www.adaptivecardsblazor.com/roadmap.html

How to learn more

As before, the best way to start learning about Adaptive Cards for Blazor is the “Getting Started” –tutorial. There’s also a “Quick start” available.

There’s also more than 40 samples available which show you how to use features like Card Collections and how to handle submit actions in C#.

For the source code and current issues & feature requests, please see GitHub.

0 Comments

Adaptive Cards for Blazor is a community project that provides Adaptive Cards support for your Blazor applications. Adaptive Cards are a way to exchange content in a common and consistent way. Adaptive Cards can be integrated into different applications like Microsoft Teams and Outlook. Adaptive Cards can also be integrated into custom applications built with .NET, iOS and JavaScript. And now Blazor is also supported.

The project’s home site with documentation can be found from https://www.adaptivecardsblazor.com/ and I especially recommend you to check out the Getting Started guide.

There’s also more than 40 samples available through the Sample Site. But please note that the samples are currently hosted on a free Azure App Service plan. If the sample site gets too much traffic, Azure will throttle/take down the site. You can run the samples on your own computer by cloning the repository.

Adaptive Cards for Blazor version 1.0.0 is available through NuGet and the source code and issue list is available through GitHub.

Features

Here's few of the most notable features of this project:

  • JSON-support: Create and display Adaptive Cards from the JSON-schema.
  • Templating: Combine models (objects) and the schema.
  • Card Collections: Display a list of cards based on model and use template selector to customize the output.
  • Action support: Handle Submit and OpenUrl actions using C#.
  • Native .NET-based solution: Blazor Adaptive Cards is based on the official .NET SDK for Adaptive Cards.

One of the most powerful features provided by Adaptive Cards for Blazor is Card Collections. Card Collections can be used to display a collection of cards, based on a list of models (C# objects) and a schema. This allows you to easily transform your application from this:

image

To this:

animation2

Here’s the required code for displaying a Card Collection:

    <CardCollection Models="@forecasts" Schema="@schema"></CardCollection>

Card Collections can be animated with JS & Css libraries and in the example above, AOS was used. For more information about animations, please see the documentation.

Another powerful feature of the project is handling actions in C#. There’s couple ways of doing this, both described in the documentation. Here’s a quick sample of using OnSubmitAction:

<AdaptiveCard Schema="@Schemas.SimpleSubmit" OnSubmitAction="OnSubmit"></AdaptiveCard>

@code {
    string actionDetails = "";

    private void OnSubmit(AdaptiveCards.Blazor.Actions.SubmitEventArgs eventArgs)
    {
        ...
    }
}

Quick Start

The Getting Started guide teaches you how to build Blazor applications using Adaptive Cards for Blazor. It's the recommended source of information for those who are new to Adaptive Cards.

For a quick introduction, here’s how to add Adaptive Cards for Blazor into your app and to render your first Adaptive Card:

Add NuGet

Install-Package AdaptiveCardsBlazor
Configure Startup.cs

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            
            ...

            services.AddBlazorAdaptiveCards();
        }

Configure _Imports.razor

@using AdaptiveCards.Blazor

Add JS interop into _Host.cshtml

    <script src="_content/AdaptiveCardsBlazor/adaptiveCardsJsInterop.js"></script>

Create the schema in your component

@code {
    string schema = @"{
      ""$schema"": ""http://adaptivecards.io/schemas/adaptive-card.json"",
      ""type"": ""AdaptiveCard"",
      ""version"": ""1.2"",
      ""body"": [
        {
          ""type"": ""TextBlock"",
          ""text"": ""Adaptive Cards for Blazor simple example""
        }
      ]
    }";
}

Render the card by adding component into page

<AdaptiveCard Schema="@schema"></AdaptiveCard>

Requirements

Adaptive Cards for Blazor targets .NET Core 3.0. Please also note that the library has been tested with the server side version of Blazor.

Fully tested and supported version of Adaptive Cards for Webassembly version of Blazor is coming shortly.

License

Adaptive Cards for Blazor is MIT licensed. The library uses the following other libraries:

AdaptiveCards.Rendering.Html: MIT-license
Scriban: BSD 2-Clause "Simplified" License

0 Comments

.NET Core 3.0 has arrived and that means Blazor is here! Happy days!

I’m still little gutted that the Razor Page & Blazor interop was scaled down so near the release as we were looking forward to enhancing our Razor Pages with a bit of Blazor magic. But at last we can still include complete Blazor pages next to Razor Pages as shown in the “Combining Razor and Blazor Pages in a Single ASP.NET Core 3 Application” post couple weeks ago. That tutorial is for last preview release of .NET Core 3 but should work without any code changes with the 3.0.

As .NET Core 3.0 is here, that means Blazor.EventAggregator, Blazor.Page and Blazor.CommandButton have all been updated to .NET Core 3.0. For a short introduction of these components, please see the previous post “Blazor.CommandButton and Blazor.EventAggregator updated for ASP.NET Core 3 RC1”.

So, what’s next? I’m happy to say that work with Blazor.AdaptiveCards is almost complete and the first release is near. As the name suggests, Blazor.AdaptiveCards will bring AdaptiveCards to Blazor and I’m quite happy of the implementation. Here’s a sneak peek:

image

Also, now that the server side version of Blazor is done (or at least officially released), WebAssembly-version of Blazor is quite likely starting to more attention from Microsoft and from community. Making sure that all the controls mentioned above work nicely with WebAssembly version of Blazor is a priority. There’s no known issues but more testing is needed.