How to show the grid on full page in UWP? - xaml

Question

I am using syncfusion controls for UWP. One of he feature I have seen in their sample application is showing the data grid on full page.
Something like this
After clicking on this the page looks like this
I am pretty sure that this is not full mode view of the app. After clicking on the button it hides the navigation drawer and the left panel as well.
Can someone please tell how it could be done?
Thanks in advance.

Answer 1

I don't know much about Syncfusion specifically, but I can describe how to implement it in general! This appears to be either a Navigation View or a Master/Details navigation design pattern (I linked both to thier respective documentation pages). Either way, the design pattern typically has the following structure:
Top Frame
Top Page
SplitView (or NavigationView)
Frame
Content Page
Content
Basically, the data grid normally sits on a page. That page is displayed in a frame that is in the content area of a SplitView or NavigationView, which is on the top-level page, which is displayed directly in the top-level frame in the app's window.
The "popping out" effect, that has the data grid display over the navigation drawer is likely some neat trickery going on with manipulating sub-pages, and the frames they are displayed in. So, lets take a look at how this effect can be implemented, given the above info about the structure of the navigation design pattern.
The data grid itself should be placed on its own page, which we will assume is called "DataGridPage" for the following code examples (note that the attributes for the page have been omitted for clarity):
<Page>
<!-- The data grid, or whatever content here -->
</Page>
We are actually adding two layers to the list presented above; the content page has a frame on it, and in that frame is a page with the data grid on it. So, your "content page" in the above list looks like this:
<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>
And then in the constructor for your "content page" (I am assuming C#, but the logic is the same for 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));
}
Now, I don't know how the hamburger menu is implemented (the "navigation drawer"), and there are several ways to implement one, and I am guessing that it is a control that Syncfucsion provides for you... so I am going to skip trying to write out what the "Top Page" in the above list would look like (although I can detail one solution for implementing that without Syncfusion in a follow-up post if you would like). All that matters here, is that it has, somewhere on it, a frame that displays the "ContentPage" (which as detailed above contains the left panel and a display of your data grid page).
At the top level of the UWP app, the window your app is running in contains a single frame, which is itself displaying the "Top Page". This is important to note, as it is critical to how this "popping out" effect likely works.
On your "Content Page", handle the "Click" event of the "pop-out" button in the upper right of the page. In that event handler, you are going to take your data grid page, and display it in the top frame (the one directly inside of the app window) rather than the "Top Page" (which it is currently displaying).
The mechanics behind this are a little tricky, since you are handling an event on the "Content Page" (the click of the "pop-out" button), but you need to get a reference to the frame the parent page is displayed in (rather than the frame the content page is displayed in).
The solution is to write a custom event. The idea is that you fire this custom event whenever the "pop-out" button is clicked, and then the "top page" responds to the event, asking it's parent frame (the "top frame") to display the data grid page.
Here is a lengthy (and possibly overwhelming) overview of events. But the code you need looks something like the following. On your "Content page":
<!-- Other attributes omitted -->
<Button Name="PopOutButton"
Click="PopOutButton_Click">
And then in the code of the "Content page":
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();
}
}
You can define a class PopOutRequestedEventArgs to include whatever properties you want to pass in your event. None are strictly necessary for the basic implementation.
Now, on your "Top Page", you need to subscribe to the event. Do so in the "Navigated" event handler for the frame on the top page. So you have this somewhere on your top page:
<Frame Name="NavFrame"
Navigated="NavFrame_Navigated"></Frame>
Then in your "Top page" code, you have:
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));
}
That is the effect, in a nutshell. To get the page to "close" again, simply put a button on your datagrid page (which you can hide when the page is displayed in the frame on the "Content page"), and handle its Click event. In that event, request the frame navigate back to the "Content page". So, on your data grid page somewhere, you have the same button as detailed above on the "Content page", and in its event handler you put:
this.Frame.Navigate(typeof(ContentPage));
Now, it is important that you ONLY allow the button to be clicked when the "data grid page" is displayed in the "top frame", as that code references the frame the page is displayed in when it is run... it is not an absolute reference. You will get some unexpected results if you call that code while the "data grid page" is displayed in the frame on the "Content page".
As for restoring the state of the "Top page" when you navigate back to it when closing out of the "popped out" view of the data grid, you can accomplish that via the "NavigationEventArgs". Store the state of the "Top page" (such as the fact that the frame on it is displaying the "Content page") in your own class (we will call it "NavArgs" here), and then pass that as a parameter in the Navigate statements:
// Create an instance of the args class, and store your state info.
NavArgs navArgs = new NavArgs();
this.Frame.Navigate(typeof(DataGridPage), navArgs);
You can store the "navArgs" on your data grid page, and then when exiting out of the "popped out" view, and navigating back to the "Top page" in the "top frame", similarly pass them through the Frame.Navigate() call.
It's a little thorough (although still glosses over a lot of concepts), and it is only one possible way to implement that functionality, but hopefully it helps!

Answer 2

You can show the grid in full page by using the property GridColumnSizer.Star .
In GridColumnSizer.Star type, the available grid width is divided into equal sized regions and the divided width is set for each column. When you have three columns in the grid, the total space is divided by three and that value is allocated to the width of the column.
You can get more details about ColumnSizing from the below links.
https://help.syncfusion.com/uwp/sfdatagrid/columns#column-sizing
Regards,
Sathiyathanam