How to assign properties when Tapped in Xamarin

Issue

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>
    ......
   

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";
}

Solution

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 colorColor.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,ModeTwoWay}"
                                 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;
        }

Answered By – Adrain Zhu -MSFT