2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
You can customize the header view of the SfCalendar in Xamarin.Forms control by following ways,
Using HeaderView property You can customize the header view by loading the content in HeaderView property of SfCalendar. XAML <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:LocalNamespace="clr-namespace:GettingStartedKBSyncfusion" xmlns:Syncfusion ="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms" x:Class="GettingStartedKBSyncfusion.MainPage"> <ContentPage.Content> <Syncfusion:SfCalendar x:Name="calendar"> <Syncfusion:SfCalendar.HeaderView> <Grid BackgroundColor="#E0CCFF"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="Left.png"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding LeftCommand}" /> </Image.GestureRecognizers> </Image> <Label Text="{Binding SelectedMonth}" FontSize="18" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> <Image Source="Right.png" Grid.Column="2"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding RightCommand}" /> </Image.GestureRecognizers> </Image> </Grid> </Syncfusion:SfCalendar.HeaderView> </Syncfusion:SfCalendar> </ContentPage.Content> </ContentPage> Passing custom header view in OnHeaderLoaded event You can change the header view by setting the content to CalendarHeaderEventArgs.View property in OnHeaderLoaded event. C# calendar.OnHeaderLoaded += (object sender, CalendarHeaderEventArgs args) => { Grid grid = new Grid(); grid.BackgroundColor = Color.FromHex("#E0CCFF"); grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star }); grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star }); grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star }); Image leftImage = new Image(); leftImage.Source = "Left.png"; Image rightImage = new Image(); rightImage.Source = "Right.png"; TapGestureRecognizer leftTap = new TapGestureRecognizer(); TapGestureRecognizer rightTap = new TapGestureRecognizer(); leftImage.GestureRecognizers.Add(leftTap); rightImage.GestureRecognizers.Add(rightTap); leftTap.Tapped += LeftHandleAction; rightTap.Tapped += RightHandleAction; Label label = new Label(); label.SetBinding(Label.TextProperty, "SelectedMonth"); label.FontSize = 18; label.HorizontalOptions = LayoutOptions.Center; label.VerticalOptions = LayoutOptions.Center; grid.Children.Add(leftImage, 0, 0); grid.Children.Add(label, 1, 0); grid.Children.Add(rightImage, 2, 0); args.View = grid; }; Output
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.