Before reading this article, please go through the following articles-
  1. Developing Windows Store Apps: Introduction And Requirement Specification
  2. Plans For Designing Metro Style Apps (Windows Store Apps)
  3. Windows Store Application Life-Cycle
  4. Guidelines to Pass Windows Store App Certification
  5. Navigation Patterns to Develop Windows Store Application
  6. Templates to Develop Windows Store Apps
  7. Develop Your First Windows Store App (Hello World)

Introduction

In my last article, we saw the basic hello world Windows Store application. In that article, we only changed the page title to display hello world. In this article, we will see the various controls used in Visual Studio 2012 to design our Windows Store application. If you are a developer then you are very familiar with the controls we use to design our applications. If you have developed applications using ASP.Net or some Windows applications then you are familiar with the controls. In ASP.Net we use the control with HTML markup but in Windows Store apps we use XAML markup. If you have some basic knowledge of WPF or Silverlight then it will be very easy to understand Windows Store app development using XAML. Ok whether you are familiar with XAML or not we will see some basic controls with their markup in XAML.
We can create controls for a Windows Store app using one of three ways as follows-
  1. Using XAML markup: You can create a control by defining control markup using XAML.
  2. Using Visual Studio Toolbox: By dragging and dropping a control onto the XAML page.
  3. Using C# code in code behind: By creating a dynamic control using C#.

1. Text-Block

As we use a label control in a web application or a Windows application to display static text on our page, in a Windows Store app the label is modified with a TextBlock control to display static text on the page. See the following markup to create a text block-
  1. <TextBlock x:Name="textBlock1"
  2. Text="This is a label in windows store apps" />

2. Textbox

To take some input from a user we use this textbox control. It is the same as our ASP.Net textbox control. For example-
  1. <TextBox x:Name="textBox1"
  2. Text="Textbox for windows store app " />

3. Button

To interact with the user to perform some action. As we know we use a button to execute a block of code. For example-
  1. <Button x:Name="button1" Content="Button"
  2. Click="Button_Click" />

4. Repeat Button

A control to raise the continuous click event when it is pressed. For example-
  1. <RepeatButton x:Name="repeatButton1" Content="Repeat Button"
  2. Click="RepeatButton_Click" />

5. Checkbox

A control to take selectional input from the user. For example-
  1. <CheckBox x:Name="checkbox1" Content="CheckBox"
  2. Checked="CheckBox_Checked"/>

6. Combo-Box

A dropdown control containing a list of items from which the user can select from. For example:
  1. <ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" >
  2. <x:String>Item 1</x:String>
  3. <x:String>Item 2</x:String>
  4. <x:String>Item 3</x:String>
  5. </ComboBox>

7. Radio-Button

A control to select only one item from a group. For example:
  1. <RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" />

8. Slider

A control for the user to select a range of values. For example:
  1. <Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />

9. StackPanel

A container control like Panel in ASP.Net to contain child controls. For example:
  1. <StackPanel>
  2. <Rectangle Fill="Red"/>
  3. <Rectangle Fill="Blue"/>
  4. <Rectangle Fill="Green"/>
  5. <Rectangle Fill="Yellow"/>
  6. </StackPanel>

10. Canvas

A container control to relatively position child controls. For example:
  1. <Canvas Width="120" Height="120">
  2. <Rectangle Fill="Red"/>
  3. <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
  4. <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
  5. <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
  6. </Canvas>

11. Border

The container control which draws a border around the child controls. For example:
  1. <Border BorderBrush="Gray" BorderThickness="4" Height="108"Width="64">
  2. <StackPanel>
  3. <Rectangle Fill="Yellow"/>
  4. <Rectangle Fill="Green"/>
  5. </StackPanel>
  6. </Border>

12. App Bar

A control to display application-specific commands or to make navigation among pages in an application like a menu control. For example:
  1. <Page.BottomAppBar>
  2. <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
  3. <Grid>
  4. <StackPanel Orientation="Horizontal">
  5. <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
  6. <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
  7. <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
  8. </StackPanel>
  9. </Grid>
  10. </AppBar>
  11. </Page.BottomAppBar>

13. Flip View

A control that contains a collection of items where the user can flip through. For example:
  1. <FlipView x:Name="flipView1">
  2. <Image Source="Assets/Logo.png" />
  3. <Image Source="Assets/SplashScreen.png" />
  4. <Image Source="Assets/SmallLogo.png" />
  5. </FlipView>

14. Grid

A container control to arrange child elements in rows and columns. For example:
  1. <Grid>
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="50"/>
  4. <RowDefinition Height="50"/>
  5. </Grid.RowDefinitions>
  6. <Grid.ColumnDefinitions>
  7. <ColumnDefinition Width="50"/>
  8. <ColumnDefinition Width="50"/>
  9. </Grid.ColumnDefinitions>
  10. <Rectangle Fill="Red"/>
  11. <Rectangle Fill="Blue" Grid.Row="1"/>
  12. <Rectangle Fill="Green" Grid.Column="1"/>
  13. <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
  14. </Grid>

15. Gridview

A data-bound control which takes a collection of items to be displayed in rows and columns and which is able to scroll. For example:
  1. <GridView x:Name="gridView1">
  2. <x:String>Item 1</x:String>
  3. <x:String>Item 2</x:String>
  4. </GridView>

16. ListView

A data-bound control that holds a list of items in a collection. For example:
  1. <ListView x:Name="listView1">
  2. <x:String>Item 1</x:String>
  3. <x:String>Item 2</x:String>
  4. </ListView>

17. Password box

A control to take sensitive data input from the user. For example:
  1. <PasswordBox x:Name="passwordBox1"IsPasswordRevealButtonEnabled="True" />

18. Semantic Zoom

The container control where the user can zoom between two views. For example:
  1. <SemanticZoom>
  2. <ZoomedInView>
  3. <GridView></GridView>
  4. </ZoomedInView>
  5. <ZoomedOutView>
  6. <GridView></GridView>
  7. </ZoomedOutView>
  8. </SemanticZoom>

19. Progress Bar

A control to display the progress of action to the user. For example:
  1. <ProgressBar x:Name="progressBar1" Value="50" Width="100"/>

20. Progress Ring

The animated progress control. For example:
  1. <ProgressRing x:Name="progressRing1" IsActive="True"/>

Conclusion

Here are some common controls as well as some new controls to design Windows Store applications. I hope you like this article. In the next article, we will see some styling for our Windows Store applications.