ItemsControl顯示類名

Question

此應用程序根據需要顯示集合的類名而不是文本框。 我已經閱讀了其他問題，但無法弄清楚我錯過了什么。 我有一個datacontext，我將這個集合綁定為itemource，並且我添加了一個項目。 我想要的是將我的視圖模型'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>

現在我的viewmodel：

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" ，假設您要在UI上顯示多個TextBox 。 您定義的Resource的DataTemplate在您通過其鍵引用它之前不會執行任何操作。 我不認為你真的想要這個。

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"與其關聯的模板，該模板被定義為items控件中的資源。

問題是Universal Windows Platform無法識別與數據類型關聯的模板。 因此，即使存在模板，控件也不知道在渲染視圖模型集合時如何找到它。

基於綁定類型自動解析模板是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>

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