AUTHOR: Dimitar Karamfilov
DATE MODIFIED : October 18, 2017
DATE POSTED: August 11, 2015
The following example aims to mimic the navigation provided by the Movies & TV app in Windows 10 by using RadPageView in Backstage view mode. In this example, the tabs are positioned on the left part of the control and when the expand/collapse item is clicked the menu will expand/collapse. When the menu is expanded the items will have text when it is collapsed only icons will be displayed. The example also shows how you can create search tab item. When the search item is clicked the menu will expand and a text box will be displayed. You can see the final result in figure 1.
Figure 1. Navigation bar with RadPageView in Backstage view mode.
private
void
Toggle()
{
RadPageViewBackstageElement backstage = (RadPageViewBackstageElement)radPageView1.ViewElement;
bool
expanded = backstage.ItemContainer.MinSize.Width > 36;
int
width = expanded ? 36 : 200;
backstage.ItemContainer.MinSize =
new
Size(width, 0);
backstage.ItemContainer.MaxSize =
searchPage.Item.DrawImage = expanded;
textBox.Visibility = expanded ? ElementVisibility.Hidden : ElementVisibility.Visible;
foreach
(RadPageViewPage page
in
radPageView1.Pages)
page.Item.DrawText = !expanded;
}
Private
Sub
Dim
backstage
As
RadPageViewBackstageElement =
CType
(radPageView1.ViewElement, RadPageViewBackstageElement)
expanded
Boolean
= backstage.ItemContainer.MinSize.Width > 36
menu_width
Integer
=
If
(expanded, 36, 200)
New
Size(menu_width, 0)
searchPage.Item.DrawImage = expanded
textBox.Visibility =
(expanded, ElementVisibility.Hidden, ElementVisibility.Visible)
For
Each
page
RadPageViewPage
In
radPageView1.Pages
page.Item.DrawText =
Not
Next
End
The complete example can be downloaded by clicking the bellow link.
Resources Buy Try