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 4, 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 8, 2014 7:32 AM
    Tuesday, July 8, 2014 7:32 AM

All replies

  • And It needs to be done in button click or tap event
    Friday, July 4, 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 4, 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 6, 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 6, 2014 6:32 PM
    Sunday, July 6, 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 7, 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 8, 2014 7:32 AM
    Tuesday, July 8, 2014 7:32 AM