Month: July 2015

Windows

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

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

Happy Coding

-TheNappingKat