locked
Creating Tabs with using Buttons

    Question

  • Hello, I am developing an app and want to make tabs using Buttons.

    Button's color will change when clicked, on load app will chose number one button (chosen button will be bue and the other will be black backgrounf colored) chosen as default.

    So in simple words, when user clicks one, button will be "chosen" and other one will be unchosen and vise versa.

    Thanks in advance!

    Friday, July 04, 2014 4:35 PM

Answers

  • Hi Vishal,

    Solved my problem by using smartToggle Button.


           
         <ToggleButton Content="Konut-İşyeri" 
                	BorderBrush="#FF39A9FF" 
                	Foreground="White" 
                	x:Name="konut1"                      
                	Checked="konut1_Checked"
                    Width="218"
                    Height="72" Margin="124,87,117,597" Style="{StaticResource ToggleButtonStyle2}"  />
              

    Here is the code of smartToggle Button if someone ever wants to use.

    Thanks

    • Marked as answer by Niso.z Tuesday, July 08, 2014 7:32 AM
    Tuesday, July 08, 2014 7:32 AM

All replies

  • And It needs to be done in button click or tap event
    Friday, July 04, 2014 4:37 PM
  • Just to give you a head start here is a XAML

    <Page
        x:Class="MsdnSample04072014.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MsdnSample04072014"
        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}">
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1">
                <Button x:Name="tab1" Content="Tab 1" Click="tabClick" />
                <Button x:Name="tab2" Content="Tab 2" Click="tabClick"  />
                <Button x:Name="tab3" Content="Tab 3" Click="tabClick"  />
                <Button x:Name="tab4" Content="Tab 4" Click="tabClick"  />
                <Button x:Name="tab5" Content="Tab 5" Click="tabClick"  />
            </StackPanel>
            <Grid x:Name="tabContent1" Grid.Row="2" Grid.Column="1" Visibility="Collapsed">
                <TextBlock Text="This is Tab 1"/>
            </Grid>
            <Grid x:Name="tabContent2" Grid.Row="2" Grid.Column="1" Visibility="Collapsed">
                <TextBlock Text="This is Tab 2"/>
            </Grid>
            <Grid x:Name="tabContent3" Grid.Row="2" Grid.Column="1" Visibility="Collapsed">
                <TextBlock Text="This is Tab 3"/>
            </Grid>
            <Grid x:Name="tabContent4" Grid.Row="2" Grid.Column="1" Visibility="Collapsed">
                <TextBlock Text="This is Tab 4"/>
            </Grid>
            <Grid x:Name="tabContent5" Grid.Row="2" Grid.Column="1" Visibility="Collapsed">
                <TextBlock Text="This is Tab 5"/>
            </Grid>
        </Grid>
    </Page>
    

    And here is its code behind

    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Media;
    
    namespace MsdnSample04072014
    {
        public sealed partial class MainPage : Page
        {
            private SolidColorBrush inactiveTabColor = new SolidColorBrush(Color.FromArgb(255, 100, 100, 100));
            private SolidColorBrush activeTabColor = new SolidColorBrush(Color.FromArgb(255, 0, 0, 100));
    
            public MainPage()
            {
                this.InitializeComponent();
    
                selectTab(tab1);
            }
    
            private void tabClick(object sender, RoutedEventArgs e)
            {
                Button activeTab = sender as Button;
    
                if (activeTab != null)
                {
                    selectTab(activeTab);
                }
            }
    
            private void selectTab(Button activeTab)
            {
                resetTabs();
    
                activeTab.Background = activeTabColor;
    
                switch (activeTab.Name)
                {
                    case "tab1":
                        tabContent1.Visibility = Visibility.Visible;
                        break;
                    case "tab2":
                        tabContent2.Visibility = Visibility.Visible;
                        break;
                    case "tab3":
                        tabContent3.Visibility = Visibility.Visible;
                        break;
                    case "tab4":
                        tabContent4.Visibility = Visibility.Visible;
                        break;
                    case "tab5":
                        tabContent5.Visibility = Visibility.Visible;
                        break;
                }
            }
    
            private void resetTabs()
            {
                tab1.Background = inactiveTabColor;
                tab2.Background = inactiveTabColor;
                tab3.Background = inactiveTabColor;
                tab4.Background = inactiveTabColor;
                tab5.Background = inactiveTabColor;
    
                tabContent1.Visibility = Visibility.Collapsed;
                tabContent2.Visibility = Visibility.Collapsed;
                tabContent3.Visibility = Visibility.Collapsed;
                tabContent4.Visibility = Visibility.Collapsed;
                tabContent5.Visibility = Visibility.Collapsed;
            }
        }
    }
    

    This is most basic Tab that one can do. You will have to style things to look better. But remember this is not a best in class solution it is just a food for thought. In MVVM Style you can do a much better job.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Friday, July 04, 2014 6:52 PM
  • Thank you for your answer, but I am very newby, and unfortunately I am still trying to understand how this mobile apps work and where to write codes. 
    So unfortunately I will need some help where to put these codes you shared, can you please help?
    Sunday, July 06, 2014 6:24 PM
  • And actually I need to do something exactly like in the picture URL

    http://postimg.org/image/on1d88y0f/

    • Edited by Niso.z Sunday, July 06, 2014 6:32 PM
    Sunday, July 06, 2014 6:29 PM
  • Hello Niso, you should first get some training before you do any of this. At MVA there is a course Windows Phone 8.1 Development for Absolute Beginners that should be your starting point. Then I will suggest you do Windows 8.1 UX Design Jump Start. In this forum we do not teach how to program Windows Store Apps, we here help people with things when they try something and are stuck.

    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!


    Monday, July 07, 2014 1:37 AM
  • Hi Vishal,

    Solved my problem by using smartToggle Button.


           
         <ToggleButton Content="Konut-İşyeri" 
                	BorderBrush="#FF39A9FF" 
                	Foreground="White" 
                	x:Name="konut1"                      
                	Checked="konut1_Checked"
                    Width="218"
                    Height="72" Margin="124,87,117,597" Style="{StaticResource ToggleButtonStyle2}"  />
              

    Here is the code of smartToggle Button if someone ever wants to use.

    Thanks

    • Marked as answer by Niso.z Tuesday, July 08, 2014 7:32 AM
    Tuesday, July 08, 2014 7:32 AM