Hi Teams,
I tried to use RadItemsView in the StackLayout for IOS 17.2.
I found that it only works when the date is selected for the first time. When other dates are selected, it will not be displayed later.
It works in Android.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:local="clr-namespace:QSF.Examples.CalendarControl.CustomizationExample"
x:Class="QSF.Examples.CalendarControl.CustomizationExample.CustomizationView"
Padding="{OnIdiom Default='16, 20', Phone='16, 0'}">
<ContentView.Resources>
<ResourceDictionary>
<local:ColorWithAlphaConverter x:Key="ColorWithAlphaConverter" />
<local:ReminderStyleSelector x:Key="ReminderStyleSelector">
<local:ReminderStyleSelector.ReminderMouseOverBorderStyle>
<Style TargetType="telerik:CalendarBorderLabel">
<Setter Property="BorderBackgroundColor" Value="{Binding Source={RelativeSource Self}, Path=TextColor, Converter={StaticResource ColorWithAlphaConverter}, ConverterParameter=0.15}" />
</Style>
</local:ReminderStyleSelector.ReminderMouseOverBorderStyle>
<local:ReminderStyleSelector.ReminderSelectedBorderStyle>
<Style TargetType="telerik:CalendarBorderLabel">
<Setter Property="BorderColor" Value="{Binding Source={RelativeSource Self}, Path=TextColor}" />
</Style>
</local:ReminderStyleSelector.ReminderSelectedBorderStyle>
<local:ReminderStyleSelector.ReminderSelectedMouseOverBorderStyle>
<Style TargetType="telerik:CalendarBorderLabel">
<Setter Property="BorderBackgroundColor" Value="{Binding Source={RelativeSource Self}, Path=TextColor, Converter={StaticResource ColorWithAlphaConverter}, ConverterParameter=0.15}" />
</Style>
</local:ReminderStyleSelector.ReminderSelectedMouseOverBorderStyle>
</local:ReminderStyleSelector>
<local:ReminderTemplateSelector x:Key="ReminderTemplateSelector">
<local:ReminderTemplateSelector.TaskTemplate>
<DataTemplate>
<telerik:CalendarBorderLabel Text="{Binding Text}"
TextColor="{StaticResource AccentColor4}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontAttributes="Bold">
<Label FontFamily="TelerikFontExamples"
Text=""
TextColor="{StaticResource AccentColor4}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="End"
Margin="{OnPlatform Default=0, WinUI='0, 0, 0, 4'}" />
</telerik:CalendarBorderLabel>
</DataTemplate>
</local:ReminderTemplateSelector.TaskTemplate>
<local:ReminderTemplateSelector.BirthdayTemplate>
<DataTemplate>
<telerik:CalendarBorderLabel Text="{Binding Text}"
TextColor="{StaticResource AccentColor3}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontAttributes="Bold">
<Label FontFamily="TelerikFontExamples"
FontSize="{OnPlatform Default=8, WinUI=8, iOS=6}"
Text=""
TextColor="{StaticResource AccentColor3}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="End"
Margin="{OnPlatform Default='0, 0, 0, 4', WinUI='0, 0, 0, 6'}" />
</telerik:CalendarBorderLabel>
</DataTemplate>
</local:ReminderTemplateSelector.BirthdayTemplate>
<local:ReminderTemplateSelector.NonWorkingDayTemplate>
<DataTemplate>
<telerik:CalendarBorderLabel Text="{Binding Text}"
TextColor="#aa8fd6"
BackgroundColor="#f2eff9"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</DataTemplate>
</local:ReminderTemplateSelector.NonWorkingDayTemplate>
<local:ReminderTemplateSelector.NonWorkingDayWithReminderTemplate>
<DataTemplate>
<telerik:CalendarBorderLabel Text="{Binding Text}"
TextColor="#aa8fd6"
BackgroundColor="#f2eff9"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontAttributes="Bold">
<Label FontFamily="TelerikFontExamples"
Text=""
TextColor="#aa8fd6"
HorizontalTextAlignment="Center"
VerticalTextAlignment="End"
Margin="{OnPlatform Default=0, WinUI='0, 0, 0, 4'}" />
</telerik:CalendarBorderLabel>
</DataTemplate>
</local:ReminderTemplateSelector.NonWorkingDayWithReminderTemplate>
</local:ReminderTemplateSelector>
<DataTemplate x:Key="ReminderTemplate">
<telerik:RadBorder BackgroundColor="{AppThemeBinding Light=#F3F3F3, Dark=#202020}"
BorderColor="{AppThemeBinding Light={OnPlatform Default={StaticResource DefaultBorderColor}, WinUI={StaticResource DefaultBorderColorWinUI}},
Dark={OnPlatform Default={StaticResource DefaultBorderColorDark}, WinUI={StaticResource DefaultBorderColorDarkWinUI}}}"
BorderThickness="1"
CornerRadius="4"
Padding="16, 8"
Margin="0, 0, 0, 4">
<Label Text="{Binding Title}"
LineBreakMode="TailTruncation"
MaxLines="1" />
</telerik:RadBorder>
</DataTemplate>
<Style x:Key="CalendarHeaderBorderStyle" TargetType="telerik:RadBorder">
<Setter Property="BackgroundColor" Value="#40DFDFDF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="{OnPlatform Default='16, 0', Android=0, WinUI='12, 4'}" />
</Style>
</ResourceDictionary>
</ContentView.Resources>
<Grid RowDefinitions="Auto, *"
ColumnDefinitions="Auto, *">
<telerik:RadCalendar x:Name="calendar"
Grid.Column="{OnIdiom Default=1, Desktop=0}"
MaxDisplayMode="Month"
FirstDayOfWeek="Sunday"
SelectedDate="{Binding SelectedDate, Mode=TwoWay}"
DayStyleSelector="{StaticResource ReminderStyleSelector}"
DayTemplate="{StaticResource ReminderTemplateSelector}"
HeaderBorderStyle="{StaticResource CalendarHeaderBorderStyle}"
MaximumHeightRequest="{OnPlatform iOS=350, Android=320}"
BorderThickness="1"
Margin="{OnIdiom Default=0, Phone='0, 24, 0, 0'}" />
<Grid Grid.Row="{OnIdiom Default=1, Desktop=0}"
Grid.RowSpan="{OnIdiom Default=1, Desktop=2}"
Grid.Column="1"
RowDefinitions="Auto, *"
Margin="{OnIdiom Default='0, 16, 0, 0', Desktop='16, 0, 0, 0'}">
<Label Text="{Binding SelectedDate, StringFormat='Reminders for {0:M}:'}"
FontSize="16"
FontAttributes="Bold" />
<Grid Grid.Row="1"
Margin="0, 8, 0, 0">
<telerik:RadItemsView Grid.Row="1"
ItemsSource="{Binding FilteredRemindersList}"
ItemTemplate="{StaticResource ReminderTemplate}" />
<Label IsVisible="{Binding IsEmptyMessageVisible}"
Text="No reminders for this day"
TextColor="{StaticResource AccentColor4}" />
</Grid>
</Grid>
</Grid>
</ContentView>Thanks.
1 Answer, 1 is accepted
0
Hello John,
Thank you for sharing the app - I managed to reproduce the described behavior.
Please note RadItemsView is not an official component ( it's not included on the product page or the documentation) and we use it only internally in other controls. In addition, due to some optimization purposes, it is not intended to be used inside a StackLayout ( it relies the parent to provide size, while the StackLayout leaves its children to measure themselves).
So, I would suggest you replace it with the RadItemsControl - it's a simple control for visualizing a list of items and it provides ItemsSource and ItemTemplate as well:
<telerik:RadItemsControl Grid.Row="1"
ItemsSource="{Binding FilteredRemindersList}"
ItemTemplate="{StaticResource ReminderTemplate}" />I've tested it in the sample app and it properly loads the reminders.
Please give it a try and let me know how it goes.
Regards,
Yana
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
John
commented on 01 Mar 2024, 09:04 AM
Top achievements
Rank 1
Rank 1
It works when I replace it with the RadItemsControl, Thanks.
Hi John,
Thank you for sharing the code. As I understand it, selecting a date in the Calendar, loads a list of reminders in the ItemsControl.
I am missing the code-behind part, still, I tried to recreate the scenario in a simple app --just adding some random items on SelectedDate changed. I've tested it on iOS and the items are properly loaded into the ItemsControl on my side.
I've attached my test app, can you download it and give it a try? Can you modify it, so that the issue to be reproduced and send it back for additional research?
Looking forward to your reply.
Hi Yana,
Sorry, my code was missing <StackLayout>.
I'v attached my app, Can you test it?
Thanks.
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <Label Text="Test for Calendar" TextColor="{StaticResource Blue100Accent}" /> <Grid RowDefinitions="Auto, *" ColumnDefinitions="Auto, *"> <telerik:RadCalendar x:Name="calendar" Grid.Column="{OnIdiom Default=1, Desktop=0}" MaxDisplayMode="Month" FirstDayOfWeek="Sunday" SelectedDate="{Binding SelectedDate, Mode=TwoWay}" DayStyleSelector="{StaticResource ReminderStyleSelector}" DayTemplate="{StaticResource ReminderTemplateSelector}" HeaderBorderStyle="{StaticResource CalendarHeaderBorderStyle}" MaximumHeightRequest="{OnPlatform iOS=350, Android=320}" BorderThickness="1" Margin="{OnIdiom Default=0, Phone='0, 24, 0, 0'}" /> <Grid Grid.Row="{OnIdiom Default=1, Desktop=0}" Grid.RowSpan="{OnIdiom Default=1, Desktop=2}" Grid.Column="1" RowDefinitions="Auto, *" Margin="{OnIdiom Default='0, 16, 0, 0', Desktop='16, 0, 0, 0'}"> <Label Text="{Binding SelectedDate, StringFormat='Reminders for {0:M}:'}" FontSize="16" FontAttributes="Bold" /> <Grid Grid.Row="1" Margin="0, 8, 0, 0"> <telerik:RadItemsView Grid.Row="1" ItemsSource="{Binding FilteredRemindersList}" ItemTemplate="{StaticResource ReminderTemplate}" /> <Label IsVisible="{Binding IsEmptyMessageVisible}" Text="No reminders for this day" TextColor="{StaticResource AccentColor4}" /> </Grid> </Grid> </Grid> </StackLayout>