0%

AllLandingPage

in this Page we can load all items from json file.

Events

Name
OnItemClick

Available Properties

Name
SpaceBetweenHeaderAndGridView
HeaderContentMargin
HeaderCornerRadius
HeaderVerticalAlignment
HeaderText
HeaderFontSize
HeaderSubtitleText
HeaderSubtitleFontSize
UseFullScreenHeaderImage
HeaderImage
HeaderOverlayImage
OverlayOpacity
Stretch
NormalizedCenterPoint
LazyLoadingThreshold
EnableLazyLoading
PlaceholderSource
IsCacheEnabled
GridViewVerticalAlignment
GridViewPadding
JsonNavigationViewService

Override values

1
2
<x:Double x:Key="LandingItemTitleFontSize">14</x:Double>
<x:Double x:Key="LandingItemSubtitleFontSize">12</x:Double>

Simple Use

first add:

1
xmlns:controls="using:WinUICommunity"

Usage with JsonNavigationViewService

if you are using JsonNavigationViewService you can use it like this which is so easy:

1
2
3
<wuc:AllLandingPage x:Name="allLandingPage" HeaderImage="ms-appx:///Assets/GalleryHeaderImage.png"
HeaderText="All" Loaded="allLandingPage_Loaded"
JsonNavigationViewService="{x:Bind local:App.GetJsonNavigationViewService()}"/>

or if you want to load data yourself, you can load data like this:

1
2
3
allLandingPage.CanExecuteInternalCommand = false;
allLandingsPage.GetData(jsonNavigationViewService.DataSource);
allLandingsPage.OrderBy(i => i.Title);

Navigation is done automatically, if you want to change something, you can use OnItemClick event

Normal Usage

1
2
3
<wuc:AllLandingPage x:Name="allLandingPage" HeaderImage="ms-appx:///Assets/GalleryHeaderImage.png"
HeaderText="All" Loaded="allLandingPage_Loaded"
OnItemClick="allLandingPage_OnItemClick"/>
1
2
3
4
5
6
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
allLandingPage.GetDataAsync("DataModel/AppData.json");
allLandingsPage.OrderBy(i => i.Title);
}

if you want to navigate to another page:

1
2
3
4
5
6
private void allLandingPage_OnItemClick(object sender, RoutedEventArgs e)
{
var args = (ItemClickEventArgs)e;
var item = (DataItem)args.ClickedItem;
jsonNavigationViewService.NavigateTo(item.UniqueId);
}

Load Items from Json File

Create a folder for example DataModel then add a new json file AppData.json:
DataModel\AppData.json

Set BuildAction to Content, if you are in a Unpackaged Mode, set CopyToOutput to True

To see details and descriptions of Json’s properties, refer to this page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
{
"Groups": [
{
"UniqueId": "Features",
"Title": "Features pages",
"IsSpecialSection": false,
"Items": [
{
"UniqueId": "WinUICommunity.DemoApp.Pages.ApplicationDataContainerPage",
"Title": "ApplicationDataContainer",
"SecondaryTitle": "Test SecondaryTitle",
"Subtitle": "you can use ApplicationDataContainerHelper for saving and loading application settings.",
"ImagePath": "ms-appx:///Assets/Modules/PT.png",
"Description": "test description",
"IsUpdated": true,
"IncludedInBuild": true,
"Links": [
{
"Title": "ApplicationDataContainerPage",
"Uri": "https://WinUICommunity.github.io/WinUICommunity/helpers/applicationDataContainerHelper/"
}
],
"Extra": [
"AppBarToggleButton",
"AppBarSeparator",
"CommandBar"
]
},
{
"UniqueId": "WinUICommunity.DemoApp.Pages.AppNotificationPage",
"Title": "App Notification",
"SecondaryTitle": "Test SecondaryTitle",
"Subtitle": "you can use AppNotificationPage for Sending Toast Notification.",
"ImagePath": "ms-appx:///Assets/Modules/PT.png",
"IncludedInBuild": true,
"Links": [
{
"Title": "AppNotificationPage",
"Uri": "https://WinUICommunity.github.io/WinUICommunity/helpers/appNotification/"
}
]
},
]
},
{
"UniqueId": "Settings",
"Title": "Settings pages",
"SecondaryTitle": "Test SecondaryTitle",
"Items": [
{
"UniqueId": "WinUICommunity.DemoApp.Pages.OobePage",
"Title": "Oobe Page",
"ApiNamespace": "DemoApp",
"SecondaryTitle": "Test SecondaryTitle",
"Subtitle": "Settings Page with a Hero Image",
"ImagePath": "ms-appx:///Assets/Modules/PT.png",
"IsUpdated": true,
"IncludedInBuild": true,
}
]
}
]
}

Enable/Disable Items based on Page Exist / IncludedInBuild

you can simply enable/disable items in AppData.json file just set IncludedInBuild to true or false

Localizer

step1:

add "UsexUid": true for every item in json file which you need to localize it.

step2:
add some resources in your resw files.
for example:

Key Value
Nav_HomeTitle Home

step3:
copy and paste Key in your json file for Title or subtitle

"Title": "Nav_HomeTitle"

everything will be done automatically.

LandingsPage