单击时 Xamarin XAML 更改框架和标签颜色

Question

我正在尝试创建一个表单，用户可以在其中按下标记为 1、2、3 或 4 的四个标签/框架对象之一。单击后，我需要框架和标签从灰色变为蓝色。当它被取消选择时，我需要它变回灰色。我也只想让用户一次按一个按钮。因此，当有人按 1 然后按 2 时，应自动取消选择 1。

我同时为标签和框架创建了 Gester 识别器，但我不确定如何让标签和框架同时更改颜色。此外，我已经阅读了实现此目的的一种方法是将“聚焦”元素设置为我想要更改的边框颜色。有人对此有任何指导吗？

这是我到目前为止开始的代码 - 我不确定如何填写每个按钮点击事件或如何修复 frame_focused 函数以更改框架的边框颜色：

ConsumerQuote.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="One.consumerQuote">
    <ContentPage.Content>
        <StackLayout Orientation="Horizontal">
            <StackLayout>
                <Frame x:Name="frame_1" CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" Focused="Frame_Focused" >
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_1_tapped"/>
                    </Frame.GestureRecognizers>
                    <Label Text="1" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="button_1_tapped"/>
                        </Label.GestureRecognizers>
                    </Label>
                </Frame>
            </StackLayout>
            <StackLayout>
                <Frame CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" Focused="Frame_Focused">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_2_tapped"/>
                    </Frame.GestureRecognizers>
                    <Label Text="2" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="button_2_tapped"/>
                        </Label.GestureRecognizers>
                    </Label>
            </Frame>
            </StackLayout>
            <StackLayout>
                <Frame CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" Focused="Frame_Focused">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_3_tapped"/>
                    </Frame.GestureRecognizers>
                    <Label Text="3" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="button_3_tapped"/>
                        </Label.GestureRecognizers>
                    </Label>
                </Frame>
            </StackLayout>
            <StackLayout>
                <Frame CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" Focused="Frame_Focused">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_4_tapped"/>
                    </Frame.GestureRecognizers>
                    <Label Text="4" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="button_4_tapped"/>
                        </Label.GestureRecognizers>
                    </Label>
                </Frame>
           </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

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

}

Answer 1

有很多解决方案可以实现它。最好的方法是使用数据绑定并在后面的代码中设置 BorderColor 和 TextColor。由于您使用了 Tap Event 。我提供如下解决方案之一

在后面的代码中

<StackLayout Orientation="Horizontal">
        <StackLayout>
            <Frame x:Name="frame_1" CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" >
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="button_1_tapped"/>
                </Frame.GestureRecognizers>
                <Label x:Name="label_1" Text="1" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_1_tapped"/>
                    </Label.GestureRecognizers>
                </Label>
            </Frame>
        </StackLayout>
        <StackLayout>
            <Frame x:Name="frame_2" CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="button_2_tapped"/>
                </Frame.GestureRecognizers>
                <Label x:Name="label_2" Text="2" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_2_tapped"/>
                    </Label.GestureRecognizers>
                </Label>
            </Frame>
        </StackLayout>
        <StackLayout>
            <Frame x:Name="frame_3" CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" >
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="button_3_tapped"/>
                </Frame.GestureRecognizers>
                <Label x:Name="label_3" Text="3" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_3_tapped"/>
                    </Label.GestureRecognizers>
                </Label>
            </Frame>
        </StackLayout>
        <StackLayout>
            <Frame x:Name="frame_4" CornerRadius="15" BorderColor="Gray" WidthRequest="30" HeightRequest="30" >
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="button_4_tapped"/>
                </Frame.GestureRecognizers>
                <Label x:Name="label_4" Text="4" TextColor="Gray" FontSize="18" HorizontalTextAlignment="Center">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="button_4_tapped"/>
                    </Label.GestureRecognizers>
                </Label>
            </Frame>
        </StackLayout>
    </StackLayout>

在后面的代码中

公共部分类 consumerQuoteReceived : ContentPage { 公共消费者QuoteReceived () { 初始化组件（）； }

    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<Frame> frames = new List<Frame>() {frame_1,frame_2,frame_3,frame_4 };
        List<Label> labels = new List<Label>() { 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;
            }
        }

    }

}