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将模板应用于ItemTemplate的{{1}}而不是ComboBox。

Binding

5.对于<DataGridTemplateColumn.CellTemplate> <DataTemplate> <ComboBox ItemTemplate="{StaticResource iconTemplate}" ItemsSource="xxx"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate>的{{1}}，当您使用窗口的ItemsSource时，您应该ComboBox RelativeSource和iconList { {1}}。因为这两个不属于窗口。

leftIconList

6.在这里，你必须实现它。

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

1 个答案: