Как показать сетку на полной странице в UWP?
Я использую элементы управления syncfusion для UWP. Одна из особенностей, которую я видел в их примере приложения, - отображение сетки данных на полной странице.
Что-то вроде этого
После нажатия на эту страницу выглядит так 
Я уверен, что это не полный режим просмотра приложения. После нажатия на кнопку он скрывает панель навигации, а также левую панель.
Может кто-нибудь подсказать, пожалуйста, как это можно сделать? Заранее спасибо.
2 ответа
Я не особо разбираюсь в Syncfusion, но могу описать, как реализовать его в целом! Похоже, это либо навигационное представление, либо шаблон проектирования навигации Master/Details (я связал их с соответствующими страницами документации). В любом случае шаблон проектирования обычно имеет следующую структуру:
- Верхняя рамка
- Верхняя страница
- SplitView (или NavigationView)
- Рамка
- Страница содержания
- содержание
В основном, сетка данных обычно располагается на странице. Эта страница отображается во фрейме, который находится в области содержимого SplitView или NavigationView, которая находится на странице верхнего уровня, которая отображается непосредственно в фрейме верхнего уровня в окне приложения.
Эффект "выталкивания", который отображает сетку данных над блоком навигации, вероятно, представляет собой хитрый трюк с манипулированием подстраницами и кадрами, в которых они отображаются. Итак, давайте посмотрим, как этот эффект может быть реализовано, учитывая приведенную выше информацию о структуре шаблона проектирования навигации.
Сетка данных должна быть размещена на собственной странице, которая, как мы предполагаем, называется "DataGridPage" для следующих примеров кода (обратите внимание, что атрибуты для страницы были опущены для ясности):
<Page>
<!-- The data grid, or whatever content here -->
</Page>
Мы фактически добавляем два слоя в список, представленный выше; на странице содержимого есть рамка, а в этой рамке - страница с сеткой данных. Итак, ваша "страница контента" в приведенном выше списке выглядит так:
<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>
А затем в конструкторе для вашей "страницы содержимого" (я предполагаю, что 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));
}
Теперь я не знаю, как реализовано меню гамбургеров ("ящик навигации"), и есть несколько способов его реализовать, и я предполагаю, что это элемент управления, который Syncfucsion предоставляет для вас... так что я Я собираюсь пропустить попытку записать, как будет выглядеть "Верхняя страница" в приведенном выше списке (хотя я могу подробно описать одно решение для реализации этого без Syncfusion в следующем посте, если хотите). Все, что здесь имеет значение, это то, что где-то на нем есть рамка, которая отображает "ContentPage" (который, как подробно описано выше, содержит левую панель и отображение вашей страницы сетки данных).
На верхнем уровне приложения UWP окно, в котором запущено ваше приложение, содержит один кадр, который сам по себе отображает "Верхнюю страницу". Это важно отметить, так как очень важно, как этот эффект "выкатывания", вероятно, работает.
На вашей "странице содержимого" обработайте событие "Click" кнопки "pop-out" в правом верхнем углу страницы. В этом обработчике событий вы возьмете свою страницу сетки данных и отобразите ее в верхнем фрейме (тот, который находится непосредственно в окне приложения), а не на "Верхней странице" (которую она отображает в настоящее время).
Механизм, стоящий за этим, немного сложен, так как вы обрабатываете событие на "странице содержимого" (щелчок кнопки "всплывающее"), но вам нужно получить ссылку на фрейм, в котором отображается родительская страница. (а не во фрейме, в котором отображается страница контента).
Решение состоит в том, чтобы написать пользовательское событие. Идея состоит в том, что вы запускаете это пользовательское событие всякий раз, когда нажимается кнопка "выпадающий", а затем "верхняя страница" отвечает на событие, запрашивая у своего родительского фрейма ("верхнего фрейма") отображение страницы сетки данных.
Вот длинный (и, возможно, подавляющий) обзор событий. Но код, который вам нужен, выглядит примерно так: На вашей "Странице контента":
<!-- Other attributes omitted -->
<Button Name="PopOutButton"
Click="PopOutButton_Click">
А потом в коде "Контент страницы":
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 включить любые свойства, которые вы хотите передать в вашем мероприятии. Ни один из них не является строго необходимым для базовой реализации.
Теперь на вашей "главной странице" вам необходимо подписаться на событие. Сделайте это в обработчике событий "Navigated" для фрейма на верхней странице. Итак, у вас есть это где-то на вашей главной странице:
<Frame Name="NavFrame"
Navigated="NavFrame_Navigated"></Frame>
Тогда в вашем коде "Top page" у вас есть:
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));
}
Это эффект, в двух словах. Чтобы снова закрыть страницу, просто поместите кнопку на странице таблицы данных (которую можно скрыть, когда страница отображается во фрейме на "Странице содержимого"), и обработайте событие Click. В этом случае запросите фрейм, вернитесь обратно к "странице содержимого". Итак, где-то на вашей странице сетки данных у вас есть та же кнопка, что подробно описана выше на "Странице контента", и в ее обработчик событий вы помещаете:
this.Frame.Navigate(typeof(ContentPage));
Теперь важно, чтобы вы ТОЛЬКО позволяли нажимать кнопку, когда "страница сетки данных" отображается в "верхнем фрейме", так как этот код ссылается на фрейм, в котором страница отображается при запуске... она не абсолютная ссылка. Вы получите некоторые неожиданные результаты, если будете вызывать этот код, когда "страница сетки данных" отображается в рамке на "странице содержимого".
Что касается восстановления состояния "Верхняя страница", когда вы возвращаетесь к нему при закрытии из "выдвинутого" представления сетки данных, вы можете сделать это через "NavigationEventArgs". Сохраните состояние "Верхняя страница" (например, тот факт, что во фрейме на нем отображается "Страница содержимого") в своем собственном классе (здесь мы будем называть его "NavArgs"), а затем передайте его в качестве параметра в Навигация по заявлениям:
// Create an instance of the args class, and store your state info.
NavArgs navArgs = new NavArgs();
this.Frame.Navigate(typeof(DataGridPage), navArgs);
Вы можете сохранить "navArgs" на своей странице сетки данных, а затем при выходе из "выдвинутого" представления и переходе обратно к "Верхней странице" в "верхнем фрейме", аналогичным образом пропустить их через Frame.Navigate() вызов.
Это немного основательно (хотя все еще включает в себя множество понятий), и это только один из возможных способов реализовать эту функциональность, но, надеюсь, это поможет!
Вы можете показать сетку на полной странице, используя свойство GridColumnSizer.Star.
В типе GridColumnSizer.Star доступная ширина сетки делится на области одинакового размера, и для каждого столбца задается разделенная ширина. Когда у вас есть три столбца в сетке, общее пространство делится на три, и это значение распределяется по ширине столбца.
Вы можете получить более подробную информацию о ColumnSizing по ссылкам ниже.
https://help.syncfusion.com/uwp/sfdatagrid/columns
С Уважением,
Sathiyathanam