Windows 10: Top 3 XAML/UI changes from 8.1 (State Triggers)

Last but not least, Number 3! (or number 1 since this is a count, down…)

Adaptive Layout

As I explained in the first post of this mini series, the Universal Windows Platform (UWP) allows for one build to run immediately on phone and desktop! But by doing this developers have to consider adaptive UI that can change for different views/devices (phones, Xbox, desktops, tablets, HoloLens). State Triggers and Adaptive Triggers are the two ways to accomplish this adaptive layout.

Continuing with the example from post two this example will show state triggers and how to adjust layouts as the view width decreases.

State Triggers

First we need to add a Visual State Manager to the bottom of our code, but within the tag.

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">

                </VisualState>

                <VisualState x:Name="NarrowLayout">

                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Next we need to define what our States are and what happens to the layout as a result of changing states.

    <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MySplitView.DisplayMode" Value="Inline" />
                        <Setter Target="MySplitView.IsPaneOpen" Value="True" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Target="MySplitView.DisplayMode" Value="Overlay" />
                         <Setter Target="MySplitView.IsPaneOpen" Value="False" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>

In my Visual State Set Trigger I targeted the SplitView Pane, and adjusted it’s display mode so it doesn’t push our content to the right. Because we are setting the Split View’s Display mode in the State Triggers we need to remove it from the inline statement of the to avoid confusion.

Run it on the Local Machine and watch as you narrow the window how the menu automatically changes!

WIDTH > 600:

SplitView1

 

 

WIDTH < 600:

SplitView2

 

WIDTH < 600 and OVERLAY:

SplitView2-1

 

And there you have it. The 3 most notable/important changes (in my opinion) to the XAML UI from 8.1 to 10!

Hope you learned something. Let me know what your top three are, in the comments below!

Happy Coding

-TheNappingKat

Windows 10: Top 3 XAML/UI changes from 8.1 (Split View)

Continuing the countdown!

TL;DR: Code is all on my GitHub, here http://bit.ly/UWP-UI-github

Last Post we learned about the new Visual Studio, and how to add in Relative Panels.

Okay so number two on my list is Split View. What is Split View you ask? Well, Split view is the Universal Windows Platform’s (UWP’s) “Hamburger” menus. There are four styles or DisplayModes that you can choose from:

  • Overlay – Panel Comes out over Content
  • Inline – Panel comes out an shifts content over
  • Compact Overlay – Behaves like Overlay, but when Panel retracts a portion of it (usually icons) is still visible
  • Compact Inline – Behaves like Inline, but when Panel retracts a portion of it (usually icons) is till visible

Here’s some more documentation on it from MSDN and here’s how you add it to your code.

Split View

The first part is to add a button that will trigger the panel to come into view.

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Name="SplitViewButton" Background="Transparent" Padding="0,-6" Margin="12" Click="SplitViewButton_Click">
        <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
     </Button>
     <TextBlock Style="{ThemeResource SubheaderTextBlockStyle}" Text="APP Title Goes Here"
                   RelativePanel.RightOf="SplitViewButton" />
</RelativePanel>

Next let’s add the Split View. In all Split views your items will exist in a SplitView.Pane xaml object.

<SplitView x:Name="MySplitView" DisplayMode="Inline"  PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}" OpenPaneLength="200"
                   RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.Below="SplitViewButton">
   <SplitView.Pane>
       <RelativePanel>
            <!-- Static Relativepanel, substitutes nested stackpanel or grid with rows/columns for this simple scenario -->
            <AppBarButton x:Name="BackgroundButton" Icon="Pictures"/>
                <TextBlock Text="Background"
                               RelativePanel.RightOf="BackgroundButton" />
                <AppBarButton x:Name="LockButton" Icon="SetLockScreen"
                                  RelativePanel.Below="BackgroundButton"/>
                <TextBlock Text="Lock screen"
                               RelativePanel.RightOf="LockButton" RelativePanel.Below="BackgroundButton"  />
                <AppBarButton x:Name="CameraButton" Icon="Camera"
                                  RelativePanel.Below="LockButton" />
                <TextBlock Text="Camera"
                               RelativePanel.RightOf="CameraButton" RelativePanel.Below="LockButton" />
                </RelativePanel>
    </SplitView.Pane>
</SplitView>

Now we need to move the Relative Panel we made before with the ScrollViewer into our SplitView, after the SplitView.Pane, so that they can be inline with each other. The code should look like this:

