将按钮控件链接到数据 (WPF)

Posted 2023-02-22

【中文标题】将按钮控件链接到数据 (WPF)

【英文标题】：Linking button controls to data (WPF)

【发布时间】：2022-01-01 05:29:01

【问题描述】：

我正在开发一个在 MainWindow（Button1 到 Button20）中显示 20 个图形按钮控件的应用程序。 每个按钮控件都可以显示一个内容字符串，并具有如下设计的工具提示：

<Button x:Name="button1" FontWeight="Bold" FontSize="15" Content="" HorizontalAlignment="Left" Margin="20,69,0,0" VerticalAlignment="Top" Width="92" Height="29" Click="Button_Click" Background="#FFFFFFFF" MouseEnter="button_MouseEnter">
        <Button.ToolTip>
            <Border Margin="-4,0,-4,-3" Padding="10" Background="Yellow">
                <Border.BitmapEffect>
                    <OuterGlowBitmapEffect></OuterGlowBitmapEffect>
                </Border.BitmapEffect>
                <Label x:Name ="lbl1" FontSize="20" Content="Binding Path=ToolTip">
                </Label>
            </Border>
        </Button.ToolTip>
        <Button.Effect>
            <DropShadowEffect/>
        </Button.Effect>
    </Button>

我想为 XML 文件中的每个按钮定义字符串内容和工具提示字符串，以便可以通过修改 XML 文件来更改此信息。

为此，我创建了一个 ViewModel，定义了一个名为 Bouton（法语）的对象：

public class Bouton : INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;
    void Notify(string propertyName)
    
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    

    int boutonNumber;
    public int BoutonNumber get  return boutonNumber;  set  boutonNumber= value; Notify("BoutonNumber");  
    string texteBouton;
    public string TexteBouton  get  return texteBouton;  set  texteBouton = value; Notify("TexteBouton");  
    string tooltip;
    public string Tooltip  get  return tooltip;  set  tooltip = value; Notify("ToolTip");  
    public Bouton(int nb, string tb, string tt)
    
        BoutonNumber = nb;
        TexteBouton = tb;
        Tooltip = tt;
    

在读取 XML 文件时，我创建了 20 个 Bouton 类型的对象，其中包含有关 boutonNumber、Content 和 Tooltip 的信息。然后将所有这些 Bouton 对象存储到一个 List 集合中。

现在我想在我的 Bouton 列表和 MainWindow 上的图形控件之间使用 DataBinding，以便能够在每个按钮上显示内容字符串和工具提示字符串。 在 MainWindow 中，我使用了以下代码：

public MainWindow()
    
        InitializeComponent();
        List<Bouton> lst = Utilities.CreateList();
        this.DataContext = lst;
    

其中 lst 是一个正确初始化的 List 集合。

但我不知道如何在 Button 控件上进行数据绑定。如何使 20 个 Button 控件中的每一个都正确链接到相应的 Bouton 对象（包含在 Boutons 集合中）？我的意思是 Button1 控件如何从我的 Bouton1 对象获取其字符串，Button2 控件如何从 Bouton2 对象获取其字符串，依此类推，直到 Button20 控件和 Bouton20 对象？

感谢您的帮助。请注意，我是 WPF 的初学者，这是我使用 Visual Studio 进行的第一个 WPF 项目。

【参考方案1】：

我认为最简单的选择是将按钮包装在 UserControl 中。

然后这个 UserControl 包含一个Bouton 类型的属性（顺便说一句不是很好的命名。 - 即使它是一种不同的语言，术语“按钮”已经存在，所以这是相当模棱两可的。作为一个非我自己是母语为英语的人，我也建议习惯用英语命名，从长远来看，它会为你省去很多麻烦，但这可能是主观的）

然后您可以直接绑定到 UserControl 模板中的该属性。您所要做的就是为每个 UserControl 分配正确的按钮数据。

例如。

public class CustomButton : UserControl

    public Bouton ParsedButtonData  get; set; 

    public CustomButton()
    
        DataContext = this;
        InitializeComponent();
    

在您的 UserControl 模板中：

<Button ...>
    <Button.ToolTip>
        <Border ...>
            <Label Content="Binding ParsedButtonData.Tooltip" ...>
            </Label>
        </Border>
    </Button.ToolTip>
</Button>

然后您可以像这样将 UserControl 放在您的 XAML 中：

xmlns:ctrls="clr-namespace:MyProject.MyNamespace"

<ctrls:CustomButton name="myFirstButton"/>

现在您要做的就是确保每个 CustomButton 都将其 ParsedButtonData 设置为相应的数据。您可以为 XAML 中创建的每个按钮手动设置此项，也可以首先通过 C# 创建自定义按钮。

如果您在 XAML 中创建用户控件，例如：

public void SomeMethod()

    myFirstButton.ParsedButtonData = lst[0];

或者，您可能想考虑扩展ItemsControl。它基本上是为这种应用程序而设计的。 ItemsControl 有一个 ItemsSource，它可以是任何集合类型，例如 List<> 或 ObservableCollection<>。然后它从该集合中创建其子项，将 DataContext 自动设置为所述列表中的相应元素。

例如DataGrid 或ListView。不过，如果您真的只想在单个视图上放置一堆按钮，我发现这涉及更多一点。

【讨论】：

非常感谢您对我的问题、您的回答以及您在其中提供的代码细节感兴趣。我会尽快试一试。非常感谢您的帮助！

我昨天试过这个代码。我还有一些问题：我让 CustomButton 类继承自 Button （而不是像您建议的那样从 UserControl 继承），但我有一条关于 Click 事件的错误消息，据说该事件不存在于 CustomButton 类中。我很惊讶，因为基类 (Button) 实现了 Click 事件。我试图从 CustomButton 调用 base.Click() 但我仍然收到一条错误消息。我不明白为什么CustomButton中不存在Click事件，因为它确实存在于Button类中。

为什么不使用 UserControl 而不是从 Button 继承？在 UserControl 中，您可以轻松地为放置在模板中的任何按钮注册单击事件。

好的，我会试试这个。谢谢。