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無法正常工作

回答

相關問題