eliteKit
Xamarin UI Kit
Close documentation menu
Open documentation menu

Header overview

eliteHeader element overview

The Header element can be used to create a stunning header with an animated linear gradient background. You can place your own Xamarin Forms View inside the header. There are no limits designing the header. Define your own primary & secondary color which will be set for the linear gradient.

Main features
The main features of the Header element
Sample image
Sample image of the Header element
Code samples
C# and XAML code samples for this element
XAML
C#
<eliteKit:eliteHeader
  VerticalOptions="Start"
  HorizontalOptions="FillAndExpand"
  HeightRequest="200"
  ColorPrimary="#548EC1"
  ColorSecondary="#254867"
  <eliteKit:eliteHeader.HeaderView>
    <Image
      VerticalOptions="CenterAndExpand"
      HorizontalOptions="CenterAndExpand"
      WidthRequest="80"
      HeightRequest="80" />
  </eliteKit:eliteHeader.HeaderView>
</eliteKit:eliteHeader>
// The imageLogo View will be placed as HeaderView inside the eliteHeader element
Image imageLogo = new Image()
{
  VerticalOptions = LayoutOptions.CenterAndExpand,
  HorizontalOptions = LayoutOptions.CenterAndExpand,
  WidthRequest = 80,
  HeightRequest = 80,
  Source = ImageSource.FromResource("eliteKit.demoImages.eliteCodeLogoWhite.png")
};

eliteHeader eliteHeader = new eliteHeader()
{
  VerticalOptions = LayoutOptions.Start,
  HorizontalOptions = LayoutOptions.FillAndExpand,
  HeightRequest = 200,
  ColorPrimary = Color.FromHex("548EC1"),
  ColorSecondary = Color.FromHex("254867"),
  HeaderView = imageLogo // Placing the previously defined Image View as HeaderView content
};
Properties & Events
Navigate to the properties or events page
eliteKit
Create beautiful Xamarin Forms apps with eliteKit.
A collection of a lot UI elements made in SkiaSharp.
192
community members
60
eliteKit PRO members
436
eliteKit LITE downloads
21
eliteKit elements
Copyright © 2020. All rights reserved. Made with a lot of love and caffeine.
Powered by eliteCode.