FlipView Control in Windows 8

Introduction

 

In this article, we will describe the FlipView control in Windows 8. In Windows 8 we have to learn some new controls. Here, in this section we will display how to use FlipView control in various modes. By using the FlipView control we have to change the control orientation, bind the control to a collection, and create a context control to the current items.

 

So, we have to use the following steps to make this application.

 

Step 1

 

First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# -> Windows Metro Style -> Application
• Rename this Application

 

Step 2

 

In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application.

 

 

Step 3

 

The MainPage.xaml file is as in the following code.

 

Code

 

Let us see the code which is given below. 

<!-- Content -->
 <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">
        <StackPanel >
          <StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">
            <StackPanel>
              <TextBlock Text="Input" Style="{StaticResource H2Style}"/>
              <TextBlock Text="Select Options" Style="{StaticResource H3Style}"/>
              <ListBox x:Name="ScenarioList" Margin="0,0,20,0" HorizontalAlignment="Left" Foreground="LightCoral">
                <ListBox.ItemTemplate>
                 <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                  </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBoxItem x:Name="Scenario1">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="1. Flipping through simple items" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario2">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="2. FlipView orientation" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario3">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="3. Binding to a collection" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario4">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="4. Nested FlipViews" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario5">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="5. FlipView context control" />
                </ListBoxItem>
            </ListBox>
            </StackPanel>
            <StackPanel Margin="0,31,0,0" >
              <TextBlock Text="Description:" Style="{StaticResource H3Style}"/>
             <StackPanel x:Name="Description" MaxWidth="800">
                <!-- Scenario 1 -->
                <StackPanel x:Name="Scenario1Input">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" >
                        This section explains populating the FlipView control with a series of simple items via XAML.
                    </TextBlock>
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                    <StackPanel Orientation="Vertical" Margin="0,10,0,0">
                    </StackPanel>
                </StackPanel>
                <!-- Scenario 2 -->
                <StackPanel x:Name="Scenario2Input" Visibility="Collapsed">
                    <StackPanel Orientation="Vertical" Margin="0,10,0,0">
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" >
                            This section describes how to orient the FlipView vertically and horizontally.  Use the FlipView to move
                            through the items in one orientation, then click the button below to switch orientations and interact with the
                            FlipView again to move through the items in the opposite direction.
                        </TextBlock>
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                        <Button x:Name="OrientationButton" Content="Vertical" Click="OrientationButton_Click"/>
                    </StackPanel>
                </StackPanel>
                <!-- Scenario 3 -->
                <StackPanel x:Name="Scenario3Input" Visibility="Collapsed">
                    <StackPanel Orientation="Vertical" Margin="0,10,0,0">
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" >
                            This section describes how to bind the FlipView to a collection of items.
                            The FlipView is bound to a collection of strings that represent image files.
                        </TextBlock>
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                    </StackPanel>
                </StackPanel>
                <!-- Scenario 4 -->
                <StackPanel x:Name="Scenario4Input">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" >
                        This scenario demonstrates nesting two FlipView controls orthogonally to provide the capability
                        of navigating multiple items that have multiple items (horizontal and vertical scrolling).
                    </TextBlock>
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                </StackPanel>
                  <!-- Scenario 5 -->
                <StackPanel x:Name="Scenario5Input">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" >
                        This section describes how to create a FlipView "context control" to manage a small number of
                        items within a FlipView.  Navigate within the FlipView and notice that the context control will
                        provide a visual indication where you are with respect to the entire collection.  You can also click
                        on one of the items in the context control to navigate directly to one of the items in the collection.
                    </TextBlock>
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                </StackPanel>
            </StackPanel>
            </StackPanel>
          </StackPanel>
            <!-- Output section -->
          <TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>
          <StackPanel x:Name="Output"  HorizontalAlignment="Left">
              <!-- Item 1-->
            <StackPanel x:Name="Scenario1Output">
            <!-- Add simple items to the FlipView by adding them inline as children of the FlipView. -->
            <FlipView x:Name="FlipView1" Width="300" Height="300">
                <FlipViewItem Width="298" Height="298">
                    <Border Background="Orange">
                        <TextBlock Text="Item 1" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="LightBlue">
                        <TextBlock Text="Item 2" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                   </Border>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Image Source="Images/image1.jpg" Stretch="UniformToFill"/>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="LightGreen">
                        <TextBlock Text="Item 4" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
            </FlipView>
        </StackPanel>
             <!-- Item 2 -->
            <StackPanel x:Name="Scenario2Output" >
             <FlipView x:Name="FlipView2Horizontal" Width="300" Height="300" Visibility="Visible">
                <FlipView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel x:Name="FlipView2ItemsPanel" Background="Transparent" Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </FlipView.ItemsPanel>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="Orange">
                        <TextBlock Text="Item 1" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="LightBlue">
                        <TextBlock Text="Item 2" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="LightGray">
                        <TextBlock Text="Item 3" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
            </FlipView>
           <!-- The Vertical FlipView -->
            <FlipView x:Name="FlipView2Vertical" Width="300" Height="300" Visibility="Collapsed">
                <FlipView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel x:Name="FlipView2ItemsPanel" Background="Transparent" Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </FlipView.ItemsPanel>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="Orange">
                        <TextBlock Text="Item 1" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="LightCoral">
                        <TextBlock Text="Item 2" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
                <FlipViewItem Width="298" Height="298">
                    <Border Background="Green">
                        <TextBlock Text="Item 3" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                    </Border>
                </FlipViewItem>
            </FlipView>
        </StackPanel>
                 <!-- Scenario 3 -->
            <StackPanel x:Name="Scenario3Output" >
            <!-- This scenario illustrates a simple data binding example where we bind a collection of strings that represent image paths.  -->
                <StackPanel Orientation="Vertical">
                    <FlipView x:Name="FlipView3" Width="300" Height="300">
                        <FlipView.ItemTemplate>
                            <DataTemplate>
                                <Image Source="{Binding}" Stretch="UniformToFill" Height="300" Width="300"/>
                            </DataTemplate>
                        </FlipView.ItemTemplate>
                    </FlipView>
                </StackPanel>
            </StackPanel>
            <StackPanel x:Name="Scenario4Output">
                    <!-- Horizontal FlipView -->
                <FlipView x:Name="OuterFlipView" Width="300" Height="300">
                    <FlipView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel x:Name="OuterItemsPanel" Background="Transparent" Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </FlipView.ItemsPanel>
                    <FlipViewItem Width="298" Height="298">
                        <Border Background="Orange">
                 <TextBlock Text="FlipView Item1" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                        </Border>
                    </FlipViewItem>
                    <FlipViewItem Width="298" Height="298">
                        <Border Background="Blue">
                 <TextBlock Text="FlipView Item2" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                        </Border>
                    </FlipViewItem>
                    <FlipViewItem Width="298" Height="298">
                        <Border Background="Green">
                 <TextBlock Text="FlipView Item3" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                        </Border>
                    </FlipViewItem>
                    <FlipViewItem Width="298" Height="298">
                        <Border Background="Pink">
                 <TextBlock Text="FlipView Item4" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                        </Border>
                    </FlipViewItem>
                    <FlipViewItem Width="298" Height="298">
                        <!-- Nested Vertical FlipView.  Notice that this FlipView is actually a FlipViewItem which acheives the nestedeffect.  -->
                        <FlipView x:Name="InnerFlipView" Width="298" Height="298">
                            <FlipView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel x:Name="InnerItemsPanel" Background="Transparent" Orientation="Vertical"/>
                                </ItemsPanelTemplate>
                            </FlipView.ItemsPanel>
                            <FlipViewItem Width="298" Height="298">
                                <Border Background="Orange">
       <TextBlock Text="Vertical FlipView Item1" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                                </Border>
                            </FlipViewItem>
                            <FlipViewItem Width="298" Height="298">
                                <Border Background="Lightcyan">
             <TextBlock Text="FlipView Item2" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                                </Border>
                            </FlipViewItem>
                            <FlipViewItem Width="298" Height="298">
                                <Border Background="DarkOrange">
     <TextBlock Text="Vertical FlipView Item3" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                                </Border>
                            </FlipViewItem>
                            <FlipViewItem Width="298" Height="298">
                                <Border Background="Pink">
               <TextBlock Text="FlipView Item4" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/>
                                </Border>
                            </FlipViewItem>
                        </FlipView>
                    </FlipViewItem>
                </FlipView>
            </StackPanel>
            <StackPanel x:Name="Scenario5Output">
                   <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <FlipView x:Name="FlipView5" Height="300" Width="300">
                        <FlipView.ItemTemplate>
                            <DataTemplate>
                                <Image Source="{Binding}" Stretch="UniformToFill" Height="300" Width="300"/>
                            </DataTemplate>
                        </FlipView.ItemTemplate>
                    </FlipView>
                    <ListBox x:Name="ContextControl"
SelectedItem="{Binding SelectedItem, ElementName=FlipView5, Mode=TwoWay}"
ItemContainerStyle="{StaticResource RadioButtonListBoxItemStyle}"
HorizontalAlignment="Center" Margin="0,5,0,0"IsTabStop="False">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                </StackPanel>
            </StackPanel>
        </StackPanel>
        </StackPanel>
      </ScrollViewer>
         </Grid>
  </Grid>
</UserControl>

Step 4

 

After running this code we get the following output.

 

 

 

 

 

 

Summary

 

In this article, we learned about FlipView Control in Windows 8. 

 

Resources

 

Here are some useful resources.

• Implementing the Passive View -- a Derivative of the Model-View-Control
• Working With Page Flip Using HTML5
• MVVM implementation for Windows forms
• How to make image editor tool in c#: Rotations of image