A while ago we announced we had open sourced the small but useful WPF Transitionz library for Metro Style Animation effects in WPF applications. To our surprise this now has over 5,000 downloads on NuGet.org and even received a couple of questions & bug reports via the Github repository!

We’re using the four libraries in SciChart.Wpf.Ui in our SciChart WPF Examples Suite, and also starting to use them in consultancy projects, so we’ve updated them for 2018 to be compatible with .NET Standard 2.0 and .NET 4.6.1, plus fixed a number of bugs & added other improvements.

What’s in SciChart.Wpf.UI ?

So what’s in this mysterious collection of open source libraries? A quick run-down below.

SciChart.UI.Bootstrap

Supporting .NET Standard 2.0 / .NET Framework 4.6.1 and above, this library includes bootstrapper classes for WPF Applications using Unity and allowing automatic dependency discovery across a range of assemblies.

See the Bootstrap Library Overview page at SciChart.Wpf.UI.

To use it,

1. Decorate your types with the [ExportType] attribute

   	public interface IFoo
   	{
   	}
   
   	// This type is automatically registered with the Unity Container
   	// Every time IFoo is resolved, you get a new instance
   	[ExportType(typeof(IFoo))]
   	public class Foo : IFoo
   	{
   		// Any other registered dependency can go in the constructor
   		public Foo(IUnityContainer container)
   		{
   		}
   	}
   

2. Create a Bootstrapper and initialize public partial class App : Application

       public partial class App : Application
       {
           private AbtBootstrapper _bootstrapper;
   
           public App()
           {
               _bootstrapper = new AbtBootstrapper(new UnityContainer(), new AttributedTypeDiscoveryService(new AutoAssemblyDiscovery()));
               _bootstrapper.Initialize();
   
                // At this point, your container now contains all the types decorated with [ExportType] attribute
                // You may resolve them as normal in Unity 
           }
       }
   

3. Now your application has UnityContainer powered dependency injection in just a few lines of code!

SciChart.UI.Reactive 

The SciChart.UI.Reactive library supports .NET Standard 2.0 / .NET Framework 4.6.1 and above provides observable viewmodels which combine INotifyPropertyChanged event notifications for WPF, and Reactive IObservable streams for observing individual, or combinations of properties.

See Reactive Library Overview and Reactive Library WhenPropertyChanged wiki pages.

The main benefit of this library is that it brings the incredible power of Reactive Extensions to MVVM in WPF applications. You declare a class like this:

public class WhenPropertyChangedTests : ObservableObjectBase
{        
    public string SearchText
    {
        get => GetDynamicValue();
        set => SetDynamicValue(value);
    }

    public SearchOptions SearchOptions
    {
        get => GetDynamicValue();
        set => SetDynamicValue(value);
    }
}

and now any of these properties raise both PropertyChanged events as well as a reactive stream (IObservable<T>). You also don’t have to create a backing field making all your properties, these are stored in the base class (ObservableObjectBase) in a dictionary.

Properties may now be observed using Reactive Extensions as follows:

void Foo()
{
	// Create the ViewModel
	WhenPropertyChangedTests vm = new WhenPropertyChangedTests();

	// Observe properties
	var observable1 = vm.WhenPropertyChanged(x => x.SearchText);
	var observable2 = vm.WhenPropertyChanged(x => x.SearchOptions);

	// Subscribe 
	var disposable = observable1.Subscribe(t => Console.WriteLine($"Search Text = '{t}'"));

	// Set properties 
	vm.SearchText = "Hello"; // -> Should output 'Search Text = 'Hello'' to console
	vm.SearchText = "World"; // -> Should output 'Search Text = 'World'' to console

	disposable.Dispose();

	vm.SearchText = "Not observed"; // nothing happens 
}

and multiple properties may be observed using Observable.CombineLatest

void Foo()
{
    // Create the ViewModel
    WhenPropertyChangedTests vm = new WhenPropertyChangedTests();

    // Observe properties
    var observable1 = vm.WhenPropertyChanged(x => x.SearchText);
    var observable2 = vm.WhenPropertyChanged(x => x.SearchOptions);

    // Subscribe 
    var disposable = Observable.CombineLatest(observable1, observable2, Tuple.Create)
        .Subscribe(t => Console.WriteLine($"Search Text = '{t.Item1}', Options = '{t.Item2}'"));

    // Set properties 
    // 

    // -> Should output 'Search Text = 'Hello', Options = 'AnOption'' to console
    vm.SearchText = "Hello";
    // -> Should output 'Search Text = 'Hello', Options = 'AnotherOption'' to console 
    vm.SearchOptions = SearchOptions.AnotherOption;
    // -> Should output 'Search Text = 'World', Options = 'AnotherOption'' to console
    vm.SearchText = "World";

    disposable.Dispose();

    vm.SearchText = "Not observed"; // nothing happens 
}

If you haven’t checked out Reactive Extensions yet and seen what it can do for your WPF applications, or even server-side applications, then do so. It’s brilliant!

Learning resources:

• Rx Marbles
• Intro to Rx book

SciChart.WPF.UI.Transitionz

The Transitionz library seems pretty popular with WPF developers as it provides a very simple way to animate elements on the UI with just Xaml attached properties.

Transitionz supports WPF / .NET 4.6.1 and above and allows the following effects in your application:

1. Fade / Animate Opacity
2. Translate / Animate position
3. Scale / Animate size
4. Blur / Animate blur factor

All Transitionz animations may be triggered on:

1. On Visibility (e.g. Animate opacity on visibility changed)
2. On DataContextChanged (e.g. trigger an animation when new DataContext attached)
3. On Loaded (e.g. when the control.Loaded event fires)
4. or .. Once (e.g. consider OnLoaded will fire each time the control is loaded, wheareas once ensures just one-time operation)
5. Explicity, by binding to or setting Transition Params

Head over to the Transitionz Library wiki page for more information. We also have a small test-app bundled with SciChart.WPF.UI which demonstrates this functionality.

SciChart.WPF.UI

The SciChart.Wpf.UI assembly supports WPF / .NET 4.6.1 and above, and brings a number of useful controls to WPF applications, and metro styles based on MahApps.Metro. Controls include:

• BusyPanelA panel which displays a spinner / hides content while BusyMessage is not null, shows the content when BusyMessage is null.
• PopupHostA control to host popups which can be shown inside a WPF app with animated show & hide. The background can be blurred out or made darker, similar to a web popup.
• WarningDialogA Metro-style warning dialog which pops up to prompt the user, and provides some Yes/No/Ok/Cancel buttons
• Miscellaneous controls and classes, such as the LabelControl, ExceptionViewer,

Where to Get it

The SciChart.WPF.UI libraries are free & open source and may be used in commercial projects under the Apache 2.0 license. Packages are published to NuGet.org and source code is available on Github.

About Us

SciChart is a self-funded and profitable startup based in London, U.K., which specialises in High Performance, Realtime Chart controls as well as expert consultancy in complex .NET UI / Server applications.

Connect with me on LinkedIn to find out more about our background and capabilities. If you have a bespoke requirement and want to hire our world-class consultants, then get in touch!

The post Open Source SciChart.UI.Reactive and SciChart.WPF.UI.Transitionz v2.1 Released appeared first on Fast, Native Chart Controls for WPF, iOS, Android and Xamarin.