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

时间:2020-06-09 06:19:57

标签: c# xaml xamarin xamarin.forms

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

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

Here's the portion of the form I'm trying to replicate :

这是我到目前为止已经开始的代码-我不确定如何填写每个按钮轻击事件或如何修复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;
        }
    }

}

1 个答案:

答案 0 :(得分: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() { 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<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;
            }
        }

    }

}

enter image description here