Databinding to WrapPanel无法正常工作

我试图用我自己的用户控件集合填充WrapPanel。Databinding to WrapPanel无法正常工作

子控件：

<UserControl x:Class="MyApplication.StockMappings.StockView" 
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid Width="140" Height="80"> 
     <Border CornerRadius="6" BorderBrush="Black" BorderThickness="2" > 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="0.6*"/> 
        <RowDefinition Height="0.4*"/> 
       </Grid.RowDefinitions> 
       <TextBlock Grid.Row="0" FontSize="18" FontWeight="Bold"> 
        <Label Content="{Binding Path=ID}"/> 
       </TextBlock> 
       <TextBlock Grid.Row="1" FontSize="12" FontWeight="Bold"> 
        <Label Content="{Binding Path=StockName}"/> 
       </TextBlock> 
      </Grid> 
     </Border> 
    </Grid> 
</UserControl>

CS文件：

<Window x:Class="MyApplication.StockMappings.TestWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:MyApplication.StockMappings" 
     Title="TestWindow" Height="300" Width="300"> 
    <Grid> 
     <ItemsControl Name="Stocks" ItemsSource="{Binding AllStocks}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel Orientation="Horizontal"/>       
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <local:StockView/>            
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Grid> 
</Window>

和C＃代码再次：

public partial class TestWindow : Window 
{ 
    public TestWindow() 
    { 
     InitializeComponent(); 
     var stocks = new[] 
     { 
      new StockView() { ID = "M0", StockName = "abc"}, 
      new StockView() { ID = "M1", StockName = "def"}, 
     }; 

     Stocks.DataContext = new Test() 
     { 
      AllStocks = stocks.ToList() 
     }; 
    } 
}

namespace MyApplication.StockMappings 
{ 
    /// <summary> 
    /// Interaction logic for StockView.xaml 
    /// </summary> 
    public partial class StockView : UserControl 
    { 
     public StockView() 
     { 
      InitializeComponent(); 
     } 

     public string ID 
     { 
      get; 
      set; 
     } 

     public string StockName 
     { 
      get; 
      set; 
     } 
    } 
}

最后，与保鲜面板窗口

的Test类（子数据的容器）是非常简单的：

public class Test 
{ 
    public List<StockView> AllStocks 
    { 
     get; 
     set; 
    } 
}

最后，结果是：

screenshot

所有边界是空白。不会显示ID和StockName。

我在做什么错？

我已确认（加上空属性）StockView控制采取从Test对象ID值，而不是从列表AllStocks孩子。但为什么？我有没有定义ItemTemplate？那么，那是什么？

来源

2013-04-29 Konrad Morawski

'我做错了什么？' - 一切。用户界面不适合存储数据。创建一个合适的Model或ViewModel来存储这些数据并将你的控件绑定到那个数据上。也让UI创建UI，不要自己实例化UI元素。 – 2013-04-29 14:48:43

你缺少的是一个适当的视图模型项目类，它保存你的数据。这不应与视图对象混淆，例如您的StockView。

首先，从StockView控件中删除ID和StockName属性。这些属性将移至数据项类。

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

其次，创建一个StockItem数据项级视图模型，并且具有AllStocks财产（或只是把它作为Test你已经做了）一个ViewModel类。

public class StockItem 
{ 
    public string ID { get; set; } 
    public string StockName { get; set; } 
} 

public class ViewModel 
{ 
    public ObservableCollection<StockItem> AllStocks { get; set; } 
}

最后，将您的MainWindow的DataContext设置为ViewModel类的一个实例。

public MainWindow() 
{ 
    InitializeComponent(); 

    var vm = new ViewModel { AllStocks = new ObservableCollection<StockItem>() }; 
    vm.AllStocks.Add(new StockItem { ID = "M0", StockName = "abc" }); 
    vm.AllStocks.Add(new StockItem { ID = "M1", StockName = "def" }); 

    DataContext = vm; 
}

在情况下，数据项可以被添加到AllStocks收集后进行修改，StockItem类必须实现INotifyPropertyChanged接口。

来源

2013-04-29 15:25:33 Clemens

所有的答案都很有用，但我接受这个作为最全面的答案。非常感谢 – 2013-04-30 10:11:49

那么，StockView usercontrol的DataContext应该是它自己的类后面的代码。

这应该使它工作！你的用户控件的

public StockView() 
{ 
    InitializeComponent(); 
    this.DataContext = this; 
}

来源

2013-04-29 14:56:13

集datacontent例如代码：

public StockView() 
     { 
      InitializeComponent(); 
      DataContext = this; 
     }

来源

2013-04-29 14:56:55 user2136076

我看到彼得更快:-) – user2136076 2013-04-29 14:59:11

DataTemplates模板数据，绑定到一个列表控件，作为对照，可直接添加ItemTemplate将被忽略，你应该在输出中得到关于这个的警告。因为没有DataContext设置为UserControls，您应该将属性从UserControl移动到模型类并添加实例。另外我会建议您不要设置 UserControl。

来源

2013-04-29 15:22:18

Databinding to WrapPanel无法正常工作

回答

相关问题