WU 应用程序 XAML 从自定义 collection 绑定到按钮网格

Question

我对 XAML 尝试使用切换按钮制作网格还很陌生像这样：

<GridView ItemSource="{Binding ButtonCollection}">
  <GridView.ItemTemplate>
   <DataTemplate>
     <ToggleButton Content="{Binding Label}" IsEnabled="{Binding BEnabled}" IsChecked="{Binding BChecked, Mode=TwoWay}"/>
  <DataTemplate>
 </GridView.ItemTemplate>
</GridView>

我有

ObservableCollection<ButtonClass> ButtonCollection

按钮也 class

class ButtonClass
{
 public string Label {get; set;}
 public bool BEnabled {get; set:}
 public bool BChecked {get;set;}
}

当从 ObservableCollection 显示页面加载按钮时绑定有效但我希望 collection 在按钮 IsChecked 值更改时更新

还有什么方法可以将函数绑定到点击方法，例如：

Click="{Binding DoWhenClicked}"

现在它只会导致错误，我认为这是因为 DoWhenClicked 不在 ItemSource 中。

总结：我想让切换按钮网格绑定到某种 list/array/collection 带有标签、选中状态、启用状态的数据。选中切换按钮后，我希望它反映在我的 collection 中。我还想将事件绑定到 Click 方法，以便我可以在选中其他按钮时执行诸如禁用某些切换按钮之类的操作。这样做的好方法是什么。

Answer 1

您的代码中缺少一些概念，您需要正确实施这些概念才能使其正常工作

INotifyPropertyChanged -> 您的 ButtonClass class 充当您视图的视图模型。因此，为了正确更新 UI 的值，反之亦然，您需要 class 来实现它，并且您的所有属性在它们的值发生变化时引发 PropertyChanged 事件（在 setter )
双向绑定 -> 如果您希望 ButtonClass 实例在您单击按钮时更新，并且您希望按钮在您更改时更改状态ButtonClass 中的属性，您的绑定需要是 Mode=TwoWay。您可能想要探索新的绑定 {x:Bind} 以获得更好的性能
Commands -> 要绑定点击事件，需要使用Command属性。您需要创建一个 ICommand 实现，并在您的 ButtonClass 中创建一个属性。 Button 的使用命令属性绑定到该命令。

基本上，我提到的所有内容都是 MVVM 框架的组件，其中有很多。以下是一些比较流行的：Caliburn, MVVMCross, Prism.

还有一个很棒的 Windows 10 入门工具包，它肯定会启动您的应用程序并且包含很多已经构建的 classes - Template10

Answer 2

我注意到你之前问了几个关于模板 10 的问题，所以我想你在这里也使用了模板 10 的 MVVM 模式。

binding works when page loads buttons are displayed from ObservableCollection But I want collection to update when button IsChecked value changes

在 Template 10 项目中，如果您希望在数据模型中出现参数时得到通知（此处表示您的 ButtonClass），您可以从 BindableBase 派生您的 class。如果你检查 BindableBase class 你会发现它已经完成了 INotifyPropertyChanged 的工作，这里直接从 BindableBase 派生比实现 [=16] 会容易得多=] 自己。

also is there any way to bind function to click method

Also I want to bind event to Click method so that i can perform operations like disable some Toggle Buttons when other button is checked.

而不是Click事件，我个人建议你在MVVM模式中使用Command，你可能想知道点击了哪个Button，所以你可以在这里使用CommandParameter .我创建了一个空白模板 10 项目，这是我的示例：

<GridView x:Name="gridView" RelativePanel.Below="pageHeader" Margin="16,12,0,0" ItemsSource="{x:Bind ViewModel.ButtonCollection}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <ToggleButton Width="100" Content="{Binding Label}" IsEnabled="{Binding BEnabled}"
                          IsChecked="{Binding BChecked, Mode=TwoWay}" Command="{Binding ToggleBtnClickCommand}"
                          CommandParameter="{Binding Label}" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

ButtonClass是这样的：

public class ButtonClass : BindableBase
{
    public string Label { get; set; }
    public bool BEnabled { get; set; }

    private bool _bChecked;

    public bool BChecked
    {
        get { return _bChecked; }
        set
        {
            _bChecked = value;
            RaisePropertyChanged();
        }
    }

    public ICommand ToggleBtnClickCommand { get; set; }
}

和 MainPageViewModel:

public class MainPageViewModel : ViewModelBase
{
    public ObservableCollection<ButtonClass> ButtonCollection;

    public MainPageViewModel()
    {
        ButtonCollection = new ObservableCollection<ButtonClass>();
        for (int i = 0; i < 20; i++)
        {
            ButtonCollection.Add(new ButtonClass
            {
                Label = "TButton " + i,
                BChecked = true,
                BEnabled = true,
                ToggleBtnClickCommand = new DelegateCommand<string>(ToggleBtnClicked)
            });
        }
    }

    public void ToggleBtnClicked(string obj)
    {
        var buttonLable = obj;
    }
}

如果你需要检查我的示例，你可以找到我的演示 here。

WU 应用程序 XAML 从自定义 collection 绑定到按钮网格

WU app XAML binding to Button grid from custom collection

winrt-xaml

windows-10-universal