将自定义用户控件的 StackPanel 绑定到自定义类的 ObservableCollection

Question

我有一个名为 NextBestActions 的 ObservableCollection'' NextBestActions，其中 NextBestAction 是：

[TypeConverter(typeof(NextBestActionTypeConverter))]
public class NextBestAction : IDisposable
{
    public bool isDismissable, dismissed, completed;
    public NextBestActionType type;
    public string title, description;

    public void Dispose()
    {
        this.Dispose();
    }

    public NextBestAction()
    {

    }

    public NextBestAction(string title, string description)
    {
        this.title = title;
        this.description = description;
    }

    public static NextBestAction Parse(Card card)
    {
        if (card == null)
        {
            return new NextBestAction();
        }

        return new NextBestAction(card.Title.Text, card.Description.Text);
    }
}

我也有自己的 UserControl，叫做 Card，其中 Card 是：

public partial class Card : UserControl
{
    public Card()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    public Card(string title, string description)
    {
        InitializeComponent();
        this.DataContext = this;
        this.Title.Text = title;
        this.Description.Text = description;
    }

    public static Card Parse(NextBestAction nextBestAction)
    {
        if (nextBestAction == null)
        {
            return new Card();
        }

        return new Card(nextBestAction.title, nextBestAction.description);
    }
}

使用以下 XAML：

<UserControl x:Class="AdvancedTeller.Card"
         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:local="clr-namespace:AdvancedTeller"
         mc:Ignorable="d" 
         d:DesignWidth="300" Background="White" BorderBrush="#FF333333" VerticalContentAlignment="Top" Width="400">
<Grid Margin="10" VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Name="Title" Grid.Column="1" Grid.Row="0" FontSize="18.667" Margin="3"/>
    <TextBlock Name="Description"  Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" TextWrapping="Wrap" Margin="3"/>
</Grid>

最后，我为 NextBestAction 定义了一个 TypeConverter 为

public class NextBestActionTypeConverter : TypeConverter
{
    // Override CanConvertFrom to return true for Card-to-NextBestAction conversions. 
    public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
    {
        if (sourceType == typeof(Card))
        {
            return true;
        }

        return base.CanConvertFrom(context, sourceType);
    }

    // Override CanConvertTo to return true for NextBestAction-to-Card conversions. 
    public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
    {
        if (destinationType == typeof(Card))
        {
            return true;
        }

        return base.CanConvertTo(context, destinationType);
    }

    // Override ConvertFrom to convert from a Card to an instance of NextBestAction. 
    public override object ConvertFrom(ITypeDescriptorContext context, System.Globalization.CultureInfo culture, object value)
    {
        Card card = value as Card;

        if (card != null)
        {
            try
            {
                return NextBestAction.Parse(card);
            }
            catch (Exception e)
            {
                throw new Exception(String.Format("Cannot convert '{0}' ({1}) because {2}", value, value.GetType(), e.Message), e);
            }
        }

        return base.ConvertFrom(context, culture, value);
    }

    // Override ConvertTo to convert from an instance of NextBestAction to Card. 
    public override object ConvertTo(ITypeDescriptorContext context, System.Globalization.CultureInfo culture, object value, Type destinationType)
    {
        if (destinationType == null)
        {
            throw new ArgumentNullException("destinationType");
        }

        //Convert Complex to a string in a standard format.
        NextBestAction nextBestAction = value as NextBestAction;

        if (nextBestAction != null && this.CanConvertTo(context, destinationType) && destinationType == typeof(Card))
        {
            try
            {
                return Card.Parse(nextBestAction);
            }
            catch (Exception e)
            {
                throw new Exception(String.Format("Cannot convert '{0}' ({1}) because {2}", value, value.GetType(), e.Message), e);
            }
        }

        return base.ConvertTo(context, culture, value, destinationType);
    }
}

我正在尝试将 NextBestActions 绑定到 StackPanel，并强制 NextBestActions 在 UI 中显示为卡片。

到目前为止，我已经明白我至少需要这个

<StackPanel Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="50" >
    <ItemsControl Name="NextBestActionItems" ItemsSource="{Binding NextBestActions}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <AdvancedTeller:Card />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

