如何使用 XAML 在 .NET 7 MAUI 中使标签可选？

Question

我正在创建一个密码生成器，但我不知道如何使标签（程序放置生成的密码的位置）可选择但不可编辑...该怎么做？

这是我的

mainpage.xaml

代码：

<?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="PassGen.MainPage">
    

    <ScrollView
        BackgroundColor="DarkSlateGray">
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                x:Name="PasswordLabel"
                HorizontalOptions="Center"
                Text="Click Generate to generate a password"
                FontAttributes="Italic"
                
           
            ></Label>


            <Button
                BackgroundColor="Coral"
                Text="Generate"
                Clicked="GeneratePassword"
            ></Button>
            

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Answer 1

是的，您可以尝试向标签中添加点击手势并获取标签的文本，或者添加按钮以获取标签的文本。

我使用了两种方式来实现这个功能。您可以参考以下代码：

public class MyViewModel: INotifyPropertyChanged 
{
    public ICommand TapCommand { get; set; }

    public ICommand GetPwdCommand { get; set; }


    private string _password ="123456";
    public string Password
    {
        get => _password;
        set
        {
            SetProperty(ref _password, value);
        }
    }

    public MyViewModel()
    {

        TapCommand = new Command<object>(OnLabelTapped);

        GetPwdCommand = new Command(getPwdFromEntry);

    }

    private void getPwdFromEntry()
    {
        System.Diagnostics.Debug.WriteLine("method 1-----> Password = " + Password);

    }

    private void OnLabelTapped(object obj)
    {
        if (obj is Label )
        {
            var label = (Label)obj;

            string str = label.Text;

            System.Diagnostics.Debug.WriteLine("method 2--- >Password = " + str);
        }
    }
}

使用示例：

<?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="MauiMvvmApp226.CollectionViewPage"
             xmlns:MauiMvvmApp="clr-namespace:MauiMvvmApp"
             Title="CollectionViewPage">

    <ContentPage.BindingContext>
        <MauiMvvmApp:MyViewModel></MauiMvvmApp:MyViewModel>
    </ContentPage.BindingContext>

    <VerticalStackLayout>
        <Label
                x:Name="PasswordLabel"
                HorizontalOptions="Center"
                Text="Click Generate to generate a password" HeightRequest="50"
                >
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="{Binding Source={x:Reference PasswordLabel}}">
                </TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>


        <Entry  x:Name="mEntry" IsReadOnly="True"  Text="{Binding Password}" />
        <Button
                Command="{Binding GetPwdCommand}"
                BackgroundColor="Coral"
                Text="Generate">
        </Button>


    </VerticalStackLayout>
</ContentPage>

Answer 2

使用 .Net Maui 中的处理程序使标签可选

嗨@Equalisys，

我不知道你的问题的答案是否仍然相关（考虑到你提出问题已经过去了 9 个月），但我想我会发布我的实现，以防其他人遇到同样的问题。

我设法通过使用 .Net Maui 中的处理程序使标签可供选择。步骤概述如下（带有代码片段）：

1. 创建一个继承自要自定义的控件的类。 在这种情况下，它将是一个标签。就我而言： 命名空间 Your_Namespace { 内部类 MyLabel：标签 { } }

2. 在 App.xaml.cs 文件的构造函数中，添加以下内容 代码：

Microsoft.Maui.Handlers.LabelHandler.Mapper.AppendToMapping（“MyLblCustomization”，（处理程序，视图）=> { if(视图是MyLabel) { #如果安卓 handler.PlatformView.SetTextIsSelectable(true); #elif 窗口 handler.PlatformView.IsTextSelectionEnabled = true; ＃万一 } });

注意：我使用条件编译为windows和android平台编写代码。在一些文章中，指出您可以将代码放置在平台特定的文件夹中。

3. 转到要添加控件的页面的前端 - 在我的例子中是 MainPage.xaml。 在这里，添加命名空间（子类所在的位置），导入 类并使用自定义标签。相应地设置属性。当您运行应用程序时，标签现在应该是可选的。

添加命名空间。就我而言，类 (MyLabel) 位于名为 ControlsCustomize:

的文件夹中

<ContentPage 
         xmlns:CustomControls ="clr-namespace:Test_LblSelect_Theme_NavBar.ControlsCustomize">

导入类并使用自定义标签:

<CustomControls:MyLabel
            Text="Hello, World! Welcome to .NET Multi-platform App UI | Hello, World! Welcome to .NET Multi-platform App UI | Hello, World! Welcome to .NET Multi-platform App UI"
            x:Name="mylabel"
            >
</CustomControls:MyLabel>

完成此操作后，标签应该是可选的。我在android和windows平台上都尝试过，效果符合预期。

注意：

• 我在Windows 10和Android API 33（模拟器）上进行了测试
• 这是一篇有用的关于处理程序的文章
• 这是关于处理程序的另一篇有用的文章。这篇特别的文章非常简单易懂。

希望有帮助。