Using FlipView to create TabControl in Metro Apps

Question

i'm currently creating a Metro Style Application and want to use the FlipView control to work like the tab control in WPF and winforms, please can any one help me ?

Answer 1

We don't have Tab Control in WP8.1 but we can customize using FlipView. Flip View has a property selected index so we can set which view we want.

Create a xaml page, for example MainPage.xaml

For Tab Header

<Border BorderThickness="0,0,0,1" BorderBrush="White" >
        <Grid Grid.Row="0" Background="Black" x:Name="navigateHead"   >

        <TextBlock x:Name="appbarSports" Text="Sports"  Tapped="appbarSports_Tapped"  TextAlignment="Center" Width="80" Margin="0,34,320,7"  />
        <TextBlock x:Name="appbarCars" Text="Cars"  Tapped="appbarCars_Tapped" Margin="160,34,160,7" TextAlignment="Center" />
        <TextBlock x:Name="appbarHomes" Text="Homes"  Tapped="appbarHomes_Tapped" Margin="80,34,240,7" TextAlignment="Center"  />

            <Image x:Name="imgLine0" Source="ms-appx:///Images/white.png" Width="80" Height="3" Stretch="Fill"  Margin="0,55,320,1"  ></Image>
            <Image x:Name="imgLine1" Source="ms-appx:///Images/white.png" Width="80" Height="3" Stretch="Fill"  Margin="81,55,239,1" Visibility="Collapsed" />
            <Image x:Name="imgLine2" Source="ms-appx:///Images/white.png" Width="80" Height="3" Stretch="Fill"  Margin="162,55,158,1" Visibility="Collapsed"  />


        </Grid>
    </Border>

For Flip view XAML code is

<Grid  Grid.Row="1"   >
        <FlipView x:Name="flipControl" SelectionChanged="flipControl_SelectionChanged" >
            <FlipViewItem >
                <ListView x:Name="listViewForSports" >
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Image  Stretch="Fill" Source="{Binding SportsImage}"></Image>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </FlipViewItem>
            <FlipViewItem >
                <ListView x:Name="listViewForHomes">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding HomesImage}" Stretch="Fill"></Image>
      </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </FlipViewItem>
            <FlipViewItem >
                <ListView x:Name="listViewForCars">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding CarsImage}" Stretch="Fill"></Image>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </FlipViewItem>
        </FlipView>
    </Grid>`

and write in code behind file MainPage.xaml.cs

Just initialize these globally:

public sealed partial class MainPage : Page
{
    List<Sports> listOfSports;
    List<Cars> listOfCars;
    List<Homes> listOfHomes;
    public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;
    }

bind data to the FlipView control when page is initialized

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        flipControl.SelectedIndex = 0;
        // TODO: Prepare page for display here.

        // TODO: If your application contains multiple pages, ensure that you are
        // handling the hardware Back button by registering for the
        // Windows.Phone.UI.Input.HardwareButtons.BackPressed event.
        // If you are using the NavigationHelper provided by some templates,
        // this event is handled for you.
        GetData();
    }

This method will bind

public void GetData()
    {
     listOfSports = new List<Sports>();
        for (int i = 1; i < 9; i++)
        {
            listOfSports.Add(new Sports() { SportsImage = @"ms-appx:///Images/Sports/image" + i.ToString() + ".jpg" });
        }

        listViewForSports.ItemsSource = listOfSports;

       listOfCars = new List<Cars>();
        for (int i = 1; i < 14; i++)
        {
            listOfCars.Add(new Cars() { CarsImage = @"ms-appx:///Images/Cars/image" + i.ToString() + ".jpg" });
        }

        listViewForCars.ItemsSource = listOfCars;

      listOfHomes = new List<Homes>();
        for (int i = 1; i < 9; i++)
        {
            listOfHomes.Add(new Homes() { HomesImage = @"ms-appx:///Images/Homes/image" + i.ToString() + ".jpg" });
        }

        listViewForHomes.ItemsSource = listOfHomes;

    }
    public class Cars
    {
      public  string CarsImage { get; set; }
    }
    public class Sports
    {
        public string SportsImage { get; set; }
    }
    public class Homes
    {
        public string HomesImage { get; set; }
    }`

 I did with tap event to navigation withing flip view` private void appbarSports_Tapped(object sender, TappedRoutedEventArgs e)
    {
       // TextBlock a = sender as TextBlock;
       // imgLine0.Margin = new Thickness(a.Margin.Left, 55, a.Margin.Right, 1);
        flipControl.SelectedIndex = 0;
        method(0);
    }

    private void appbarCars_Tapped(object sender, TappedRoutedEventArgs e)
    {

      //  TextBlock a = sender as TextBlock;
        //imgLine0.Margin = new Thickness(a.Margin.Left, 55, a.Margin.Right, 1);
        flipControl.SelectedIndex = 2;
        method(2);

    }

    private void appbarHomes_Tapped(object sender, TappedRoutedEventArgs e)
    {
       // TextBlock a = sender as TextBlock;
      // imgLine0.Margin = new Thickness(a.Margin.Left, 55, a.Margin.Right, 1);

        flipControl.SelectedIndex = 1;
        method(1);


    }

I also used for when the user flips so I used FlipView.SelectionChanged event

private void flipControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {

        FlipView viewControl = sender as FlipView;

        int a = viewControl.SelectedIndex;
       method(a);

    }

This method() is help full for changing imageLine position

 public void method(int a)
    {
        if (imgLine0 != null)
        {
            switch (a)
            {
                case 0:

                    imgLine0.Visibility = Visibility.Visible;

                    imgLine1.Visibility = Visibility.Collapsed;
                    imgLine2.Visibility = Visibility.Collapsed;
                    break;
                case 1:

                    imgLine0.Visibility = Visibility.Collapsed;

                    imgLine1.Visibility = Visibility.Visible;
                    imgLine2.Visibility = Visibility.Collapsed;
                    break;
                case 2:
                    imgLine0.Visibility = Visibility.Collapsed;

                    imgLine1.Visibility = Visibility.Collapsed;
                    imgLine2.Visibility = Visibility.Visible;
                    break;
            }
        }
    }   

Answer 2

i solved it by editing the flipviewitem template and making its view like the wanted tab page view. Then i added a button on the top of every item to activate it.

Answer 3

You would put FlipViewItems in the FlipView the same way you'd put TabItems in a TabControl. To add tabs - you could have a StackPanel with TextRadioButtonStyled RadioButtons that have their check states synchronized with the FlipView selection state. Alternatively you could have a heavily styled ListView for the headers bar.