代码编译并运行没有任何问题，并且为 ObservableCollection 中的每个项目创建并在 StackPanel 中可见的卡片，但是，每个卡片的标题和描述都是空白的，并且不会获取其各自 NextBestAction 的数据。

我觉得我已经完成了 90% 的工作。我将不胜感激任何帮助。谢谢！

更新/编辑 1：目前未调用/命中 NextBestActionTypeConverter。如果我从 XAML 中删除 ItemsControl.ItemTemplate 定义，则调用 NextBestActionTypeConverter，但 destinationType 为“字符串”。我正在尝试强制/设置 ItemsControl 以了解项目将被表示为卡片。

更新/编辑 2（答案）：这是答案的 sn-ps：

// Override ConvertTo to convert from an instance of NextBestAction to Card. 
    public override object ConvertTo(ITypeDescriptorContext context, System.Globalization.CultureInfo culture, object value, Type destinationType)
    {
        if (destinationType == null)
        {
            throw new ArgumentNullException("destinationType");
        }

        //Convert Complex to a string in a standard format.
        NextBestAction nextBestAction = value as NextBestAction;

        if (nextBestAction != null && this.CanConvertTo(context, destinationType) && destinationType == typeof(Card))
        {
            try
            {
                return new Card();
            }
            catch (Exception e)
            {
                throw new Exception(String.Format("Cannot convert '{0}' ({1}) because {2}", value, value.GetType(), e.Message), e);
            }
        }

        return base.ConvertTo(context, culture, value, destinationType);
    }

和

public partial class Card : UserControl
{
    public Card()
    {
        InitializeComponent();
    }
}

和

<UserControl x:Class="AdvancedTeller.Card"
         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:local="clr-namespace:AdvancedTeller"
         mc:Ignorable="d" 
         d:DesignWidth="300" Background="White" BorderBrush="#FF333333" VerticalContentAlignment="Top" Width="400">
<Grid Margin="10" VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Name="Title" Grid.Column="1" Grid.Row="0" FontSize="18.667" Margin="3" Text="{Binding Title}"/>
    <TextBlock Name="Description"  Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" TextWrapping="Wrap" Margin="3" Text="{Binding Description}"/>
</Grid>

Answer 1

我可以看到您的代码中有一些潜在的问题点。

首先，您似乎没有完整的属性，get; set; 访问器方法是在您的 NextBestAction 对象中为 Title 和 Description 定义的。

如果我没记错的话，WPF 的绑定系统需要带有 get/set 访问器的完整属性，并且不会绑定到没有它们的字段。

所以

public string title, description;

应该变成

public string Title { get; set; }
public string Description { get; set; }

另一个潜在问题可能是您没有在Card UserControl 中绑定标题/描述文本框的 .Text 属性。

因此，假设您没有使用基于 .Name 属性（如 Caliburn Micro）自动创建绑定的框架，此代码

<TextBlock Name="Title" ... />
<TextBlock Name="Description" ... />

应该是

<TextBlock Name="Title" Text="{Binding Title}" ... />
<TextBlock Name="Description" Text="{Binding Description}" ... />

另外，我很确定绑定是区分大小写的，因此您要确保您的 Bindings（或 Name 属性，如果使用 Caliburn Micro）的大小写与您的 Properties 的大小写匹配。

最后，每当我看到UserControl 硬编码它是.DataContext，我的脑海中就会响起警钟。 UserControls 不应该这样做。他们应该从使用控件的任何代码中获取他们的 DataContext，而不应该创建自己的。删除以下对Card UserControl 中的.DataContext 进行硬编码的代码行，然后它将使用NextBestActions 集合中的任何值。

public Card()
{
    InitializeComponent();
    this.DataContext = this; // Bad!
}

public Card(string title, string description)
{
    InitializeComponent();
    this.DataContext = this; // Bad!
    this.Title.Text = title; // Should be replaced with bindings as above
    this.Description.Text = description; // Should be replaced with bindings as above
}

（作为旁注，我不知道你在用那个 TypeConverter 做什么:) 它通常用于将一种类型转换为另一种类型，例如将字符串 "Red" 更改为 SolidColorBrush 和 @987654341当您输入<StackPanel Background="Red" /> 之类的内容时，@ 设置为红色。我看不出它与您当前的代码有什么用，建议您完全摆脱它，除非您出于某种特定原因需要它。）