CODEWITHSUNDEEP
c#xamluser-interfacewindows-phone-8.1
Shashwat Tandon
Shashwat Tandon

Reputation: 15

Common Header for Windows Phone 8.1 App

I am trying to create a common header for my windows phone 8.1 app. The header should be common across all pages. I am new to Windows Phone App Development. Could anybody suggest the best and cleanest way to do so?

Upvotes: 0

Views: 786

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

Option 1

If you plan on having the header common to absolutely all pages without excluding any, you can place your control outside of your Frame. That way, it'll persist between page navigations.

First create your header as a UserControl (Project -> Add New Item -> User Control). Then in your Application.OnLaunched() override in App.xaml.cs (or wherever you're creating the Frame), replace this line

// Place the frame in the current Window
Window.Current.Content = rootFrame;

with this

var grid = new Grid();
grid.Margin = new Thickness(0, 26, 0, 0);  // compensate for status bar
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

var header = new MyHeaderUserControl();
grid.Children.Add(header);

Grid.SetRow(rootFrame, 1);
grid.Children.Add(rootFrame);

Window.Current.Content = grid;

Now your header will appear on all pages similar to this:

screenshot

Some points:

  • I've never had to design an app like this before so I don't know what the consequences of going about it this way are. You can no longer assume that Window.Current.Content will be a Frame (as a lot of code does).
  • The XAML designer won't display the header.
  • The Frame element seems to automatically compensate for the appearance of the status bar when it is set to Window.Current.Content (like usual). I've had to add a top margin of 26px to the root grid so that the header appears underneath the status bar.
  • Page transitions are provided by the frame, and since the header is outside of the frame, it will not participate in page transitions.

Option 2

If you want more flexibility, such as excluding some pages from displaying the header or changing the content of the header to some page-specific data via data binding, then I suggest you do not change the root frame but instead include the header manually in the pages you want.

If your app is simple with few pages, then the first option is probably the easiest, however if your app is complex then you might want the latter instead. Personally, I would always choose the latter option, just because I want maximum flexibility.

Upvotes: 1

Related Questions