爲什麼我不能把這個網格放在我的按鈕上？

Question

我需要我的按鈕在特定的佈局上有幾段文字，所以我試圖在我的按鈕上放置一個網格來組織信息。

我的問題是，雖然我可以讓未修改的按鈕出現，但網格永遠不會出現在頂部或頂部。

這裏的代碼名爲.xaml：

<!-- ...other code up above... --> 

<ItemsControl x:Name="btnList"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid Background="Green"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="3*" /> 
        <RowDefinition Height="2*" /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock Grid.ColumnSpan="3" 
          Grid.Row="0" 
          Grid.Column="0" 
          HorizontalAlignment="Center" 
          Margin="15" 
          Text="Test Text 1" /> 

       <TextBlock Grid.Row="1" 
          Grid.Column="0" 
          HorizontalAlignment="Center" 
          Text="Test Text 2" /> 

       <TextBlock Grid.Row="1" 
          Grid.Column="1" 
          HorizontalAlignment="Center" 
          Text="Test Text 3" /> 

       <TextBlock Grid.Row="1" 
          Grid.Column="2" 
          HorizontalAlignment="Center" 
          Text="Test Text 4" /> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

下面是相關.xaml.cs代碼：

public THINGSelectFlyout() 
    { 
     this.InitializeComponent(); 

     foreach (XTHING_IndexItem indexItem in DataStore.Instance.THINGsFoundOnTap) 
     { 
      Button button = new Button() 
      { 
       Name = indexItem.cGuid.ToString("N"), 
       Content = indexItem.cName, 
       Style = Application.Current.Resources["BigButtons"] as Style 
      }; 
      button.Click += THINGButton_Click; 
      btnList.Items.Add(button); 
     } 

這樣當運行按鈕出現（默認的背景色，藍色）和擁有在.xaml.c文件中提供給他們的內容。作爲一個方面說明，我正在修改別人的代碼和長話短說我不能將整個按鈕構造移動到.xaml文件中;其他許多事物都期望它在那裏。

Answer 1

難道這不就是說，在摸索了幾個小時之後，我在這裏尋求幫助的那一刻，然後我在我的下一個在線搜索中絆倒了答案？

最好在.xaml.cs文件中創建網格，而不是.xaml文件。也許你可以讓.xaml與ViewModel一起工作，但是如果這種模式運行良好，我不會再創建一個新的視圖模型。

新的.xaml代碼：

<!-- ...other code up above... --> 
    <ItemsControl x:Name="btnList" ItemsSource="{Binding Items}"/> 

新.xaml.cs代碼：

public THINGSelectFlyout() 
    { 
     this.InitializeComponent(); 

     foreach (XTHING_IndexItem indexItem in DataStore.Instance.THINGsFoundOnTap) 
     { 

      Button button = new Button() 
      { 
       Name = indexItem.cGuid.ToString("N"), 
       Style = Application.Current.Resources["BigButtons"] as Style 
      }; 

      Grid textGrid = new Grid(); 
      // Define Grid rows 
      RowDefinition rowDef1 = new RowDefinition(); 
      RowDefinition rowDef2 = new RowDefinition(); 
      RowDefinition rowDef3 = new RowDefinition(); 
      rowDef1.Height = new GridLength(20); 
      rowDef2.Height = new GridLength(22); 
      rowDef3.Height = new GridLength(25); 
      textGrid.RowDefinitions.Add(rowDef1); 
      textGrid.RowDefinitions.Add(rowDef2); 
      textGrid.RowDefinitions.Add(rowDef3); 
      // Define Grid columns 
      ColumnDefinition colDef1 = new ColumnDefinition(); 
      ColumnDefinition colDef2 = new ColumnDefinition(); 
      colDef1.Width = new GridLength(150); 
      colDef2.Width = new GridLength(105); 
      textGrid.ColumnDefinitions.Add(colDef1); 
      textGrid.ColumnDefinitions.Add(colDef2); 

      // Set indexItem text 
      TextBlock indexText = new TextBlock(); 
      indexText.Text = indexItem.cName; 
      indexText.TextAlignment = 0; 
      textGrid.Children.Add(indexText); 
      Grid.SetColumnSpan(indexText, 2); 
      Grid.SetRow(indexText, 1); 

      // Set assignment text 
      TextBlock assgnText = new TextBlock(); 
      assgnText.Text = " Assgn: " + indexItem.cAssignedTo; 
      indexText.TextAlignment = 0; 
      textGrid.Children.Add(assgnText); 
      Grid.SetRow(assgnText, 2); 

      // Set owner text 
      TextBlock ownerText = new TextBlock(); 
      ownerText.Text = "Owner: " + indexItem.cOwnedBy; 
      indexText.TextAlignment = 0; 
      textGrid.Children.Add(ownerText); 
      Grid.SetRow(ownerText, 2); 
      Grid.SetColumn(ownerText, 1); 

      button.Content = textGrid; 

      button.Click += THINGButton_Click; 
      btnList.Items.Add(button); 
     } 
    } 

唯一的缺點，這是我不知道怎麼去放下*運營商自動調整行和列的尺寸，比如.xaml允許，但它做我需要的。

Answer 2

綁定你的ItemsControl到屬於您的視圖模型的列表：

<ItemsControl x:Name="btnList" ItemsSource="{Binding Items}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
     <Button> 
      <Button.Content> 
        <!-- Place your Grid Xaml here --> 
      </Button.Content> 
     </Button> 
    </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

添加ObservableCollection到你的視圖模型，收集將是DataStore.Instance.THINGsFoundOnTap類型的列表。

因此，在你的ViewModel，添加一個新的實例屬性：

private ObservableCollection<YourType> _items = new ObservableCollection<YourType>(); 

public ObservableCollection<YourType> Items 
{ 
    get{ return _items; } 
} 

然後修改您的視圖，以便您要添加您的視圖模型，通知您必須設置視圖的DataContext向視圖模型：

var viewModel = new YourViewModel(); //create your view model 
DataContext = viewModel; // set the views DataContext 

foreach (XTHING_IndexItem indexItem in DataStore.Instance.THINGsFoundOnTap) 
{ 
    viewModel.Items.Add(indexItem); 
} 

最後，修改您的視圖Items收集綁定到單個項目中的ViewModels：

<TextBlock Grid.Row="1" 
    Grid.Column="0" 
    HorizontalAlignment="Center" 
    Text="{Bind cName}" /> 

您可以根據需要處理單擊事件或命令。