创建可重复使用的 RadioButtonGroupView 控件答案

【问题标题】：Create re-usable RadioButtonGroupView control创建可重复使用的 RadioButtonGroupView 控件
【发布时间】：2023-01-19 12:43:59
【问题描述】：

我已经设法获得了一个单选按钮组功能，可以使用以下 XAML：

<ScrollView>
    <ListView ItemsSource="{Binding Devices}"
              Style="{StaticResource ListViewSimpleStyle}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell x:DataType="local:DeviceEntryModel">
                    <RadioButton IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                 GroupName="Devices">
                        <RadioButton.Content>
                            <Label BindingContext="{Binding Source={RelativeSource AncestorType={x:Type RadioButton}}, Path=BindingContext}"
                                   Text="{Binding Name}"
                                   IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type RadioButton}}, Path=IsEnabled}" />
                        </RadioButton.Content>
                    </RadioButton>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

有什么方法可以简化它并使其更易于重用吗？我在想最终结果是这样的：

<RadioButtonGroupView ItemSource="{Binding Devices}">
    <RadioButtonGroupView.ItemTemplate>
      <RadioButton IsChecked="{Binding IsChecked, Mode=TwoWay}"
                   x:DataType="local:Device"
                   GroupName="Devices">
            <Label BindingContext="{Binding Source={RelativeSource AncestorType={x:Type RadioButton}}, Path=BindingContext}"
                   Text="{Binding Name}"
                   IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type RadioButton}}, Path=IsEnabled}" />
        </RadioButton>
    </RadioButtonGroupView.ItemTemplate>
</RadioButtonGroupView>

沿着这些思路，更简单的东西，你明白了要点。谢谢！

我尝试了一些具有可绑定属性的东西，但不确定这是正确的方法。

【问题讨论】：

删除ScrollView。 ListView 已经可以滚动了。一旦你做了那个改变，你的原始版本和你的“更可重用”的版本之间就没有重要的区别了；您刚刚将 ListView 替换为 RadioButtonGroupView。如果您真的想制作可重用控件，请查找创建“自定义控件”的示例。重要的是，了解 BindableProperty，它是将值从周围页面传递到自定义控件所必需的。这就是使自定义控件有用的原因。

标签： .net xaml maui

【解决方案1】：

是的，如果你想重用这个控件，你可以创建一个ContentView和相对的BindableProperty。

这是一个示例代码：

子视图.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiContentViewApp.ChildView"
             x:Name="TestControlView"
             >
    <VerticalStackLayout>
        <Label   Text="{Binding Source={x:Reference TestControlView}, Path=YourName}"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />


        <ListView ItemsSource="{Binding Source={x:Reference TestControlView}, Path=myViewModel.Items }" HasUnevenRows="True" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding FileName}" TextColor="#f35e20"  VerticalOptions="Center"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </VerticalStackLayout>
</ContentView>

ChildView.xaml.cs

public partial class ChildView : ContentView 
{
    public String YourName
    {
        get
        {
            String value = (String)GetValue(YourNameProperty);
            return value;
        }
        set
        {
            SetValue(YourNameProperty, value);
        }
    }

    public static readonly BindableProperty YourNameProperty = BindableProperty.Create(nameof(YourName)
    , typeof(String)
    , typeof(ChildView), defaultBindingMode: BindingMode.TwoWay, propertyChanged: OnYourNameChanged);

    static void OnYourNameChanged(BindableObject bindable, object oldValue, object newValue)
    {
        Console.WriteLine("-----------------> " + newValue);
    }


    //add MyViewModelProperty
    public static readonly BindableProperty myViewModelProperty =
        BindableProperty.Create(
            nameof(myViewModel),
            typeof(MyViewModel),
            typeof(ChildView),
            null);

    public MyViewModel myViewModel
    {
        set { SetValue(myViewModelProperty, value); }
        get { return (MyViewModel)GetValue(myViewModelProperty); }
    }


    public ChildView()
      {
            InitializeComponent();
      }
}

更多详细信息，您可以查看线程I want to bind data From two different views。

您可以查看文档BindableProperty 了解更多信息。

【讨论】：