How To Use Stack Panel With Scroll View Control In Universal Application Development With XAML And C#

Before reading this article, please go through the article's link, given below-

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn, how to create stack panel with scroll view control in Universal Windows apps development with XAML and Visual C#.

The following important tools are required to develop UWP-

Windows 10 (Recommended).
Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss the step by step app development.

Step1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> give the suitable name for your app (UWPStackPanel) ->OK.

Step 2 - Choose the Target and minimum platform version your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.

version

Step 3 - Open (double Click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of common XAML controls. Expand common XAML controls and drag the required control to the middle of the design canvas.

Add TextBlock control and change the name and text property for the Title purpose.

Afterwards, drag and drop the stack panel control. You have to change the name property and add the end tag </StackPanel>.

Afterwards, drag and drop the scroll view control. Inside stack panel control, change the name property and add the end tag</ScrollView>.

Now, you can change the property for scroll view control, HorizontalScrollMode and HorizontalScrollBarVisibility.

Step 4 - Next, you can add the one more stack panel controls inside the scroll view, change the name property and add the end tag</StackPanel>.

Add 10 TextBlock controls, change the name and text property.

Finally, your design looks like-

design

Note: Automatically, the code, given below, will be generated in XAML code view, while we are done in the design view.

<Page x:Class="UWPStackPanel.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPStackPanel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,-48,0,48">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="136,165,0,0" TextWrapping="Wrap" Text="Stack Panel Test" VerticalAlignment="Top" FontWeight="Bold" />
<StackPanel x:Name="SPMain" HorizontalAlignment="Left" Height="160" Margin="136,50,0,0">
<ScrollViewer x:Name="SVStackpaneltest" Height="124" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible">
<StackPanel x:Name="SPSVinside">
<TextBlock x:Name="tblSp1" TextWrapping="Wrap" Text="Stack Panel Tbl 1" />
<TextBlock x:Name="tblSp2" TextWrapping="Wrap" Text="Stack Panel Tbl 2 " />
<TextBlock x:Name="tblSp3" TextWrapping="Wrap" Text="Stack Panel Tbl 3" />
<TextBlock x:Name="tblSp4" TextWrapping="Wrap" Text="Stack Panel Tbl 4 " />
<TextBlock x:Name="tblSp5" TextWrapping="Wrap" Text="Stack Panel Tbl 5" />
<TextBlock x:Name="tblSp6" TextWrapping="Wrap" Text="Stack Panel Tbl 6 " />
<TextBlock x:Name="tblSp7" TextWrapping="Wrap" Text="Stack Panel Tbl 7" />
<TextBlock x:Name="tblSp8" TextWrapping="Wrap" Text="Stack Panel Tbl 8 " />
<TextBlock x:Name="tblSp9" TextWrapping="Wrap" Text="Stack Panel Tbl 9" />
<TextBlock x:Name="tblSp10" TextWrapping="Wrap" Text="Stack Panel Tbl 10 " /> </StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</Page>

Step 5 - Deploy of your app in Local Machine and the output of the UWPStackPanel app is given below-

Deploy

After scrolling, the screenshot is given below-

Summary

Now, you successfully created and tested your stack panel with scroll view control in Visual C# - UWP environment.