</SplitView.Pane>
     <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
         <RelativePanel Margin="50,38,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="300" Grid.Row="1">
             <Rectangle x:Name="Rectangle1" Fill="Red" Height="100" Width="100"/>
             <Rectangle x:Name="Rectangle2" Fill="Blue" Height="100" Width="100" RelativePanel.RightOf="Rectangle1" Margin="8,0,0,0"/>
             <Rectangle x:Name="Rectangle3" Fill="Green" Height="100" Width="100" RelativePanel.Below="Rectangle1" Margin="0,8,0,0"/>
             <Rectangle x:Name="Rectangle4" Fill="Yellow" Height="100" Width="100" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True" Margin="0,8,0,0"/>
          </RelativePanel>
     </ScrollViewer>
 </SplitView>
</RelativePanel>

The visual side of the code is now complete. To have it work we need to add the Button Functionality. In the Main.xaml.cs file add the following to the Class:

private void SplitViewButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

Now we Run the code again, and we can see the panel come out and retract.

PANEL OUT:

relaitvePanel3

PANEL IN:

relaitvePanel3-1

 

YAY!

The next post is the Third change out of the Three Most Important Changes – State Triggers

 

<h4>Happy Coding</h4>

-TheNappingKat

Windows 10: Top 3 XAML/UI changes from 8.1 (Relative Panel)

Hey Everybody!

I’m taking a little detour from my usual Unity Gaming Tutorial Series, to give you the top 3┬ámost important changes/updates (in my opinion) that have happened for the Universal Windows Platform (UWP).

  1. Relative Panel
  2. Split View
  3. State Triggers

TL;DR: Code is all on my GitHub, here http://bit.ly/UWP-UI-github

Relative Panel

Now this is a super cool new feature that really comes in handy with Microsoft’s new UWP style of development. What do I mean by this? UWP allows for one build to run immediately on phone and desktop! But by doing this developers have to consider adaptive UI that can change for different views/devices (phones, Xbox, desktops, tablets, HoloLens).

So what is Relative Panel. Well it’s “a style of layout that is defined by the relationships between its child elements” – (read more here). When implementing this style of layout, normally there will be a child object acting as an anchor for the other children derive their location.

Getting Started

So I’m using the new Visual Studio 2015 RC. Interesting fact: You Do NOT need Windows 10 to build for Windows 10!

When you open Visual Studio you should see this interface.

uwp0

If you are familiar with Visual Studio not much has changed.

Create a new UWP project.

uwp1

A new project should be generated.

uwp2

If you look at the Solution Explorer you should notice that there is no longer a shared folder, or two separate projects in the same solution for phone and store apps, like in 8.1.

Relative Panel Dev

Now I’m going to show you how Relative Panels work. Double click the Main.xaml file if it’s not already open.

uwp3

I’ve circle two important things to notice when designing your app. The orientation and the screen that you are dev-ing on at the moment. Also notice the Grid tag? This is where most of our XAML code will be written. Let’s continue.

First: Add a Relative Panel to your Grid

<RelativePanel Width="300" Margin="0,100,0,0" VerticalAlignment="Top"></RelativePanel>

Second: Lets add some content to this panel this will act as our anchor object, aka Square 1.

<Rectangle x:Name="Square1" Fill="Red" Height="50" Width="50"/>

Third: The following squares will now be placed in the Panel relative to that initial Square. Let’s also make sure that we can still view everything though when the width changes. We can do this with adaptive triggers, which I’ll talk about later, but for now let’s add a scroller.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" IsEnabled="True">

Fourth: Run the Code

Now this is where the new Universal Windows Platform really shines!
Click the run on local machine.

uwp4

The code runs in a Windows 10 Window much like we would suspect.

LOCAL MACHINE:

relaitvePanel1

Now, click the arrow next to local machine. You should see a list of emulators you can build on.

uwp4-1

uwp4-2

Select one of the phones. **Caveat – To have this work you need to download the mobile SDK if you didn’t when you downloaded Visual Studio. **

Now run again. The emulator will start and run the app!

EMULATOR:

relaitvePanel2

 

WHAT!? No changes in code or anything! I’m sorry. I’m just really excited about this, and if you do cross platform development you probably share my enthusiasm.

Next I’ll show you the new Split View in XAML

Happy Coding!

-TheNappingKat