Question

我正在为UWP使用syncfusion控件。我在他们的示例应用程序中看到的一个功能是在整页上显示数据网格。

像这样的东西

点击后，页面如下所示

我很确定这不是应用程序的完整模式视图。点击按钮后，它也会隐藏导航抽屉和左侧面板。

有人可以告诉我们该怎么办？提前谢谢。

Answer 1

我不太了解Syncfusion，但我可以描述一下如何实现它！这似乎是 Navigation View 或 Master/Details 导航设计模式（我将它们链接到各自的文档页面）。无论哪种方式，设计模式通常具有以下结构：

顶部框架
首页
SplitView（或NavigationView）
帧
内容页面
内容

基本上，数据网格通常位于页面上。该页面显示在SplitView或NavigationView的内容区域中的框架中，该框架位于顶层页面上，该页面直接显示在应用程序窗口的顶层框架中。

＆＃34;弹出＆＃34;效果，在导航抽屉上显示数据网格可能是一些巧妙的技巧继续操作子页面，以及它们显示的帧。所以，让我们来看看如何实现这种效果，给定上述有关导航设计模式结构的信息。

数据网格本身应该放在它自己的页面上，我们假设它被称为＆＃34; DataGridPage＆＃34;对于以下代码示例（请注意，为清楚起见，已省略页面的属性）：

<Page>
    <!-- The data grid, or whatever content here -->
</Page>

我们实际上在上面列出的表中添加了两个图层;内容页面上有一个框架，在该框架中是一个页面，上面有数据网格。那么，你的内容页面＆＃34;在上面的列表中看起来像这样：

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition >
            <RowDefinition Height="*"></RowDefinition >
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <!-- The bread-crumb, search box, and pop-out button are all in here -->
        </Grid>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0">
                <!-- The "left panel" here -->
            </Grid>

            <Frame Name="MyFrame"
                   Grid.Column="1"></Frame>
    </Grid>
</Page>

然后在你的＆＃34;内容页面＆＃34;的构造函数中; （我假设是C＃，但VB的逻辑是相同的）：

public ContentPage()
{
    this.InitializeComponent();

    // You are telling the frame to display your page with the data grid on it.
    // If you don't ever issue a different "Frame.Navigate" statement on this page,
    //    then it will statically display your data grid as if it was on the same
    //    page.
    this.MyFrame.Navigate(typeof(DataGridPage));
}

现在，我不知道汉堡菜单是如何实现的（＆＃34;导航抽屉＆＃34;），有几种方法可以实现一个，我猜它是一个控件， Syncfucsion为您提供...所以我将跳过尝试写出＆＃34;首页＆＃34;在上面的列表中看起来像（虽然我可以详细说明一个解决方案，如果你愿意，可以在后续帖子中实现没有Syncfusion）。这里最重要的是它在某个地方有一个显示＆＃34; ContentPage＆＃34; （如上所述，其中包含左侧面板和数据网格页面的显示）。

在UWP应用程序的顶层，您的应用程序运行的窗口包含一个框架，该框架本身显示＆＃34;首页＆＃34;。这一点很重要，因为这对于这个＆＃34;突然出现的问题至关重要。效果可能有效。

在您的＆＃34;内容页面＆＃34;上，处理＆＃34;点击＆＃34; ＆＃34; pop-out＆＃34;页面右上角的按钮。在该事件处理程序中，您将获取数据网格页面，并将其显示在顶部框架（直接位于应用程序窗口内部）中，而不是显示在＆＃34; Top Page＆＃34; （它正在显示）。

这背后的机制有点棘手，因为你正在处理＆＃34;内容页面上的事件。（单击＆＃34;弹出＆＃34;按钮），但您需要获得对父页面显示的框架的引用（而不是显示内容页面的框架）。

解决方案是编写自定义事件。这个想法是，每当＆＃34;弹出＆＃34;单击按钮，然后单击＆＃34;首页＆＃34;响应事件，询问它的父框架（＆＃34;顶部框架＆＃34;）以显示数据网格页面。

Here是一个冗长的（可能是压倒性的）事件概述。但是您需要的代码如下所示。在您的＆＃34;内容页面＆＃34;：

<!-- Other attributes omitted -->
<Button Name="PopOutButton"
        Click="PopOutButton_Click">

