如何将我的标签和图像绑定到 DataGridTemplateColumn 内的 Combobox?
How can I bind my label and image to my Combobox inside DataGridTemplateColumn?
我有一个我无法解决的小问题。 (我在 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;
}
}
}
给定的代码几乎没有问题。按照以下步骤纠正这些错误,您可能会得到您想要的。
1.The UriArray
应定义为与 icon.Image
相同的类型。并且不要忘记将一些数据填充到 UriArray
和 fileNames
.
string[] UriArray = new string[8];
2.Initialize iconList
之前填写图标列表。
iconList = new List<icon>();
3.Don没有在ComboBox
中使用那么多层次结构,就像这样:
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemTemplate="xxx" ItemsSource="xxx"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
4.Use StaticResource
将模板应用于 ComboBox
的 ItemTemplate
而不是 Binding
.
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemTemplate="{StaticResource iconTemplate}" ItemsSource="xxx"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
5.ForComboBox
的ItemsSource
,当你使用window的RelativeSource
时,你应该绑定到iconList
leftIconList
和 rightIconList
都没有。因为这两个不属于window.
ItemsSource="{Binding iconList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
6.Here你一定做到了
我有一个我无法解决的小问题。 (我在 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;
}
}
}
给定的代码几乎没有问题。按照以下步骤纠正这些错误,您可能会得到您想要的。
1.The UriArray
应定义为与 icon.Image
相同的类型。并且不要忘记将一些数据填充到 UriArray
和 fileNames
.
string[] UriArray = new string[8];
2.Initialize iconList
之前填写图标列表。
iconList = new List<icon>();
3.Don没有在ComboBox
中使用那么多层次结构,就像这样:
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemTemplate="xxx" ItemsSource="xxx"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
4.Use StaticResource
将模板应用于 ComboBox
的 ItemTemplate
而不是 Binding
.
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemTemplate="{StaticResource iconTemplate}" ItemsSource="xxx"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
5.ForComboBox
的ItemsSource
,当你使用window的RelativeSource
时,你应该绑定到iconList
leftIconList
和 rightIconList
都没有。因为这两个不属于window.
ItemsSource="{Binding iconList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
6.Here你一定做到了