In this article

Working with tvOS Navigation Bars in Xamarin

03/16/2017

3 minutes to read

Contributors

In this article

Navigation Bars can be added to the top of views to display a Title and optional Navigation Bar Buttons. Typically they are used when the user has navigated from a main page, like a Table View, Collection or Menu to a subview showing the details of the selected item.

In addition to the Title (that is displayed in the center), Navigation Bars can contain one or more Navigation Bar Buttons (UIBarButtonItem) on the left and right sides of the bar.

Important

Navigation Bars are totally transparent by default. Care should be taken to ensure that the content of the Navigation Bar stays readable over the content underneath it. For example, when content in a Table View or Collection scrolls under it.

Navigation Bars and Storyboards

The easiest way to work with Navigation Bars in a Xamarin.tvOS app is to add them to the app's UI using the iOS Designer.

In the Solution Pad, double-click Main.storyboard file and open it for editing.

Drag a Navigation Bar from the Toolbox and drop it on the View at the top of the screen:

Double-click on the Navigation Bar to select to Navigation Item. In the Widget tab of the Properties Pad, you can set the Title:

Next, you can add one or more Bar Button Items to either end of the bar:

Finally, wire-up the Bar Button Items to Actions in the Events tab of the Properties Explorer:

Save your changes.

In the Solution Explorer, double-click Main.storyboard file and open it for editing.

Drag a Navigation Bar from the Toolbox and drop it on the View at the top of the screen:

Double-click on the Navigation Bar to select to Navigation Item. In the Widget tab of the Properties Explorer, you can set the Title:

Next, you can add one or more Bar Button Items to either end of the bar:

Finally, wire-up the Bar Button Items to Actions in the Events tab of the Properties Explorer:

Save your changes.

Important

While it is possible to assign events such as TouchUpInside to a UI element (such as a UIButton) in the iOS Designer, it will never be called because Apple TV doesn't have a touch screen or support touch events. You should always use the Primary Action event when creating event handlers for tvOS user interface elements.

The following code gives an example of events handlers on three different BarButtonItems: ShowFirstHotel, ShowSecondHotel, and ShowThirdHotel. When each item is clicked, the background image HotelImage is changed. This is edited in the View Controller (example ViewController.cs) file: