<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Toolbar.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Toolbar"
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
    x:DataType="local:MainPageViewModel">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style
                x:Key="ActionMenuButtonToolbarItemViewBaseStyle"
                ApplyToDerivedTypes="True"
                TargetType="telerik:ButtonToolbarItemView">
                <Setter Property="DisplayOptions" Value="Text" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="FontFamily" Value="{x:Static telerik:TelerikFont.Name}" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="ToolTipProperties.Text" Value="click to change count" />
            </Style>

        </ResourceDictionary>
    </ContentPage.Resources>
    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
            <telerik:RadToolbar x:Name="toolbarButtons" AutomationId="toolbarButtons">
                <telerik:ButtonToolbarItem
                    Command="{Binding ButtonClickedCommand}"
                    Style="{StaticResource ActionMenuButtonToolbarItemViewBaseStyle}"
                    Text="{x:Static telerik:TelerikFont.IconUpOpen}" />
            </telerik:RadToolbar>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

<ContentPage.Resources>
<Style TargetType="telerik:RadSpinner" x:Key="spinnerStyle">
    <Setter Property="IsLooping" Value="False" />
</Style>
</ContentPage.Resources>

<VerticalStackLayout WidthRequest="300" HorizontalOptions="Center">
    <telerik:RadDateTimePicker x:Name="dateTimePicker"
                                                  SpinnerStyle="{StaticResource spinnerStyle}"
                                                  MinimumDate="2020/01/01"
                                                  MaximumDate="2026/12/31" />
</VerticalStackLayout>