Xamarin XAML changing frame and label color when clicked

Question

I am attempting to create a form where a user can press one of four label/frame objects labeled 1, 2, 3, or 4. Upon clicking I need the frame and label to change from gray to blue. When it is unselected, I need it to change back to the gray color. I also only want to allow the users to press one button at a time. Thus when someone presses 1 and then presses 2, 1 should be unselected automatically.

I have created Gester recognizers for both the label and the frame at the same time, but I'm unsure how to get both the label and the frame to change colors simultaneously. Additionally, I have read that one way to do accomplish this is to set the "focused" element to the border color I want to change to. Does anyone have any guidance on this?

Here's the code I've started thus far - I'm unsure how to fill in each button tapped event or how to fix the frame_focused function to change the border color of the frame :

ConsumerQuote.xaml

ConsumerQuote.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace One
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class consumerQuoteReceived : ContentPage
    {
        public consumerQuoteReceived()
        {
            InitializeComponent();
        }

        private void button_1_tapped(object sender, EventArgs e)
        {
            frame_Focused()

        }

        private void button_2_tapped(object sender, EventArgs e)
        {


        }

        private void button_3_tapped(object sender, EventArgs e)
        {


        }

        private void button_4_tapped(object sender, EventArgs e)
        {


        }

        private void frame_Focused(object sender, FocusEventArgs e)
        {

            Frame.BorderColor = Color.Blue;
        }
    }

}

user_10216982 · Answer

There are many solutions which can implement it . The best way is to use data-binding and set the BorderColor and TextColor in code behind . Since you had used Tap Event . I provide one of the solutions like following

in Code behind

public partial class consumerQuoteReceived : ContentPage { public consumerQuoteReceived () { InitializeComponent(); }

    private void button_1_tapped(object sender, EventArgs e)
    {

        SetStyle(1);
    }

    private void button_2_tapped(object sender, EventArgs e)
    {

        SetStyle(2);
    }

    private void button_3_tapped(object sender, EventArgs e)
    {

        SetStyle(3);
    }

    private void button_4_tapped(object sender, EventArgs e)
    {

        SetStyle(4);
    }

    void SetStyle (int num)
    {
        List frames = new List() {frame_1,frame_2,frame_3,frame_4 };
        List labels = new List() { label_1, label_2, label_3, label_4 };

        for(int i=1;i<5;i++)
        {
            Frame frame = frames[i - 1];
            Label label = labels[i - 1];

            if(i==num)
            {
                frame.BorderColor = Color.Blue;
                label.TextColor = Color.Blue;
            }

            else
            {
                frame.BorderColor = Color.Gray;
                label.TextColor = Color.Gray;
            }
        }

    }

}

Xamarin XAML changing frame and label color when clicked

1 Answers

in Code behind

in Code behind