0

I have a list of Tabs, I use StackLayout to divide it. I don't use TabbedPage because the Tabs share the same page.

  1. Page1.xaml

    <StackLayout Padding="10,10,10,0">
         <Frame x:Name="tab1" Padding="0" HasShadow="False">
             <StackLayout>
                 <Label TextColor="#848484" FontSize="13" HorizontalTextAlignment="Center"
                        Text="Tab 1" />
                 <Label HeightRequest="2" Margin="0,3,0,0" HorizontalOptions="FillAndExpand"
                        BackgroundColor="#00AA13" /> ---> BackgroundColor changes when Tapped
             </StackLayout>
             <Frame.GestureRecognizers>
                 <TapGestureRecognizer Tapped="tab1_Tapped" />
             </Frame.GestureRecognizers>
         </Frame>
     </StackLayout>
     <StackLayout Padding="10,10,10,0">
         <Frame x:Name="tab2" Padding="0" HasShadow="False">
             <StackLayout>
                 <Label TextColor="#848484" FontSize="13" HorizontalTextAlignment="Center" Text="Tab 2" />
                 <Label HeightRequest="2" Margin="0,3,0,0" HorizontalOptions="FillAndExpand"
                 BackgroundColor="#fff" /> ---> Default BackgroundColor Label
             </StackLayout>
             <Frame.GestureRecognizers>
                 <TapGestureRecognizer Tapped="tab2_Tapped" />
             </Frame.GestureRecognizers>
         </Frame>
     </StackLayout>
     ......
    

enter image description here

How when the tabs are Tapped can I Active the tab by changing the BackgroundColor. I tried by setting Preferences. Thanks for all the help

private void tab1_Tapped(object sender, EventArgs e)
{
   var tabactive = "tab1";
   ActiveColorBg();
}

private void tab2_Tapped(object sender, EventArgs e)
{
   var tabactive = "tab2";
   ActiveColorBg();
}
..........
private void ActiveColorBg()
{
    var bgcolor = "#00AA13";
}

2 Answers 2

0

Check the code below:

private void tab1_Tapped(object sender, EventArgs e)
    {
        ActiveColorBg(intab1, Color.Yellow);
    }
    private void tab2_Tapped(object sender, EventArgs e)
    {
        ActiveColorBg(intab2, Color.Green);
    }
    public void ActiveColorBg(Label label,Color color)
    {
        label.BackgroundColor = color;
    }

Edit again:

1.Create a cusotm label to add istapped property.

public class TapLabel:Label
{
    public static readonly BindableProperty IsTappedProperty = BindableProperty.Create("IsTapped", typeof(Boolean), typeof(TapLabel), null);
    public Boolean IsTapped
    {
        set { SetValue(IsTappedProperty, value); }
        get { return (Boolean)GetValue(IsTappedProperty); }
    }
}

2.create viewmodel to bind with.

public class TapViewModel:INotifyPropertyChanged
    {
       private Color color=Color.Green;
       private Boolean IsTapped;
        public event PropertyChangedEventHandler PropertyChanged;
        public Color _Color
        {   set { }
            get
            {
                if (IsTapped == false)
                { return Color.Gray; }
                return color;
            }
           
        }
        public Boolean _IsTapped {
            set
            {
                IsTapped = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("_Color"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("_IsTapped"));
                _Color = color;
            } 
            get { return IsTapped; }
        }}

3.consume the custom label and use databinding:

xmal:

      <StackLayout Padding="10,10,10,0" >
         <Frame x:Name="tab1" Padding="0" HasShadow="False">
             <StackLayout Padding="10,10,10,0" x:Name="stk1">
                 <Label TextColor="#848484" FontSize="13" HorizontalTextAlignment="Center"
                        Text="Tab 1" />
                 
                 <local:TapLabel x:Name="intab1" HeightRequest="2" Margin="0,3,0,0" HorizontalOptions="FillAndExpand"
                                 IsTapped="{Binding _IsTapped,Mode=TwoWay}"
                                 BackgroundColor="{Binding _Color}" /> 
             </StackLayout>
             <Frame.GestureRecognizers>
                 <TapGestureRecognizer Tapped="tab1_Tapped" />
             </Frame.GestureRecognizers>
         </Frame>
    </StackLayout>

codebehind:

  public MyTestPage2()
        {
            InitializeComponent();
            TapViewModel tvm1 = new TapViewModel();
            TapViewModel tvm2 = new TapViewModel();
            stk1.BindingContext = tvm1;
            stk2.BindingContext = tvm2;
        }
        private void tab1_Tapped(object sender, EventArgs e)
        {
            intab1.IsTapped = true;
            intab2.IsTapped = false;
        }
7
  • Thanks, but the problem is that I only want to activate 1 tab when that tab is Tapped. As your answer, the tabs all assign colors when I Tapped. Do you have any solution for this problem? Sep 15, 2021 at 11:47
  • Did some change, you can check the update.
    – Adrain
    Sep 16, 2021 at 1:44
  • Thanks, however I want to activate 1 tab in the tab list when I Tapped that tab, the remaining tabs will be removed ActiveColorBg. In your example the tabs are ActiveColorBg when I Tapped Sep 16, 2021 at 7:50
  • In this case, Databinding sounds like a good way, you can create a subclass of label and add a property named like "istapped" and set the color of label based on it.
    – Adrain
    Sep 16, 2021 at 9:32
  • I will update my answer once I create the sample
    – Adrain
    Sep 16, 2021 at 9:35
0
private void tab1_Tapped(object sender, EventArgs e)
{
   tab1.BackgroundColor = Color.Blue;
}
1
  • Thanks, I will try different solutions Sep 15, 2021 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.