如何将标签和图像绑定到 DataGridTemplateColumn 内的 Combobox？

Question

我有一个小问题无法解决。 （我对 WPF 和它的数据绑定系统非常陌生）所以我目前拥有的是一个具有简单列的数据网格，但我也必须插入一个模板列，我想在其中显示图标及其名称。

所有数据绑定都可以正常工作，除了那个。

所以问题是：

如何将图像及其名称绑定到数据网格中 DataGridTemplateColumn 内的 ComboBox。

感谢您的帮助和时间。 :)

XAML：

<Window x:Class="Octopus.OctopusManagerWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:core="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" Width="696" Background="#FF2B2B2B" Height="28" MinHeight="500">
    <Window.Resources>
        <DataTemplate x:Key="iconTemplate" >
            <WrapPanel Margin="0 0 0 0" Height="auto">
                <Image Width="18" Height="18" Stretch="Fill" Source="{Binding Image}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,15,0"/>
                <Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>
            </WrapPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <DataGrid x:Name="buttonDataGrid" ItemsSource="{Binding}" CanUserAddRows="False" CanUserSortColumns="False" 
                  CanUserDeleteRows="False" CanUserReorderColumns="False" Margin="10" Grid.Row="1" SelectedIndex="1" 
                  Width="auto" Height="auto" AutoGenerateColumns="False" Background="Transparent" Foreground="Gray">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="id" Binding="{Binding id}" IsReadOnly="True" Header="ID" Width="26"/>
                <DataGridCheckBoxColumn x:Name="isActive" Binding="{Binding isActive}" Header="Active" Width="42"/>
                <DataGridTemplateColumn x:Name="leftIcon" Width="100" IsReadOnly="True" Header="Left Icon">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox>
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <ComboBox x:Name="leftIconList" 
                                                  ItemTemplate="{Binding iconTemplate}" 
                                                  ItemsSource="{Binding leftIconList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"/>
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                        </DataTemplate>    
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Width="100" IsReadOnly="True" Header="Right Icon">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox>
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <ComboBox x:Name="rightIconList" 
                                                  ItemTemplate="{Binding iconTemplate}" 
                                                  ItemsSource="{Binding rightIconList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"/>
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn x:Name="btnText" Binding="{Binding btnText}" Header="Button Text" Width="*"/>
                <DataGridTextColumn x:Name="Commands" Binding="{Binding command}" Header="Command To Execute" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

C#：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Data;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace myApp
{
    public partial class myWindow : Window
    {
        ObservableCollection<buttonData> btnsData = new ObservableCollection<buttonData>();

        // buttonData class contains all necessary data to create a button
        public class buttonData
        {
            // get set methods
            public string id { get; set; }
            public bool isActive { get; set; }
            public List<icon> leftIconList { get; set; }
            public List<icon> rightIconList { get; set; }
            public string btnText { get; set; }
            public string command { get; set; }
        }

        public class icon
        {
            public string Image { get; set; }
            public string Name { get; set; }
        }

        private List<icon> _iconList;
        public List<icon> iconList
        {
            get { return _iconList; }
            set { _iconList = value; }
        }

        // init
        // ------------------------------------------------------------------------------
        public myWindow()
        {
            InitializeComponent();

            Uri[] UriArray = new Uri[8];
            string[] fileNames = new string[8];

            // fill the iconList
            for (int i = 0; i < fileListLength-1; i++)
            {
                string image = (string)UriArray.GetValue(i);
                string name = (string)fileNames.GetValue(i);
                iconList.Add(new icon { Image = image, Name = name });
            }

            for (int i = 0; i < 8; i++)
            {
                buttonData btnDat = new buttonData();
                btnDat.id = (i+1).ToString();
                btnDat.isActive = true;
                btnDat.leftIconList = iconList;
                btnDat.rightIconList = iconList;
                btnDat.btnText = "";
                btnDat.command = "";
                btnsData.Add(btnDat);
            }

            buttonDataGrid.DataContext = btnsData;
        }
    }
}

Answer 1

给定的代码几乎没有问题。按照以下步骤纠正这些错误，您可能会得到想要的结果。

1.UriArray 应该定义为与icon.Image 相同的类型。并且不要忘记将一些数据填充到UriArray 和fileNames。

string[] UriArray = new string[8];

2.在填充iconList之前初始化iconList。

iconList = new List<icon>();

3.不要在ComboBox中使用这么多层次结构，就这样：

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ComboBox ItemTemplate="xxx" ItemsSource="xxx"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

4.使用StaticResource将模板应用到ComboBox的ItemTemplate而不是Binding。

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <ComboBox ItemTemplate="{StaticResource iconTemplate}" ItemsSource="xxx"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

5.对于ComboBox的ItemsSource，当你使用窗口的RelativeSource时，你应该绑定到iconList，既不绑定leftIconList也不绑定rightIconList。因为这两个不属于窗口。

ItemsSource="{Binding iconList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"

6.这里你一定已经实现了。