ItemsControl 显示类名

Question

此应用根据需要显示集合的类名，而不是文本框。我已经阅读了其他问题，但无法弄清楚我错过了什么。我有一个数据上下文，我作为一个项目源绑定到集合，并且我添加了一个项目。我想要的只是将我的视图模型'DrawBoxViewModel'中的集合'Boxes'绑定到项目源，并让它将单个项目显示为文本框。感谢所有帮助。

首先是我的 XAML：

<Page
x:Class="BoxMaker2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BoxMaker2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:BoxMaker2.ViewModels"
mc:Ignorable="d">

<Page.Resources>
    <vm:DrawBoxViewModel x:Key="DrawBoxViewModel"/>
</Page.Resources>
<Canvas DataContext="{Binding Source={StaticResource DrawBoxViewModel}}">
    <ItemsControl ItemsSource="{Binding Boxes}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Width="350" Height="600" Background="AliceBlue"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.Resources>
            <DataTemplate x:DataType="vm:Box" x:Key="test">
                <VariableSizedWrapGrid>
                    <TextBox Background="White" 
                             Text="{x:Bind Data}"
                             Width="100"
                             Height="100"/>
                    <VariableSizedWrapGrid.RenderTransform>
                        <TranslateTransform X="{Binding LeftCanvas}" Y="{Binding TopCanvas}"/>
                    </VariableSizedWrapGrid.RenderTransform>
                </VariableSizedWrapGrid>
            </DataTemplate>
        </ItemsControl.Resources>
    </ItemsControl>
</Canvas>

现在是我的视图模型：

namespace BoxMaker2.ViewModels
{
public class DrawBoxViewModel
{
    #region fields

    private ObservableCollection<Box> _boxes;

    #endregion

    #region properties

    public ObservableCollection<Box> Boxes { get { return this._boxes; } }

    #endregion

    #region constructors

    public DrawBoxViewModel()
    {
        this._boxes = new ObservableCollection<Box>();
        _boxes.Add(new Box() { Data = "hello!", LeftCanvas = 200, TopCanvas = 200 });
    }

    #endregion

}

public class Box : INotifyPropertyChanged
{
    private int _generation;
    public int Generation
    {
        get { return _generation; }
        set { _generation = value; OnPropertyChanged("Generation"); }
    }

    private int _childNo;
    public int ChildNo
    {
        get { return _childNo; }
        set { _childNo = value; OnPropertyChanged("ChildNo"); }
    }

    private Box _parentBox;
    public Box ParentBox
    {
        get { return _parentBox; }
        set { _parentBox = value; OnPropertyChanged("ParentBox"); }
    }

    private List<Box> _childrenBox;
    public List<Box> ChildrenBox
    {
        get { return _childrenBox; }
        set { _childrenBox = value; OnPropertyChanged("ChildrenBox"); }
    }

    private string _data;
    public string Data
    {
        get { return _data; }
        set
        {
            _data = value;
            OnPropertyChanged("Data");
        }
    }

    private double _topCanvas;
    public double TopCanvas
    {
        get { return _topCanvas; }
        set
        {
            _topCanvas = value;
            OnPropertyChanged("TopCanvas");
        }
    }

    private double _leftCanvas;
    public double LeftCanvas
    {
        get { return _leftCanvas; }
        set
        {
            _leftCanvas = value;
            OnPropertyChanged("LeftCanvas");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

}

Answer 1

我不确定您要达到的目标，但我在您的代码中发现了一些问题。

1. 您应该将您的 VM 分配给 Page 的 DataContext 直接。

   <Page.DataContext>
       <vm:DrawBoxViewModel />
   </Page.DataContext>
   

   完成此操作后，您现在可以从您的Canvas 中删除 DataContext="{Binding Source={StaticResource DrawBoxViewModel}}"。

2. 将<ItemsControl.Resource> 替换为 <ItemsControl.ItemTemplate> 并删除 x:Key="test"，假设您要显示多个 用户界面上的TextBoxes。 DataTemplate 内的Resource 你 在您通过它的键引用它之前，定义不会做任何事情。我不 认为你真的想要这里。

3. 您应该使用x:Bind 进行X 和Y 绑定

   <TranslateTransform X="{x:Bind LeftCanvas}"
                       Y="{x:Bind TopCanvas}" />
   

4. 您的Boxes 收藏可以简化如下

   #region properties
   
   public ObservableCollection<Box> Boxes { get; } = new ObservableCollection<Box>();
   
   #endregion
   
   #region constructors
   
   public DrawBoxViewModel()
   {
       Boxes.Add(new Box() { Data = "hello!", LeftCanvas = 0, TopCanvas = 200 });
   }
   
   #endregion
   

希望这会有所帮助！

Answer 2

您的 Items 控件不知道要使用哪个数据模板。当前，您的视图模型有一个通过 x:DataType="vm:Box" 关联的模板，该模板被定义为项目控件中的资源。

问题在于通用 Windows 平台无法识别与数据类型关联的模板。所以即使有模板，控件在渲染视图模型集合时也不知道如何找到它。

基于绑定类型的模板自动解析是 WPF 的一项功能，在 UWP 中不可用。

这意味着在 WPF 中，您可以通过数据模板的 x:DataType="Object Type" 属性将数据模板与类/对象相关联（这就是您所做的）。当集合被绑定时，渲染引擎会自动将集合中的各个项目与其各自的模板进行匹配。

这非常强大，因为如果您的集合有许多不同类型的盒子（或从 DrawBoxViewModel 继承的东西），您可以通过简单地定义一个模板来以不同的方式呈现每个项目类型。好吧，这不再是了。微软在 UWP 中破坏了该功能。

长话短说 - 将模板移至页面资源集合。给它一个键，例如：

<Page.Resources>
   <vm:DrawBoxViewModel x:Key="DrawBoxViewModel"/>
   <DataTemplate x:Key="test">
      <VariableSizedWrapGrid>
          <TextBox Background="White" 
              Text="{x:Bind Data}"
              Width="100"
              Height="100"/>
             <VariableSizedWrapGrid.RenderTransform>
                <TranslateTransform X="{Binding LeftCanvas}" Y="{Binding TopCanvas}"/>
             </VariableSizedWrapGrid.RenderTransform>
        </VariableSizedWrapGrid>
     </DataTemplate>
</Page.Resources>

在您的项目控件中引用模板，如下所示： <ItemsControl ItemsSource="{Binding Boxes} ItemTemplate={StaticResource test} ">