在 ItemsControl 中添加 TextBlock

Question

我想使用 Caliburn micro 在我的 ItemsControl 中添加带有文本的 TextBlock 到我的 DataTemplate。

<ItemsControl x:Name="Images"  Grid.Column="1" Grid.ColumnSpan="3">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Height="180" Width="180" Margin="10">
                    <TextBlock Text="{Binding Names}"/>
                    <Grid.Background>
                        <ImageBrush Stretch="Uniform" ImageSource="{Binding}" 
                            ViewboxUnits="RelativeToBoundingBox"    
                            local:ViewBoxTracking.Source="{Binding ElementName=MainImage}" />
                    </Grid.Background>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

我的 C# 来自 ViewModel class 的代码如下所示：

    public ObservableCollection<ImageSource> Images { get; set; } = new ObservableCollection<ImageSource>();
    public ObservableCollection<string> Names { get; set; } = new ObservableCollection<string>();

    this.Names.Add("text1");
    this.Names.Add("text2");
    this.Names.Add("text3");
    this.NotifyOfPropertyChange(() => this.Names);

    this.Images.Add(bmpimage1);
    this.Images.Add(bmpimage2);
    this.Images.Add(bmpimage3);
    this.NotifyOfPropertyChange(() => this.Images);

上面的代码没有出现：

我想以编程方式将 TextBlocks 附加到 Images。我希望它看起来像这样：

如何使用 Caliburn.Micro 的绑定将 Text 从 DataTemplate 从 ItemsControl 添加到 TextBlocks？

Answer 1

您应该使用单一来源集合。 Images 应该 return 一个 ObservableCollection<YourType> 其中 YourType 有一个 ImageSource 属性和一个 string 属性。 YourType 可能是自定义 class 或 Tuple<string, ImageSource>:

public ObservableCollection<Tuple<string, ImageSource>> Images { get; set; } = new ObservableCollection<Tuple<string, ImageSource>>();
...
this.Images.Add(Tuple.Create("text1", bmpimage1));
this.NotifyOfPropertyChange(() => this.Images);

然后您可以绑定到 ItemTemplate:

中的两个属性

<TextBlock Text="{Binding Item1}"/>

或

<TextBlock x:Name="Item1"/>

Answer 2

如果您使用的是 Caliburn Micro，那么您应该考虑 "buying in" 基于约定的绑定机制。 https://caliburnmicro.com/documentation/conventions

这将为您即时创建绑定。

对于命名控件，它会在数据上下文中查找具有匹配名称的属性，并在该控件的默认值属性上创建绑定。

文本块将是文本，我认为图像是图像源。

因此具有 public 属性的 class 比元组代码更少。因为我认为这不适用于元组。

如果您使用 rowviewmodels 的 observablecollection，其中 rowviewmodel 是具有 public 属性 Img 和 Txt 的 class，则以下简化标记：

    <StackPanel>
        <Image Name="Img"/>
        <TextBlock Name="Txt"/>
    </StackPanel>

只要您实现了 Caliburn micro 的预期部分，就应该看到图像和文本块绑定。

同样，您collection的itemssource的绑定。

在 ItemsControl 中添加 TextBlock

Adding TextBlock in ItemsControl

c#

wpf

xaml

caliburn.micro