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>

向您的ViewModel添加ObservableCollection，该集合将是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允许的行和列维度，但它可以满足我的需要。

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

2 个答案: