WPF中20个Button控件与XML配置的Bouton类数据绑定实现问题

方案1：保留现有手动编写的20个Button的绑定方式 #

直接修改每个Button的绑定表达式，用集合索引器定位对应Bouton实例即可，集合下标从0开始，所以Button1对应下标0，Button2对应下标1，以此类推。
修改后的button1完整XAML示例：

<Button x:Name="button1" 
        FontWeight="Bold" 
        FontSize="15" 
        Content="{Binding [0].TexteBouton}"
        ToolTip="{Binding [0].Tooltip}"
        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}" />
        </Border>
    </Button.ToolTip>
    <Button.Effect>
        <DropShadowEffect/>
    </Button.Effect>
</Button>

后续Button2只需把所有[0]改成[1]，Button3改成[2]，直到Button20改成[19]即可完成所有绑定。

方案2：更规范的MVVM实现（无需手动编写20个Button代码） #

推荐使用该方案，后续增减按钮不需要修改XAML，直接调整XML配置即可生效：

1. 先在Window.Resources中定义按钮的样式和数据模板：

<Window.Resources>
    <DataTemplate x:Key="BoutonTemplate">
        <Button FontWeight="Bold" 
                FontSize="15" 
                Content="{Binding TexteBouton}"
                ToolTip="{Binding Tooltip}"
                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 FontSize="20" Content="{Binding}" />
                </Border>
            </Button.ToolTip>
            <Button.Effect>
                <DropShadowEffect/>
            </Button.Effect>
        </Button>
    </DataTemplate>
</Window.Resources>

2. 把原来放置20个Button的位置替换为ItemsControl控件：

<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource BoutonTemplate}">
    <ItemsControl.ItemsPanel>
        <!-- 可根据布局需求替换容器，比如UniformGrid按行列排列、WrapPanel自动换行、Grid自定义位置等 -->
        <UniformGrid Columns="5" Rows="4"/>
    </ItemsControl.ItemsPanel>
</ItemsControl>

注意事项 #

1. 当前Bouton类的属性通知存在错误：Tooltip属性的Notify方法传参是"ToolTip"，和属性名大小写不一致，会导致属性变更时界面无法同步更新，修改为以下代码即可：

public string Tooltip { 
    get { return tooltip; } 
    set { tooltip = value; Notify(nameof(Tooltip)); } 
}

使用nameof关键字可以避免手动写字符串出现的拼写、大小写错误。
2. 如果后续需要支持运行时修改XML后自动更新界面，把List<Bouton>替换为ObservableCollection<Bouton>即可。

内容的提问来源于stack exchange，提问作者Bruno Barral