Questions on UI for .NET MAUI Forum

1 answer

148 views

I tried to migrate xamarin agenda to Maui but i cant make it with dayview?? maybe some how i can remove the hours from the view??

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AimmsApp.Task.Views.AgendaMenu"
xmlns:resx="using:AimmsApp.Resources"
xmlns:input="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:views="clr-namespace:AimmsApp.Task.Views;assembly=AimmsApp"
Title="{x:Static resx:Resources.Agenda}">
<AbsoluteLayout x:Name="mainLayout">
<input:RadCalendar x:Name="calendar" ViewMode="Agenda" AppointmentsSource="{Binding Appointments}">

<input:RadCalendar.AgendaViewSettings>
<input:AgendaViewSettings MonthItemFormat="YYYY MMM"
WeekItemStartDateFormat="dd MMMM"
WeekItemEndDateFormat="dd"
DayItemFormat="EEE d MMM"
AppointmentItemTimeFormat="HH mm"
AppointmentItemEndDateFormat="MMM d"
AppointmentItemStartDateFormat="MMM d"
IsHeaderSticky="True"
/>
</input:RadCalendar.AgendaViewSettings>
<input:RadCalendar.BindingContext>
<views:CalendarView />
</input:RadCalendar.BindingContext>

</input:RadCalendar>
</AbsoluteLayout>
</ContentPage>

Calendar

Scheduler

answered on 11 Mar 2024

1 answer

95 views

ChartTooltipBehavior template

Hi!

It's possible to format or create a template for ChartTooltipBehavior?

Example:

TooltipTemplate="{StaticResource toolTipTemplate1}"

<telerik:RadCartesianChart.Resources>
<ResourceDictionary>
<DataTemplate x:Key="toolTipTemplate1">
<VerticalStackLayout>
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Fill" Spacing="0" Padding="3" Margin="0">
<Label Text="{Binding Item.X, StringFormat='{0:F2}'}" TextColor="White"/>
<Label Text=" "/>
<Label Text="{Binding Path=BindingContext.AmplitudeUnit, Source={x:Reference graphicPage}}" TextColor="White"/>
<Label Text=" | "/>
<Label Text="{Binding Item.Y, StringFormat='{0:F2}'}" TextColor="White"/>
<Label Text=" "/>
<Label Text="{Binding Path=BindingContext.FrequencyUnit, Source={x:Reference graphicPage}}" TextColor="White"/>
</HorizontalStackLayout>
</VerticalStackLayout>
</DataTemplate>
</ResourceDictionary>
</telerik:RadCartesianChart.Resources>

Chart

answered on 11 Mar 2024

1 answer

94 views

Chart Axis title

Hi!

Is it possible to put a title on the X and Y axes?

Example:

<telerik:NumericalAxis>
<telerik:NumericAxisX.Title>
<telerik:AxisTitle Text="{Binding AmplitudeUnit}"/>
</telerik:NumericAxisX.Title>
</telerik:NumericalAxis>

Regards,

Rodrigo.

Chart

answered on 11 Mar 2024

1 answer

135 views

Custom message

Hi!

Can I send a custom message in this format?

Regards,

Rodrigo.

Chat (Conversational UI)

answered on 07 Mar 2024

1 answer

102 views

I want to customize the gauge(HorizontalGauge)

Hi
I want to customize the gauge like in the example.

①I want to set the tick and label as follows.

	Span(Step?)
Thick(short)	10
Thick(long)	50	(and Min/Max)
Label	100	(and Min/Max)

② How similar can you make it to the example visual?
・Red bar representing the current value
・Positional relationship between current value and Tick

①I want to set the tick and label as follows.

Gauge

answered on 06 Mar 2024

1 answer

109 views

How do you style Rad Data Grid Search Panel in Dark Mode

I have a Rad Data grid that is working fine in dark mode, but the search panel is not. What do I need to do to style that.

This is what it looks like.. If I could just get the text to come outblak it would be acceptable

DataGrid

answered on 06 Mar 2024

0 answers

92 views

Expanding TelerikGrid DetailTemplate after a rebind

Looking for a solution to expand the previous expanded DetailTemplate after a grid rebind. The data for the grid is updated from a click event within the DetailTemplate and need the grid updated and the expanded row to either stay expanded or re-expand after the grid rebind.

DataGrid

updated question on 05 Mar 2024

1 answer

85 views

Hide the "Type a message" component so the user cannot send a message.

Hi!

Is it possible to hide the message sending component?
I want to ensure that the user interacts only by suggestion, so hide the message sending

Regards,

Rodrigo.

Chat (Conversational UI)

answered on 01 Mar 2024

1 answer

115 views

I want to customize the gauge

Hi
I want to customize the gauge like in the example.

1. Is it possible to draw an area in the center of the gauge and display text?
2. Is it possible to display text at the bottom of the gauge?
3.What is the recommended way to achieve this?

Gauge

answered on 01 Mar 2024

1 answer

96 views

RadItemsView does not work when use in StackLayout for IOS

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="&#xe80b;"
                                   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="&#xe805;"
                                   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="&#xe80b;"
                                   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.

Calendar

answered on 01 Mar 2024