SideBar

RedCorners.Forms.SideBar is an extremely customizable control that can work as a side menu in Xamarin.Forms applications. It derives from ContentView2, making it a completely native Xamarin.Forms View which can be placed in any element. This gives the developer a level of flexibility that is simply not possible with the regular Master-Detail Pages.

Aside from being embeddable anywhere, developers can freely adjust its size and position on the screen. It can be placed on the right side of the screen, or even open from the top or bottom of the screen. It can occupy the entire screen when it’s presented, a fraction of the screen, or a fixed amount specified by the developer. This size is controlled via its ContentSize bindable property, which is of type GridLength, accepting Star or Auto values, as well as absolute numbers.

The IsFullSize property specifies whether the SideBar covers the whole screen when it’s visible, or just a part of the screen. When it is set to true, ContentSize is ignored.

Unlike master pages, SideBar behaves exactly the same across both iOS and Android, where it opens as an overlay view on top of the rest of the page. With a customizable background color, it allows for creating semi-transparent side menus on both platforms.

It supports both sliding and fading animations, and developers can toggle these animations and even adjust the duration of each type of animation separately via the following bindable properties:

• bool DoesFadeIn
• bool DoesSlideIn
• bool DoesFadeOut
• bool DoesSlideOut
• uint SlideInDuration
• uint SlideOutDuration
• uint FadeInDuration
• uint FadeOutDuration

The visibility of the SideBar is controlled using its IsVisible bindable property. When it is toggled, the animations are automatically executed and the control is shown or hidden.

If the IsSwipeEnabled property is true, swipe gestures can open or close the SideBar.

Properties

[ContentProperty] View Body

This property sets the contents of the SideBar. It can be anything, for example, a Frame with a StackLayout:

<rf:SideBar 
    Side="{Binding Side}" 
    ContentSize="{Binding ContentSize}" 
    IsFullSize="{Binding IsFullSize}">
    <Frame
        HasShadow="True"
        HorizontalOptions="Fill"
        VerticalOptions="Fill"
        BackgroundColor="#CC000000"
        Padding="0"
        CornerRadius="0">
        <ScrollView Padding="{Static rf:Values.PageMargin}">
            <StackLayout Padding="10">
                <ff:CachedImage Source="http://ooze.redcorners.com/redcorners_forms_logo.png" HorizontalOptions="Center" HeightRequest="128" WidthRequest="128" />
                <Label Text="RedCorners.Forms" TextColor="White" FontSize="Large" HorizontalTextAlignment="Center" HorizontalOptions="Center" />
                <BoxView HeightRequest="1" HorizontalOptions="Fill" BackgroundColor="White" />
                <Button Text="Hide SideBar" Command="{Binding HideSideBarCommand}" />

                <Button Text="Left" Command="{Binding PlaceSideBarCommand}" CommandParameter="Left" />
                <Button Text="Right" Command="{Binding PlaceSideBarCommand}" CommandParameter="Right" />
                <Button Text="Top" Command="{Binding PlaceSideBarCommand}" CommandParameter="Top" />
                <Button Text="Bottom" Command="{Binding PlaceSideBarCommand}" CommandParameter="Bottom" />
            </StackLayout>
        </ScrollView>
    </Frame>
</rf:SideBar>

SideBarSides Side

This property indicates which side of the screen the SideBar is placed at. Valid values are: Left (default), Right, Top and Bottom.

GridLength ContentSize

This property indicates the width or height of the SideBar, depending on its Side value. The property is of type GridLength, allowing values such as Auto, *, 3* or 200. It is set to 3* by default.

Color BackgroundColor

This property assigns the background color of the SideBar when shown.

bool IsSwipeEnabled

This property toggles responsiveness to swipe gestures for opening and closing the SideBar. It is true by default.

bool IsFullSize

This property toggles whether the SideBar occupies the entire screen or just a part of it. It is false by default. Enabling this will make the SideBar ignore its ContentSize value.

bool IsVisible

This bindable property indicates whether the SideBar is visible or not. By default, it is bound to the IsSideBarOpen boolean property of the binding context. In case a BindableModel is used as a binding context, this boolean is already defined, along with ShowSideBarCommand and HideSideBarCommand commands which trigger the value of IsSideBarOpen.

Animation Properties

These properties toggle different type of animations, as well as adjusting their durations (in milliseconds):

• bool DoesFadeIn
• bool DoesSlideIn
• bool DoesFadeOut
• bool DoesSlideOut
• uint SlideInDuration
• uint SlideOutDuration
• uint FadeInDuration
• uint FadeOutDuration

By default, all animations are enabled.