如何一键更改复选框和图像按钮的状态（从一个或另一个）？ .Net 毛伊岛

Question

我需要单击图像按钮并更改复选框的状态，反之亦然。我如何获取名称或 ID 以供参考？

我在两者上都包含了 x:Name="{Binding nameFrmoCollection}" ，但它不起作用，因为对象发送者没有带来它。

这是我的代码：

我的Xaml：

 <BindableLayout.ItemTemplate >
     <DataTemplate x:DataType="model:ConvenioProfissional">
         <Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
             <StackLayout>
                 <ImageButton Source="{Binding Convenio_Img}" Clicked="OnImageButtonClicked" WidthRequest="100" HeightRequest="100" BackgroundColor="transparent" BorderColor="transparent" BorderWidth="2" CornerRadius="10"/>
                 <CheckBox Margin="0,-35,0,0" Color="#66AEBA" HeightRequest="30"/>                               
             </StackLayout>
         </Frame>
     </DataTemplate>
 </BindableLayout.ItemTemplate>       

我的代码隐藏（到目前为止为 ImageButton 工作）。

 public void OnImageButtonClicked(object sender, EventArgs e)
 {
     ImageButton button = (ImageButton)sender;           

     ((ImageButton)sender).BorderWidth = 4;
     ((ImageButton)sender).BorderColor = ButtonUpTextColor;
     ((ImageButton)sender).CornerRadius = 10;
 }

谢谢

Answer 1

我们无法从后台代码中获取DataTemplate中的控件。相反，我们可以使用数据绑定

例如，我们要在单击 ImageButton 时更改

CheckBox

IsChecked 属性。

这是xaml 文件。为了实现 MVVM，我们使用 Command 而不是 clicked 事件。 对于命令，我使用 相对绑定。

<BindableLayout.ItemTemplate >
    <DataTemplate x:DataType="model:ConvenioProfissional">
        <Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
            <StackLayout>
                <ImageButton Source="{Binding Convenio_Img}" 
                             Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=ClickedCommand}" 
                             CommandParameter="{Binding .}" 
                             WidthRequest="100" HeightRequest="100" BackgroundColor="transparent" 
                             BorderColor="transparent" BorderWidth="2" CornerRadius="10"/>
                <CheckBox    IsChecked="{Binding IsChecked}" Margin="0,-35,0,0" Color="#66AEBA" HeightRequest="30" />
            </StackLayout>
        </Frame>
    </DataTemplate>
</BindableLayout.ItemTemplate>

然后是我们的模型，即ConvenioProfissional。在这个模型中，我们必须实现INotifyPropertyChanged，它定义了一个名为PropertyChanged的事件。当我们修改

IsChecked

值时，UI 也会更新。

public class ConvenioProfissional : INotifyPropertyChanged
{
    public string Convenio_Img { get; set; }

    public bool isChecked;
    public bool IsChecked
    { 
        get
        {
            return isChecked;
        }      
                        
        set
        {
            isChecked = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsChecked)));
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
}

最后，这是 ViewModel。我们必须为 ImageButton 实现 ClickedCommand。通过CommandParameter，我们得到了我们点击的ConvenioProfissional实例，然后我们只需修改它的IsChecked属性即可。

public class MainPageViewModel
{

    public ObservableCollection<ConvenioProfissional>  ItemCollection { get; set; } = new ObservableCollection<ConvenioProfissional>();   

    public MainPageViewModel() 
    {
        // add some test data, just ignore it
        ItemCollection.Add(new ConvenioProfissional() { Convenio_Img = "help.png", IsChecked = false });

    }

    public Command ClickedCommand 
    { 
        get
        {
            return new Command((e) =>
            {
                var obj = e as ConvenioProfissional;
                foreach(var  item in ItemCollection)
                {
                    if(obj == item) 
                    { 
                        obj.IsChecked = true;
                    }
                }
            });
        } 
    }
}

如果您有任何疑问，请随时询问！

希望有帮助！