Xafari MVC. Frame Template

MVC applications include so-called FrameTemplates that allows changing the position of the data parts on a web page with ease. The current section shows how to apply this technique to the Main Demo application.

1. Cope the contents of the Views\MVCx\Shared\FrameTemplates\Vertical\ folder to Views\MVCx\Shared\FrameTemplates\MainDemoVertical\.

2. Open the …/ MainDemoVertical /_Main.cshtml file. Among others, this file defines the position of the ViewSitePane and LeftPane panes. The code snippet below defines current position:

  • example

contentPane.Panes.Add(
                 pane =>
                 {
                     pane.Name = ViewData.Frame().ControlId("LeftPane");
                     pane.Size = Unit.Pixel(500);
                     pane.ScrollBars = ScrollBars.Auto;
                     pane.PaneStyle.Paddings.Padding = Unit.Pixel(1);
                     pane.PaneStyle.BorderLeft.BorderStyle = BorderStyle.None;
                     pane.SetContentRelativePartialView(Html, "_LeftPanePartial");
                 });
 contentPane.Panes.Add(
                 pane =>
                 {
                     pane.Name = ViewData.Frame().ControlId("ViewSitePane");
                     pane.PaneStyle.Paddings.Padding = Unit.Pixel(0);
                     pane.PaneStyle.Border.BorderStyle = BorderStyle.None;
                     pane.Separators.Visible = DefaultBoolean.False;
                     pane.SetContentRelativePartialView(Html, "ViewSite/_Partial");
                 });

Now change the positions of the panes. Here is the code defining the new positions:

  • example

contentPane.Panes.Add(
                 pane =>
                 {
                     pane.Name = ViewData.Frame().ControlId("ViewSitePane");
                     pane.PaneStyle.Paddings.Padding = Unit.Pixel(0);
                     pane.PaneStyle.Border.BorderStyle = BorderStyle.None;
                     pane.Separators.Visible = DefaultBoolean.False;
                     pane.SetContentRelativePartialView(Html, "ViewSite/_Partial");
                 });

             contentPane.Panes.Add(
                 pane =>
                 {
                     pane.Name = ViewData.Frame().ControlId("LeftPane");
                     pane.Size = Unit.Pixel(500);
                     pane.ScrollBars = ScrollBars.Auto;
                     pane.PaneStyle.Paddings.Padding = Unit.Pixel(1);
                     pane.PaneStyle.BorderLeft.BorderStyle = BorderStyle.None;
                     pane.SetContentRelativePartialView(Html, "_LeftPanePartial");
                 });

3. Run the application and see the position of the menu items and common content. Close the application.

4. In the MainDemoMvcApplication class, override the OnCreateCustomTemplate method.

  • c#
  • VB

public class MainDemoMvcApplication : MVCxApplication
{
  //...
  protected override IFrameTemplate OnCreateCustomTemplate(string name)
  {
    if (name == TemplateContext.ApplicationWindow)
      return new MvcWindowTemplate { FrameTemplateName = "MainDemoVertical" };
    return base.OnCreateCustomTemplate(name);
  }
}

Public Class MainDemoMvcApplication
  Inherits MVCxApplication
  '...
  Protected Overrides Function OnCreateCustomTemplate(ByVal name As String) As IFrameTemplate
    If name = TemplateContext.ApplicationWindow Then
      Return New MvcWindowTemplate() With {.FrameTemplateName = "MainDemoVertical"}
    End If
    Return MyBase.OnCreateCustomTemplate(name)
  End Function
End Class

5. Run the application again to check if the mentioned panes changed their positions.