How to hide or change background of previous and next buttons for Microsoft.UI.Xaml.Controls.Calendarview

Question

im having a hard time to find a way to hide previous and next buttons for a CalendarView control, the reason why i want to do this is to avoid user confusion since those are disabled anyways. The CalendarView min and max dates are set to only 1 specific month, ie: (1 January 2023 to 31 January 2023).

The previous and next arrows are automatically disabled as intended, however i want to go a step further and make said arrows invisible.

Below you can find XAML Code for reference.

<VariableSizedWrapGrid
    Margin="0,0,0,0"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Orientation="Horizontal">
    <VariableSizedWrapGrid.ChildrenTransitions>
        <TransitionCollection>
            <RepositionThemeTransition />
            <EntranceThemeTransition
                FromHorizontalOffset="-200"
                FromVerticalOffset="0"
                IsStaggeringEnabled="False" />
        </TransitionCollection>
    </VariableSizedWrapGrid.ChildrenTransitions>
    <CalendarView
        x:Name="januaryCalendar"
        x:FieldModifier="Public"
        CornerRadius="20" />
</VariableSizedWrapGrid>

And C# code behind to set min and max dates for said control:

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    januaryCalendar.MinDate = new DateTime(DateTime.Now.Year,1,1);
    januaryCalendar.MaxDate = new DateTime(DateTime.Now.Year, 1, 31);
}

Answer 1

These Buttons are named, PreviousButton and NextButton.

You can bring the DefaultCalendarViewStyle from generic.xaml and change the Opacity to "0" when they are disabled.

First, create a converter because Enabled is bool and Opacity is double.

DisabledToZeroOpacityConverter.cs

using Microsoft.UI.Xaml.Data;
using System;

namespace CalendarViewTests;

public class DisabledToZeroOpacityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (value is bool enabled && enabled is true)
            ? 1.0
            : 0.0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Bring the DefautCalendarViewStyle and change the Opacity like this.

NOTE: The resources below are abbreviated due to the max characters in an answer.

MainPage.xaml

<Page
    x:Class="CalendarViewTests.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:CalendarViewTests"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Page.Resources>
        <local:DisabledToZeroOpacityConverter x:Key="DisabledToZeroOpacityConverter" />
        <Style
            x:Key="CustomCalendarViewStyle"
            BasedOn="{StaticResource DefaultCalendarViewStyle}"
            TargetType="CalendarView">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CalendarView">
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                            <Border.Resources>
                                ...
                            </Border.Resources>
                            <Grid
                                MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.MinViewWidth}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Button
                                        x:Name="HeaderButton"
                                        HorizontalContentAlignment="Left"
                                        Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HeaderText}"
                                        IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreViews}"
                                        Style="{StaticResource HeaderNavigationButtonStyle}" />
                                    <!-- PreviousButton -->
                                    <Button
                                        x:Name="PreviousButton"
                                        Grid.Column="1"
                                        Margin="{ThemeResource CalendarViewNavigationPreviousButtonMargin}"
                                        HorizontalContentAlignment="Center"
                                        Content="&#xEDDB;"
                                        IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreContentBefore}"
                                        Opacity="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource DisabledToZeroOpacityConverter}}"
                                        Style="{StaticResource NavigationButtonStyle}" />
                                    <!-- NextButton -->
                                    <Button
                                        x:Name="NextButton"
                                        Grid.Column="2"
                                        Margin="{ThemeResource CalendarViewNavigationNextButtonMargin}"
                                        HorizontalContentAlignment="Center"
                                        Content="&#xEDDC;"
                                        IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreContentAfter}"
                                        Opacity="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource DisabledToZeroOpacityConverter}}"
                                        Style="{StaticResource NavigationButtonStyle}" />
                                </Grid>
                                <Border
                                    Grid.Row="1"
                                    Height="1"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="1" />
                                <Grid
                                    x:Name="Views"
                                    Grid.Row="2">
                                    ...
                                </Grid>

                            </Grid>

                            <VisualStateManager.VisualStateGroups>
                            ...
                            </VisualStateManager.VisualStateGroups>
                        </Border>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <VariableSizedWrapGrid
        Margin="0,0,0,0"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <VariableSizedWrapGrid.ChildrenTransitions>
            <TransitionCollection>
                <RepositionThemeTransition />
                <EntranceThemeTransition
                    FromHorizontalOffset="-200"
                    FromVerticalOffset="0"
                    IsStaggeringEnabled="False" />
            </TransitionCollection>
        </VariableSizedWrapGrid.ChildrenTransitions>
        <CalendarView
            x:Name="januaryCalendar"
            x:FieldModifier="Public"
            CornerRadius="20"
            Style="{StaticResource CustomCalendarViewStyle}" />
    </VariableSizedWrapGrid>
</Page>