WindowsPhone 8.1: Now UniversalWrapPanel is an Alternative For WrapPanel

Introduction

I am still really addicted to "WrapPanel" because WrapPanel is great for laying out things in a vertical or horizontal orientation until you reach the edge of the container and then move to the next column or row. But unfortunately I found "WrapPanel" is no longer supported by Windows Store apps (Universal Apps). Yestereday I discovered that "UniversalWrapPanel" is an alternative for "WrapPanel" layout. And I heartily say thanks very much to @gregstoll for making UniversalWrapPanel. In this article I will explain UniversalWrapPanel.

Building the sample

• Ensure you've downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.
  
  
• I assume that you're going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you need to take some additional steps. For more info, see Register your Windows Phone device for development.
  
  
• This article assumes you're using Microsoft Visual Studio Express 2013 for Windows.

Description

Previously in Windows Phone 8.0, the WrapPanel control is available from Microsoft.Phone.Controls. Toolkit.dll. WrapPanel is a good layout for positioning child elements sequentially from left to right or top to bottom. When elements extend beyond the panel edge, they are positioned in the next row or column. Unfortunately now WrapPanel is not supported by Windows Store apps so we need an alternative for "WrapPanel" in Windows Store apps (UniversalWrapPanel). Ok, all right, let's start to understand the new control with the following procedure.

Step 1

• Open Visual Studio 2013
  
• Create a new project (for example: "WrapPanel8.1")

Install UniversalWrapPanel for Windows Phone 8.1, run the following command in the Package Manager Console:

PM> Install-Package UniversalWrapPanel

You will then find the "UniversalWrapPanel" DLL in the references like this.



Step 2

Open MainPage.xaml and add the namespace to the XAML:

xmlns:UniversalWrapPanel="using:Gregstoll"

Step 3

Let's write the following XAML code to use UniversalWrapPanel.

  <Grid Background="#FF59ABB4">
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <TextBlock FontSize="25" Text="Horizontal UniversalWrapPanel:"/>
          <!--Horizontal Panel-->
         <UniversalWrapPanel:UniversalWrapPanel Grid.Row="1" Orientation="Horizontal" Background="#FF34AC21">
             <Button Content="Button1" />
             <Button Content="Button2" />
             <Button Content="Button3" />
             <Button Content="Button4" />
             <Button Content="Button5" />
         </UniversalWrapPanel:UniversalWrapPanel>
         <TextBlock FontSize="25" Grid.Row="2" Text="Vertical UniversalWrapPanel:"/>
         <!--Vertical Panel-->
         <UniversalWrapPanel:UniversalWrapPanel Background="#FFC500FF" Grid.Row="3" Orientation="Vertical">
             <Button Content="Button1" />
             <Button Content="Button2" />
             <Button Content="Button3" />
             <Button Content="Button4" />
             <Button Content="Button5" />
         </UniversalWrapPanel:UniversalWrapPanel>
     </Grid>

ScreenShots:



Summary

From this article we have learned how to use UniversalWrapPanel in Windows Phone 8.1. And I hope you don't need the source code file from me, because the necessary code is available in this article.

This article is also available in my original blog.