Windows 10 SDK – StateTriggers and RelativePanel

While the Windows 10 SDK is still unavailable, and will likely remain so until the Build event in April, Microsoft allowed developers at Mobile World Congress to briefly try an early preview of the SDK. Two novelties have been publicly revealed: StateTriggers and the RelativePanel. I’ll present in this post all the information I could gather about those two features.

StateTriggers

Anyone who has used Visual States, be it manually or using Blend, will probably agree: the syntax is unnecessarily verbose, and having to use a storyboard to change even simple properties quickly gets tedious. The situation has been going on for a while, but with universal apps and the need to support multiple form factors, visual states have been promoted from being a side feature to become a key component of Windows application design. As such, it became necessary to ease the work of developers and encourage them to use this tool. StateTriggers are Microsoft’s answer to the verbosity of Visual States.

They are inspired from WPF/Silverlight triggers, and serve the same purpose: make a change when a condition is met. In this precise case, the change is about switching the active visual state.

Currently, only one type of StateTrigger is available: the AdaptiveTrigger. So far it doesn’t seem possible to create custom additional triggers, as the visibility of all the members of the StateTrigger base class is set to internal. I hope that Microsoft will choose not to lock this powerful feature for the final release, and let developer extend it at will.

How does the AdaptiveTrigger work? It reminds me a lot of CSS media queries. Basically, it allows the developer to set a minimal height and width. When the window gets bigger than the given size, the visual state is activated. Minimum height and width are set respectively through the MinWindowHeight and MinWindowWidth properties. For instance:

In this case, the visual state will automatically get activated if the window width gets above 600 pixels.

But even if switching the visual state gets easier, the hassle of setting the properties through storyboards remains. That’s why setters are being introduced. They allow you, if animation isn’t needed, to describe property changes in a simple and concise way.

This setter sets the background of the control named “MainGrid” to green.

Wrapping it up, we can make complete visual states with just a few lines of code:

In thise case, the targeted grid will have a green background when the window width is greater than 600 pixels, and automatically switch to red when it gets narrower.

RelativePanel

The other major addition to the Windows 10 SDK is the RelativePanel. The purpose is to provide a container specially thought for responsive design. In this panel, the controls are positioned based on a relationship to each other. For instance:

In this example, the first button is centered horizontally on the panel. The second button is positioned at the left of the first button. While the benefits of this kind of layout don’t seem obvious at first, it makes a lot of sense when combined with the visual state triggers. They allow to easily change the value of properties, and therefore the relationship between each control. From there, you can easily toggle from a left-to-right layout to a top-to-bottom, depending on the size of the window.

The available alignment options so far are:

  • Above
  • AlignBottomWithPanel
  • AlignBottomWith
  • AlignHorizontalCenterWithPanel
  • AlignHorizontalCenterWith
  • AlightLeftWithPanel
  • AlighLeftWith
  • AlightRightWithPanel
  • AlignRightWith
  • AlignTopWithPanel
  • AlignTopWith
  • AlignVerticalCenterWithPanel
  • AlignVerticalCenterWith
  • Below
  • LeftOf
  • RightOf

What’s next?

Microsoft has been doing a lot of dogfooding lately on the WinRT platform, re-designing the built-in apps using only publicly available APIs. It seems clear that Microsoft is aware of the limitations of their current SDK, and working to provide the best experience to third-party developers. We’ll likely have to wait for the Build to try all those new features and see how they can increase our productivity, but things are certainly moving in the right direction.

 

About Author: kookiz
Software developer, .NET addict, Windows Phone enthusiast. Twitter: @kookiz

8 thoughts on “Windows 10 SDK – StateTriggers and RelativePanel

  • Very nice introduction. Hope to see next post.

  • Pingback: StateTrigger and RelativePanel in Windows 10 | Developing for Modern Windows

  • Pingback: Windows 10 SDK – StateTriggers and RelativePanel

  • Sweet article! I personally would prefer a MaxWindowWidth property instead of MinWindowWidth. Maybe I am just backwards in that kind of way.

    • That’s pure speculation, but it may be Microsoft’s way to encourage the “think mobile first” paradigm: design your app for the smallest form-factor, then adapt it for bigger ones.

  • Sorry I am not able to edit or delete my previous replies,

    Hi all the examples are really similar, have you seen a way to change a RelativePanel attached property in a Setter like

    I am not able find a way neither in code behind. Might be it is not possible

    • I’m not sure I understand your question. If you want to set one of the RelativePanel attached properties from the code-behind, you have two ways:

      1/ Using the static helper:

      RelativePanel.SetLeftOf(relativePanel, otherControl);

      2/ Using the “SetValue” method:

      relativePanel.SetValue(RelativePanel.LeftOfProperty, otherControl);

  • hi
    I was able to find EventTrigger in the universal apps reference, however, I wasn’t able to find DataTrigger . I wasn’t able to use it.
    is that DataTrigger really missing in WinRT? Is EventTrigger the only trigger available in WinRT?
    is there any replacement for DataTrigger in universal apps ?

    Please help me if it will be solve than it will open so many ways to implement dynamic features in my application

Leave a Reply

Your email address will not be published. Required fields are marked *