如何创建动态多色TextBlock？(How to create a dynamic multi

如何创建动态多色TextBlock？(How to create a dynamic multi-colors TextBlock?)

我有一个DataGrid ，然后一列是多色TextBlcok 。

但是这个列数据会因其他人的观点而改变。

所以，我认为我需要设计一个ViewModel来绑定它。

现在，我混淆了如何将这个TextBlock创建到我的DataGrid列中。

喜欢：

现在，致电A和B是财产， 123和456是财产日期。

用户将更改属性A数据，如：

或者，用户将添加属性C新数据，如：

当然，也许清楚属性B数据，如：

所有属性都存在于模型中，但未在TextBlock上显示。 因此，如果它没有任何数据，它将在此列上不显示任何内容。

顺便说一句，用户需要复制此列的内容，因此我想使用TextBlock进行用户选择。

并绑定Run of TextBlock以获得不同颜色的单词。

也许这是一个UserControl并添加DataGridTemplateColumn.CellTemplate的DataGrid ，但是如何绑定和动态创建新的TextBlock Run ？

也许其他方法我现在不知道。

我觉得有些东西卡在我脑海里。

帮帮我！

I have a DataGrid, then one column is a multi-colors TextBlcok.

But this column data will change by others view.

So, I think I need design a ViewModel to binding it.

Now, I am confuse how to create this TextBlock into my DataGrid column.

like:

Now, Call the A and B are property, 123 and 456 are date of property.

And User will change data of property A maybe like:

Or, User will add new data of property C, like:

Sure, Maybe clear data of property B, like:

All properties exist in model, but is not show necessarily on TextBlock. So if it has no any data, it will show nothing on this column.

By the way, User need to copy this column's content, so I want to use TextBlock for user selectable.

And binding Run of TextBlock for difference color's word.

Maybe this is a UserControl and add in DataGridTemplateColumn.CellTemplate of DataGrid, but how to binding and dynamic create new Run of TextBlock?

Maybe others method I have no idea now.

I feel something is stuck in my head.

Help!

最满意答案

我试了一下。 它不是一个完整的解决方案，但它可以帮助您，并为您提供解决方案。 也许你可以从那里开始。 所以，我的代码在这里：

楷模：

public class DGCollection { public int ID { get; set; } public List<KeyValues> KeyValues { get; set; } } public class KeyValues { public string Key { get; set; } public string Value { get; set; } }

ViewModel：

public class MainWindowViewModel : INotifyPropertyChanged { public MainWindowViewModel() { DGCollections = new ObservableCollection<DGCollection>(); LoadData(); } private ObservableCollection<DGCollection> _DGCollections; public ObservableCollection<DGCollection> DGCollections { get { return _DGCollections; } set { _DGCollections = value; NotifyPropertyChanged("DGCollections"); } } private void LoadData() { KeyValues obj1 = new KeyValues { Key = "A", Value = "123" }; KeyValues obj2 = new KeyValues { Key = "B", Value = "456" }; KeyValues obj3 = new KeyValues { Key = "C", Value = "789" }; KeyValues obj4 = new KeyValues { Key = "D", Value = "101112" }; List<KeyValues> lst = new List<KeyValues>(); lst.Add(obj1); lst.Add(obj2); lst.Add(obj3); lst.Add(obj4); DGCollections.Add(new DGCollection { ID = 1, KeyValues = lst }); } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String info) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(info)); } }

XAML：

<Window.Resources> <DataTemplate x:Key="AItemTemplate"> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Foreground="Black" Text="{Binding Key}" Grid.Column="0"></TextBlock> <TextBlock Foreground="Gray" Text=" : " Grid.Column="1"></TextBlock> <TextBlock Foreground="Red" Text="{Binding Value}" Grid.Column="2"></TextBlock> </Grid> </DataTemplate> </Window.Resources> <Grid> <DataGrid x:Name="dG" ItemsSource="{Binding DGCollections}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Foreground="Black" Text="{Binding ID}"></TextBlock> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn Width="*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ItemsControl ItemsSource="{Binding KeyValues}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" ItemTemplate="{StaticResource AItemTemplate}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> </Grid>

我在这里尝试的是创建一个DataGridTemplateColumn。 在其中使用ItemsControl。 并为该ItemsControl分配了一个模板。 对于这种方法，您可能必须在模型中进行一些更改，或者必须更改我的示例中的绑定。 尝试一下，如果您需要任何进一步的帮助，请告诉我。

I have given it a try. It is not a complete solution, but it will help you and take you little forward towards your solution. Maybe you can take it ahead from there. So, Here my code goes:

Models:

public class DGCollection { public int ID { get; set; } public List<KeyValues> KeyValues { get; set; } } public class KeyValues { public string Key { get; set; } public string Value { get; set; } }

ViewModel :

public class MainWindowViewModel : INotifyPropertyChanged { public MainWindowViewModel() { DGCollections = new ObservableCollection<DGCollection>(); LoadData(); } private ObservableCollection<DGCollection> _DGCollections; public ObservableCollection<DGCollection> DGCollections { get { return _DGCollections; } set { _DGCollections = value; NotifyPropertyChanged("DGCollections"); } } private void LoadData() { KeyValues obj1 = new KeyValues { Key = "A", Value = "123" }; KeyValues obj2 = new KeyValues { Key = "B", Value = "456" }; KeyValues obj3 = new KeyValues { Key = "C", Value = "789" }; KeyValues obj4 = new KeyValues { Key = "D", Value = "101112" }; List<KeyValues> lst = new List<KeyValues>(); lst.Add(obj1); lst.Add(obj2); lst.Add(obj3); lst.Add(obj4); DGCollections.Add(new DGCollection { ID = 1, KeyValues = lst }); } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String info) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(info)); } }

XAML :

<Window.Resources> <DataTemplate x:Key="AItemTemplate"> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Foreground="Black" Text="{Binding Key}" Grid.Column="0"></TextBlock> <TextBlock Foreground="Gray" Text=" : " Grid.Column="1"></TextBlock> <TextBlock Foreground="Red" Text="{Binding Value}" Grid.Column="2"></TextBlock> </Grid> </DataTemplate> </Window.Resources> <Grid> <DataGrid x:Name="dG" ItemsSource="{Binding DGCollections}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Foreground="Black" Text="{Binding ID}"></TextBlock> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn Width="*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ItemsControl ItemsSource="{Binding KeyValues}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" ItemTemplate="{StaticResource AItemTemplate}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> </Grid>

What I tried here is to create a DataGridTemplateColumn. Used ItemsControl inside it. And assigned a template to that ItemsControl. For this approach, you may have to make few changes in your model or have to change bindings from my example. Give it a try and let me know if you need any further help on this.