然后在＆＃34;内容页面的代码＆＃34;：

public sealed partial class ContentPage : Page
{
    // This is the declaration for your custom event.
    public delegate void PopOutRequestedHandler(object sender, PopOutRequestedEventArgs e);
    public event PopOutRequestedHandler PopOutRequested;

    private void RequestPopOut()
    {
        // Ensure that something is listening to the event.
        if (this.PopOutRequested!= null)
        {
            // Create the args, and call the listening event handlers.
            PopOutRequestedEventArgs args = new PopOutRequestedEventArgs();
            this.PopOutRequested(this, args);
        }
    }

    public void PopOutButton_Click(object sender, RoutedEventArgs e)
    {
        // Any animation logic you want goes here.

        this.RequestPopOut();
    }
}

您可以定义一个类PopOutRequestedEventArgs，以包含您希望在事件中传递的任何属性。对于基本实现来说，没有一个是必需的。

现在，在您的首页＆＃34;上，您需要订阅该活动。在＆＃34; Navigated＆＃34;中进行此操作。首页框架的事件处理程序。所以你在首页的某个地方有这个：

<Frame Name="NavFrame"
       Navigated="NavFrame_Navigated"></Frame>

然后在你的＆＃34;首页＆＃34;代码，你有：

private void NavFrame_Navigated(object sender, NavigationEventArgs e)
{
    if (e.Content is ContentPage page)
    {
        page.PopOutRequested += this.ContentPage_RequestedPopOut;
    }
}

private void ContentPage_RequestedPopOut(object sender, PopOutRequestedEventArgs e)
{
    // This tells the frame this page (the "Top Page") is in, to
    //    instead display the data grid page.
    this.Frame.Navigate(typeof(DataGridPage));
}

简而言之，这就是效果。要使页面关闭＆＃34;关闭＆＃34;再次，只需在数据网页上放置一个按钮（当页面显示在＆＃34;内容页面的框架中时，您可以隐藏该按钮＆＃34;），并处理其Click事件。在那种情况下，请求框架导航回＆＃34;内容页面＆＃34;。因此，在某个地方的数据网格页面上，您可以在＆＃34;内容页面＆＃34;上找到相同的按钮，并在其放置的事件处理程序中：

this.Frame.Navigate(typeof(ContentPage));

现在，重要的是，只允许在＆＃34;数据网格页面上点击按钮＆＃34;显示在＆＃34;顶部框架＆＃34; 中，因为该代码引用页面在运行时显示的框架...它不是绝对参考。如果您在＆＃34;数据网格页面上调用该代码，您将获得一些意想不到的结果。显示在＆＃34;内容页面的框架中＆＃34;。

至于恢复＆＃34;首页的状态＆＃34;当你关闭＆＃34;弹出＆＃34;当你导航回它时查看数据网格，您可以通过＆＃34; NavigationEventArgs＆＃34;来实现。存储＆＃34;首页的状态＆＃34; （例如，它上面的框架在你自己的班级中显示＆＃34;内容页面＆＃34;）（我们将其称为＆＃34; NavArgs＆＃34;这里），然后将其作为参数传递在Navigate语句中：

// Create an instance of the args class, and store your state info.
NavArgs navArgs = new NavArgs();
this.Frame.Navigate(typeof(DataGridPage), navArgs);

您可以存储＆＃34; navArgs＆＃34;在您的数据网格页面上，然后退出＆＃34;弹出＆＃34;查看，并导航回＆＃34;首页＆＃34;在＆＃34;顶部框架＆＃34;中，类似地通过Frame.Navigate()调用传递它们。

它有点透彻（虽然仍然掩盖了许多概念），它只是实现该功能的一种可能方式，但希望它有所帮助！

Answer 2

您可以使用GridColumnSizer.Star属性在整个页面中显示网格。

在GridColumnSizer.Star类型中，可用的网格宽度分为相等大小的区域，并且为每列设置划分的宽度。当网格中有三列时，总空间将除以三，并将该值分配给列的宽度。
您可以从下面的链接获取有关ColumnSizing的更多详细信息。
https://help.syncfusion.com/uwp/sfdatagrid/columns#column-sizing

致谢，
Sathiyathanam

如何在UWP的整页上显示网格？

2 个答案: