TitledContentView

RedCorners.Forms.TitledContentView is an ideal control to use to build a Xamarin.Forms page (or part of it) with a TitleBar. Since it is a ContentView2 control, it can be embedded anywhere on a Xamarin.Forms visual tree, giving the developer the flexibility to customize it without having to rewrite the entire UI.

A starter template for this control is included in the RedCorners.Forms Visual Studio Extension.

TitledContentView uses a RedCorners.Forms.TitleBar internally to render a title bar, and therefore supports all of its features.

TitledContentView offers a way to add overlay views on top of the entire control, which can be handy when adding modal user interfaces, or a SideBar. This is done by assigning views to its Overlay bindable property.

<rf:ContentPage2>
    <rf:TitledContentView Title="Buttoned TitleBar">
        <rf:TitledContentView.ToolBar>
            <rf:ImageButton2 
                Source="menuabout" 
                CommandParameter="About clicked!" 
                Command="{Binding MessageCommand}" />
            <rf:ImageButton2 
                Source="menumap" 
                CommandParameter="Pin clicked!" 
                Command="{Binding MessageCommand}" />
        </rf:TitledContentView.ToolBar>
        <rf:TitledContentView.Overlay>
            <rf:SideBar>
                <!-- Configure SideBar Here -->
            </rf:SideBar>
        </rf:TitledContentView.Overlay>
        <Grid>
            <!-- Add Content Here -->
        </Grid>
    </rf:TitledContentView>
</rf:ContentPage2>

Properties

[ContentProperty] View Body

This assigns the main contents of the page.

View ToolBar

Optional property, which puts controls on the right side of the title bar. (See the example above).

View LeftToolBar

Optional property, which overrides the button on the left side of the title bar, and instead puts custom controls there.

View TitleView

This optional property renders a custom View instead of the title label. By default it is null, and if it is assigned, the title label disappears. It provides a great way to add image logos on the title bar.

To adjust the position of the TitleView, you can use the TitleAlignment property.

Default Back Button

If LeftToolBar is not specified, a default back/menu button can be shown on the left side of the title bar. It can be customized using the following bindable properties:

• bool? IsBackButtonVisible
• bool IsDark
• ImageSource CustomBackImage
• ICommand BackCommand
• object BackCommandParameter
• bool HasButton

IsBackButtonVisible controls whether to show a back button (true) or a menu button (false). IsDark toggles between showing white built-in icons (default) or black built-in icons.

If CustomBackImage is set, this image source is instead used, and IsDark and IsBackButtonVisible are effectively ignored.

BackCommand and BackCommandParameter control what should happen after the back button is tapped.

HasButton controls whether the default back button is visible or not. It is true by default, but it is ignored if LeftToolBar is set.

double TitleHeightRequest

Adjusts the height of the title bar.

Thickness TitlePadding

Adjusts the padding around the contents of the title bar, excluding the area automatically added on devices with extra safe insets (e.g. the notch area).

View Overlay

Optional view that is shown on top of the whole control. A great place to put a SideBar.

View TitleBackground

If assigned, this view is shown behind the contents of the TitleBar. It is a good way to add a background image or animation to the TitleBar.

TitleBarPositions TitlePosition

The TitlePosition property sets the position of the TitleBar on the TitledContentView. Its valid values are:

• Top (default),
• Bottom

bool FixTitlePadding

Depending on the value of TitlePosition, this property adds extra insets on the top or the bottom of the TitleBar, to avoid it overlapping with the notch or the task switching bar on the bottom of the screen on iOS devices. For more information, read the docs on NotchSystem.

By default, it is set to true.

bool HasShadow

If this property is true, a subtle shadow is added between the title bar and the main content. By default it is true.

Additional TitleBar appearance

• Color TitleColor: Sets the background color of the TitleBar
• Color TitleTextColor
• double TitleFontSize
• string TitleFontFamily
• FontAttributes TitleFontAttributes
• TitleAlignments TitleAlignment