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

CodePudding user response：

private void tab1_Tapped(object sender, EventArgs e)
{
   tab1.BackgroundColor = Color.Blue;
}

CodePudding user response：

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