.NET MAUI：单击标签时选中复选框答案

【问题标题】：.NET MAUI: Check checkbox when clicking on label.NET MAUI：单击标签时选中复选框
【发布时间】：2022-10-16 21:49:32
【问题描述】：

.NET MAUI 中是否有办法在单击旁边的标签时切换复选框的状态？举个例子：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Views.Test"
             Title="Test">
    <HorizontalStackLayout>
        <CheckBox />
        <Label Text="Check this box" VerticalOptions="Center" />
    </HorizontalStackLayout>
</ContentPage>

【问题讨论】：

解决方案有两个部分。 1）编写一个在单击标签时运行的命令。 2) 在该命令的 c# 代码中，以编程方式设置复选框的 IsChecked 属性。研究这两个主题。
将手势识别器附加到将切换复选框的标签

标签： c# .net xaml maui

【解决方案1】：

那么基本上你需要做这样的事情：

             <ContentView
                Padding="10,20">
                <ContentView.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding SomeThingTappedCommand}" />
                </ContentView.GestureRecognizers>
                <StackLayout Orientation="Horizontal">
                    <Label
                        HorizontalOptions="StartAndExpand"
                        InputTransparent="True"
                        Text="Some Title"
                        VerticalTextAlignment="Center" />
                    <controls:ExtendedCheckBox
                        InputTransparent="True"
                        IsChecked="{Binding IsChecked}"
                        VerticalOptions="Center"
                        Color="{DynamicResource PrimaryColor}" />
                </StackLayout>
            </pan:PancakeView>

然后在你的虚拟机中，你需要做的就是：

 SomeThingTappedCommand = new Command(() => IsChecked = !IsChecked);

其中 IsChecked 是应通报财产：

 private bool isChecked;
 public bool IsChecked
    {
        get => isChecked;
        set => SetProperty(ref isChecked, value);
    }

祝你好运

【讨论】：

【解决方案2】：

你可以像这样使用它，一个标签和一个复选框。

为 CheckBox 命名。

 <Label
            Text="Check this box"
            FontSize="32"
            HorizontalOptions="Center" >
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                          NumberOfTapsRequired="1" />
            </Label.GestureRecognizers>
        </Label>
        
        <CheckBox x:Name="StackO" />

然后对于标签水龙头

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
    if (StackO.IsChecked )
       StackO.IsChecked = false;
    else
        StackO.IsChecked = true;
}

【讨论】：

【解决方案3】：

在 xamarin 文件中：

<StackLayout Orientation="Horizontal">
        <CheckBox x:Name="myCheckBox"
              IsChecked="{Binding IsChecked,Mode=TwoWay}">
        </CheckBox>
        <Label VerticalTextAlignment="Center"  Text="Test">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="Clicked"/>
            </Label.GestureRecognizers>
        </Label>
    </StackLayout>

在后面的代码中：

private void Clicked(object sender, EventArgs e)
    {
        myCheckBox.IsChecked = !myCheckBox.IsChecked;
    }

【讨论】：

【解决方案4】：

//xmal

 <HorizontalStackLayout x:Name="DesktopCheckTapped">
                    <HorizontalStackLayout.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </HorizontalStackLayout.GestureRecognizers>
                    <CheckBox x:Name="DesktopCheckBox" IsChecked="True" VerticalOptions="Center" />
                    <Label Text="Hello" VerticalOptions="Center" />
                </HorizontalStackLayout>

//xaml.cs

  private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        var layout = sender as Layout;
        var check = layout.FirstOrDefault(c => c.GetType() == typeof(CheckBox));

        if (check != null)
        {
            ((CheckBox)check).IsChecked = !((CheckBox)check).IsChecked;
        }
    }

【讨论】：