为什么我不能把这个网格放在我的按钮上？

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

将您的 ItemsControl 绑定到属于您的 ViewModel 的列表：

<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 添加到您的 ViewModel，该集合将是 DataStore.Instance.THINGsFoundOnTap 类型的列表。

所以在您的 ViewModel 中，添加一个新实例属性:

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

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

然后修改您的视图，以便添加您的 ViewModel，注意您必须将视图 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);
}

最后，修改您的视图以绑定到 ViewModels Items 集合中的单个项目：

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

您可以任意处理点击事件或命令。

Answer 2

这不就是在摸索几个小时之后，当我在这里寻求帮助的那一刻，然后我在下一次在线搜索中偶然发现了答案吗？

最好在 .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 允许的那样，但它可以满足我的需要.

为什么我不能把这个网格放在我的按钮上？

Why can't I put this grid on my button?

c#

winrt-xaml