数据模板内的 UWP 网格

Question

我有一个 Pivot，我在 Pivot.HeaderTemplate 中设置了 header，它基本上只显示 Names 本书。在我的 Pivot.ItemTemplate 中，我想显示在我的 .xaml.cs 中构建的 Grid，但由于 Grid 在我的 DataTemplate 中，我无法访问 Grid x:Name 后面的代码中。xaml.cs。 books 是 Collection 本书，其中包含 Name 和 Title

MainPage.xaml

<Pivot ItemsSource="{x:Bind books}">

<Pivot.HeaderTemplate>
    <DataTemplate x:DataType="local:Book">
        <TextBlock Text="{x:Bind Name}"/>
    </DataTemplate>
</Pivot.HeaderTemplate>

<Pivot.ItemTemplate>
    <DataTemplate>
        <Grid 
            x:Name="BooksGrid" 
            BorderBrush="Black" BorderThickness="1 1 0 0" 
            Margin="0 10 0 0>
        </Grid>
    </DataTemplate>
</Pivot.ItemTemplate>

现在我想访问 BooksGrid 后面的代码并实际创建 Grid

主页。xaml.cs

public MainPage()
    {

        this.InitializeComponent();
    }

 private void DrawGrid()
    {

            //create columns of Grid
            for (int i = 0; i < booksize.XProperties.Count + 1; i++)
            {
                BooksGrid.ColumnDefinitions.Add(new ColumnDefinition
                {

                });

            }

            BooksGrid.ColumnDefinitions[0].Width = GridLength.Auto;
        }  

     ....

已在 BooksGrid.ColumnDefinitions.Add(...) 处，我收到无法找到 BooksGrid 的错误。如果我不将 Grid 定义放在我的 DataTemplate 中以及我的 Pivot 之外，我的 DrawGrid 就可以工作。因此，当 Grid 在我的 DataTemplate

中时，MainPage.xaml.cs 找不到它

我读到解决方案可能是我必须在 DataTemplate 加载后立即访问我想要使用的 Grid instance。但我也不知道该怎么做。

编辑第一个解决方案的部分：

我也在另一种方法中使用 BooksGrid 主页.xaml.cs

private void DrawBooksFront(Front front)
    {
        int row;
        int column;
        column = booksize.XProperties.IndexOf(front.CustomProps[booksize.XLabel])+1;
        row = booksize.YProperties.IndexOf(front.CustomProps[booksize.YLabel])+1;
        Frame newFrame = new Frame();
        TaskBoardGrid.Children.Add(newFrame);
        Grid.SetColumn(newFrame, column);
        Grid.SetRow(newFrame, row);


    }

Answer 1

您无法访问 BooksGrid 的原因是因为它将为 books collection 中的每本书动态生成。因此，对于每本书都会生成 Grid。

选项 1： 您可以将 Loaded 事件添加到您的网格：

<Pivot x:Name="Pivot" ItemsSource="{x:Bind books}">
    <Pivot.HeaderTemplate>
        <DataTemplate x:DataType="local:Book">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </Pivot.HeaderTemplate>

    <Pivot.ItemTemplate>
        <DataTemplate>
            <Grid 
                BorderBrush="Black" BorderThickness="1,1,0,0" 
                Margin="0,10,0,0" Loaded="DrawGrid">
            </Grid>
        </DataTemplate>
    </Pivot.ItemTemplate>

在你后面的代码中：

    private void DrawGrid(object sender, RoutedEventArgs e)
    {
        Grid grid = sender as Grid;
        // Load your grid..
    }

编辑 - 选项 2： 如果您想以不同的方式从代码隐藏访问您的网格（如您编辑中建议的那样），您可以随时执行以下操作：

private void DrawBooksFront(Front front)
{
        // Loop through the pivot's items and get the content from each item's ContentTemplate.
        foreach (var item in Pivot.Items)
        {
            PivotItem pivotItem = Pivot.ContainerFromItem(item) as PivotItem;
            Grid grid = pivotItem.ContentTemplate.LoadContent() as Grid;
            // Do something with the grid.
        }
}

Answer 2

如果您的目标是在 PivotItem 中以类似网格的方式显示书页预览 [如下图]，那么您最好将 GridView 放在Pivot.ItemTemplate 的 DataTemplate 并使用数据绑定自动显示这些页面，这样就无需在 xaml.cs 中编写您显示的代码。

请分享有关您的应用程序的更多详细信息（您得到的内容以及最终结果应该是什么样子）以便我们更好地帮助您。

数据模板内的 UWP 网格

UWP Grid inside Datatemplate

c#

xaml

computer-science

pivot

uwp