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

Question

我正在开发一个在 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 项目。

Answer 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。不过，如果您真的只想在单个视图上放置一堆按钮，我发现这涉及更多一点。