iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi Team,
Could you provide me a simple sample to access nested uxFrame in 'Intersoft ClientUI MVVM Business Application' template.
thanks & regards.
Jim
Thank you for the detail information regarding the navigation topology of your scenario.
This kind of topology, as described in your previous message, can be categorized as nested hierarchy topology. This topology allows your application to define another frame inside the page that already hosted in an upper level frame. The nested hierarchical topology is typically used in a more advanced line-of-business applications that comprises of chained modules such as in master-detail scenario.
For example, consider an inventory application that shows a list of available products in the left section of the page, and the details of the product in the right section of the page. In this case, the content can be refactored into two pages, one for the listing and another for the details. This design pattern allows for better code reusability, maintainability, and extensibility.
The following illustration shows a master-detail scenario in a typical inventory application that use nested hierarchical topology.
This section shows you how to configure the nested navigation frame to support nested hierarchy topology (based on the above illustration).
To create the nested UXFrame page
<Intersoft:UXFrame Name="InventoryDetailsFrame" DisplayFragmentInBrowser="True" Intersoft:DockPanel.IsFillElement="True"> <Intersoft:UXFrame.UriMapper> <Intersoft:UriMapper> <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/ProductDetail.xaml"/> <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/Detail/{page}.xaml"/> </Intersoft:UriMapper> </Intersoft:UXFrame.UriMapper> </Intersoft:UXFrame>
<StackPanel Name="stackPanel1" Width="125" Margin="5,0,5,0" Intersoft:DockPanel.Dock="Left"> <Intersoft:UXNavigationButton Content="Product Detail" NavigateUri="/Inventory/ProductDetail" Name="uXNavigationButton1" TargetName="InventoryDetailsFrame" Icon="/ClientUIAdvNavApp1;component/Assets/Images/Home.png" DisplayMode="ContentAndImage" HorizontalContentAlignment="Left" IsDefaultNavigationSource="True"/> <Intersoft:UXNavigationButton Content="Dairy Products Detail" NavigateUri="/Inventory/Dairy" Name="uXNavigationButton2" TargetName="InventoryDetailsFrame" Icon="/ClientUIAdvNavApp1;component/Assets/Images/Contact.png" DisplayMode="ContentAndImage" HorizontalContentAlignment="Left"/> </StackPanel>
To add link a link to the nested UXFrame page
In order to allow nested hierarchy topology, you need to set the parent frame’s AllowNestedFrameNavigation property to True.
<Intersoft:UXFrame x:Name="MainPageFrame" Intersoft:DockPanel.Dock="Top" Intersoft:DockPanel.IsFillElement="True" Margin="0,10,0,0" EnablePageTransition="True" DefaultTransitionEffect="FlipLeft" AutoDetectNavigationDirection="True" NewTransitionEffect="FlipLeft" AllowNestedFrameNavigation="True"> <Intersoft:UXFrame.UriMapper> <Intersoft:UriMapper> <Intersoft:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <Intersoft:UriMapping Uri="/Error" MappedUri="/ErrorPage.xaml"/> <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/InventoryPage.xaml" IsChildNavigation="True"/> <Intersoft:UriMapping Uri="/Inventory" MappedUri="/Views/InventoryPage.xaml"/> <Intersoft:UriMapping Uri="/{page}" MappedUri="/Views/{page}.xaml"/> </Intersoft:UriMapper> </Intersoft:UXFrame.UriMapper> </Intersoft:UXFrame>
<Grid Intersoft:DockPanel.Dock="Bottom"> <Intersoft:UXItemsControl x:Name="NavigationItemsContainer" ItemContainerStyle="{StaticResource NavigationButtonStyle}" Orientation="Horizontal" Background="{StaticResource NavigationContainerBackground}"> ... <Intersoft:UXNavigationButton Content="Inventory" NavigateUri="/Inventory" Icon="Assets/Images/Inventory.png"/> </Intersoft:UXItemsControl> </Grid>
Hope this helps.
Could you please provide me more information regarding the navigation topology of your required scenario? The way you arrange the navigation structure, that is, the correlation between UXFrame and the UXPage that navigates to other pages in the application.
There are common topologies used in business application such as linear topology, hierarchical topology, and nested hierarchical topology.
Look forward to hearing back from you.
Well, here is the simple scenario;
I use 'Intersoft ClientUI MVVM Business Application' template.. there is uxFrame inside mainpage.xaml ..In customer.xaml, there is uxTreeView and uxFrame.
And, what I want to do is when I click an item from uxTreeView, I want to navigate uxFrame inside Customer.xaml to the specific page.
How can I achieve this goal?I've tried to navigate uxFrame inside customer.xaml, but the result is uxFrame inside mainpage.xaml that navigated.
Jim.
Thank you so much for the detail answer Yudi. This is really really helps..
Anyway, when I want to give some condition to navigate to the specific page, how do I set the xaml ? Can I achieve this without using code behind ?
It is suggested to add the conditional navigation in the code behind. However, could you please inform us about the conditional navigation that you would like to achieve?
OK, based on your sample above;
<Intersoft:UriMapper> <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/ProductDetail.xaml"/> <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/Detail/{page}.xaml"/> </Intersoft:UriMapper> </Intersoft:UXFrame.UriMapper>
Then I add 1 UriMapping :
<Intersoft:UriMapping Uri="/Customers" MappedUri="/Views/Detail/Customer.xaml"/>
At the first state, I set (in mainpage.xaml)
<Intersoft:UXStackItem Text="Header Name" FontSize="12" NavigateUri="/Products"/>
In ProductDetail.xaml, i want to have a button which can change NavigateUri above to "/Customers"
Do you have any idea ?
Let’s say there are three pages: MainPage.xaml; InventoryPage.xaml; and InventoryDetails.xaml. MainPage.xaml has UXFrame named as ContentFrame with following UriMapper configuration.
<Intersoft:UXFrame x:Name="ContentFrame" Intersoft:DockPanel.Dock="Top" Intersoft:DockPanel.IsFillElement="True" Margin="0,10,0,0" EnablePageTransition="True" DefaultTransitionEffect="FlipLeft" AutoDetectNavigationDirection="True" NewTransitionEffect="FlipLeft" AllowNestedFrameNavigation="True"> <Intersoft:UXFrame.UriMapper> <Intersoft:UriMapper> <Intersoft:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <Intersoft:UriMapping Uri="/Error" MappedUri="/ErrorPage.xaml"/> <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/InventoryPage.xaml" IsChildNavigation="True"/> <Intersoft:UriMapping Uri="/Intersoft" MappedUri="/Views/IntersoftPage.xaml"/> <Intersoft:UriMapping Uri="/{page}" MappedUri="/Views/{page}.xaml"/> </Intersoft:UriMapper> </Intersoft:UXFrame.UriMapper> </Intersoft:UXFrame>
Clicking “Inventory” navigation button (in MainPage.xaml) will load InventoryPage.xaml page into ContentFrame UXFrame.
InventoryPage.xaml has UXFrame named as uXFrame1 with following UriMapper configuration.
<Intersoft:UXFrame Name="uXFrame1" DisplayFragmentInBrowser="True" Intersoft:DockPanel.IsFillElement="True"> <Intersoft:UXFrame.UriMapper> <Intersoft:UriMapper> <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/Corporate.xaml"/> <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/Detail/{page}.xaml"/> </Intersoft:UriMapper> </Intersoft:UXFrame.UriMapper> </Intersoft:UXFrame>
Clicking “Inventory Details” navigation button (in Inventory.xaml) will load InventoryDetails.xaml page into uXFrame1 UXFrame.
For your scenario, to have a navigation button – in InventoryDetails.xaml page – which allow users to navigate to “Customers” page, there are two options:
<Intersoft:UXNavigationButton Content="Customers" NavigateUri="/Customers" Name="uXNavigationButton1" TargetName="uXFrame1" Icon="/ClientUIAdvNavApp1;component/Assets/Images/Home.png" DisplayMode="ContentAndImage" HorizontalContentAlignment="Left" IsDefaultNavigationSource="True"/>
<Intersoft:UXNavigationButton Content="Customers" NavigateUri="/Customers" Name="uXNavigationButton1" TargetName="ContentFrame" Icon="/ClientUIAdvNavApp1;component/Assets/Images/Home.png" DisplayMode="ContentAndImage" HorizontalContentAlignment="Left" IsDefaultNavigationSource="True"/>
In order to give some condition to navigate to the specific page, please try to bind the NavigateUri property to the ViewModel. In ViewModel, you can specify the conditions and determine the returns.
Hope this helps. Please feel free to let us know if you have another questions.
I've finished this scenario by binding a navigateUri property to the viewModel.
Big thanks Yudi..! now I know how to map a uri.You described me more detail than I expected.
Regards.Jim
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname