This is my code behind:
public partial class MainWindow : INotifyPropertyChanged
{
private List<Word> _words;
public List<Word> Words
{
get => _words;
set
{
_words = value;
OnPropertyChanged("Words");
}
}
public MainWindow()
{
InitializeComponent();
MeaningGroup group1 = new MeaningGroup()
{
Synonyms = new List<string> {"synonym1", "synonym2", "synonym3"},
Acronyms = new List<string> {"acronym1", "acronym2"}
};
MeaningGroup group2 = new MeaningGroup()
{
Synonyms = new List<string> { "synonym1"},
Acronyms = new List<string> { "acronym1", "acronym2", "acronym3" }
};
MeaningGroup group3 = new MeaningGroup()
{
Synonyms = new List<string> { "synonym1", "synonym2" },
Acronyms = new List<string> { }
};
MeaningGroup group4 = new MeaningGroup()
{
Synonyms = new List<string> { "synonym1" },
Acronyms = new List<string> { "acronym1", "acronym2", "acronym3","acronym4" }
};
Word word1 = new Word() {Name = "word1",MeaningGroups = new List<MeaningGroup>() {group1, group2}};
Word word2 = new Word() { Name = "word2", MeaningGroups = new List<MeaningGroup>() { group3, group4 } };
Word word3 = new Word() { Name = "word3", MeaningGroups = new List<MeaningGroup>() { group1, group2,group4 } };
Word word4 = new Word() { Name = "word4", MeaningGroups = new List<MeaningGroup>() { group3 } };
Words = new List<Word> {word1, word2, word3, word4};
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public class Word
{
public String Name { get; set; }
public List<MeaningGroup> MeaningGroups { get; set; }
}
public class MeaningGroup
{
public List<string> Synonyms { get; set; }
public List<string> Acronyms { get; set; }
}
And this is MainWindow.xaml code:
<Window x:Class="WpfApp4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp4"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<DataGrid ItemsSource="{Binding Words}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Synonym and acronyms">
<!-- How binding? -->
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
I don't quite understand what you mean, but if you want to bind properties to columns, you can do this:
<DataGrid ItemsSource="{Binding Words}">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
</DataGrid.Columns>
</DataGrid>
Now the "Name" of each element will be added to this column. But if you want to add more than one property to a column, you'll have to add DataGridTemplateColumn
:
<DataGrid ItemsSource="{Binding Words}">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTemplateColumn Header="Synonyms and Acronyms">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
//There will be all logic. For example
//<TextBlock Text="{Binding Synonyms}"/>
//<TextBlock Text="{Binding Acronyms}"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
But sorry, I don't know what would happen if the column is to pass a collection of strings (as in your example). And I'm sorry if I misunderstood you
Your updated code still has a binding mistake, you need to add this to the bottom of your constructor:
this.DataContext = this;
The main problem with the code you've posted is that you're trying to merge your Synonym and Acronym arrays into a single list, which is really something that should be done before passing the data to your view layer. I'll use a converter to do this task after-the-fact, but keep in mind that's it's something you should probably fix up later.
In any case what you're trying to achieve is relatively straightforward. Use a DataGridTemplateColumn to declare a custom column type and set its content to an ItemsControl
(its default panel is a vertical StackPanel). Each element of the stack panel is a MeaningGroup
, so just use another ItemsControl to render your tags, and set its ItemsPanelTemplate
to be a horizontal layout instead (I've used a WrapPanel). Put all that together and you get this:
<Window.Resources>
<behaviors:ListUnionConverter x:Key="ListUnionConverter" />
<DataTemplate x:Key="TagTemplate">
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Margin="5" Padding="5">
<TextBlock Text="{Binding}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="TagListTemplate">
<ItemsControl ItemTemplate="{StaticResource TagTemplate}">
<ItemsControl.ItemsSource>
<MultiBinding Converter="{StaticResource ListUnionConverter}">
<Binding Path="Synonyms" />
<Binding Path="Acronyms" />
</MultiBinding>
</ItemsControl.ItemsSource>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
<DataTemplate x:Key="CellTemplate">
<ItemsControl ItemsSource="{Binding MeaningGroups}" ItemTemplate="{StaticResource TagListTemplate}" />
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{Binding Words}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTemplateColumn Header="Synonym and acronyms" IsReadOnly="True" CellTemplate="{StaticResource CellTemplate}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
You'll also need the code for the converter that I'm using to join the Synonymns and Acronyms into a single list. Again, you should either replace this with something more robust or, preferably, fix up your data structures to better match the view requirements:
Result:
public class ListUnionConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return (values[0] as IEnumerable<string>).Concat(values[1] as IEnumerable<string>).ToArray();
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
UPDATE: I just noticed the requirement for the colors to be different. You could also use a converter to do that if you absolutely had to, but that's a really messy solution. The correct way to implement this is with an intermediate view model and with both synonyms and acronyms merged into a single list.
the answer below solves this problem, but I will suggest another way. As said above, first you need to add DataContext = this
in your code-behide. Then just change the xaml markup as follows:
<Grid>
<DataGrid ItemsSource="{Binding Words}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTemplateColumn Header="Synonym and acronyms">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<ItemsControl ItemsSource="{Binding MeaningGroups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Synonyms}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" CornerRadius="5" Margin="5 5 0 0">
<TextBlock Margin="3" Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Acronyms}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" CornerRadius="5" Background="Red" Margin="5 5 0 0">
<TextBlock Margin="3" Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.