使用XAML將控件添加到UserControl中的ItemsControl中

Question

我想編寫一個行爲有點像CommandBar的控件。
使用命令欄，你可以寫：

<CommandBar> 
    <CommandBar.PrimaryCommands> 
     <AppBarButton>B1</AppBarButton> 
     <AppBarButton>B2</AppBarButton> 
    </CommandBar.PrimaryCommands> 
</CommandBar> 

我的控制也有一種控制可XAML內添加的屬性。
像這樣：

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <local:MyControl> 
      <local:MyControl.LeftStuff> 
       <Button>L1</Button> 
       <Button>L2</Button> 
      </local:MyControl.LeftStuff> 
      <local:MyControl.MidStuff> 
       <Button>M1</Button> 
       <Button>M2</Button> 
      </local:MyControl.MidStuff> 
      <local:MyControl.RightStuff> 
       <Button>R1</Button> 
       <Button>R2</Button> 
      </local:MyControl.RightStuff> 
     </local:MyControl> 
    </Grid> 
</Page> 

到目前爲止，我想出了下面的用戶控件。
MyControl.xaml：

<UserControl 
    x:Class="TheApp.MyControl" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="using:App27" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    d:DesignHeight="300" 
    d:DesignWidth="400" 
    mc:Ignorable="d"> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <ItemsControl Grid.Column="0" ItemsSource="{x:Bind LeftStuff}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
     <ItemsControl Grid.Column="1" ItemsSource="{x:Bind MidStuff}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
     <ItemsControl Grid.Column="2" ItemsSource="{x:Bind RightStuff}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </Grid> 
</UserControl> 

MyControl.xaml.cs：

namespace TheApp 
{ 
    using System.Collections.ObjectModel; 
    using Windows.UI.Xaml; 
    using Windows.UI.Xaml.Controls; 

    public sealed partial class MyControl: UserControl 
    { 
     public MyControl() 
     { 
      this.InitializeComponent(); 
     } 

     public static readonly DependencyProperty LeftStuffProperty = 
      DependencyProperty.Register("LeftStuff", typeof(ObservableCollection<FrameworkElement>), typeof(MyControl), new PropertyMetadata(null)); 

     public ObservableCollection<FrameworkElement> LeftStuff 
     { 
      get { return (ObservableCollection<FrameworkElement>)GetValue(LeftStuffProperty); } 
      set { SetValue(LeftStuffProperty, value); } 
     } 

     public static readonly DependencyProperty MidStuffProperty = 
      DependencyProperty.Register("MidStuff", typeof(ObservableCollection<FrameworkElement>), typeof(MyControl), new PropertyMetadata(null)); 

     public ObservableCollection<FrameworkElement> MidStuff 
     { 
      get { return (ObservableCollection<FrameworkElement>)GetValue(MidStuffProperty); } 
      set { SetValue(MidStuffProperty, value); } 
     } 

     public static readonly DependencyProperty RightStuffProperty = 
      DependencyProperty.Register("RightStuff", typeof(ObservableCollection<FrameworkElement>), typeof(MyControl), new PropertyMetadata(null)); 

     public ObservableCollection<FrameworkElement> RightStuff 
     { 
      get { return (ObservableCollection<FrameworkElement>)GetValue(RightStuffProperty); } 
      set { SetValue(RightStuffProperty, value); } 
     } 
    } 
} 

這編譯並預期在設計中的MainPage呈現。

但是當我運行的代碼我得到這個異常：

類型的異常「Windows.UI.Xaml.Markup.XamlParseException」發生在App27.exe但在用戶代碼中沒有處理 WinRT信息：無法將類型'Windows.UI.Xaml.Controls.Button'的實例添加到類型爲'System.Collections.ObjectModel.ObservableCollection`1'的集合中。 [Line：16 Position：13] ...

那麼，怎麼了？

Answer 1

要回答這個問題我自己：

的依賴特性需要被初始化，以便XAML可以添加的元素。

public static readonly DependencyProperty ...StuffProperty = 
    DependencyProperty.Register(
     "...Stuff", 
     typeof(ObservableCollection<FrameworkElement>), 
     typeof(MyControl), 
     // The property needs to be initialized 
     new PropertyMetadata(new ObservableCollection<FrameworkElement>()) 
    );