Questions on UI for .NET MAUI Forum

0 answers

25 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

26 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

31 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

20 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

1 answer

20 views

DataGridColumnHeaderStyle won't let me use DynamicResource bindings

Hi there,

I am trying to style my dataGrid and I can't seem to use dynamic bindings for background colors etc. Whenever I do I get type mismatch compilation errors.

If I switch to StaticResources it works just fine.

For app themes I obviously need these values to be dynamic.

Any idea what I'm doing wrong here? Background styles and binding works correctly throughout the app so the binding is correct. It just doesn't want to compile for this control.

Thanks!

Angus

DataGrid

answered on 29 Feb 2024

1 answer

51 views

How to create a reusable popup in .net maui

How to create a reusable styled popup? I want a popup with rounded corners and 2 styled buttons and then inhreit from this BasePopup and get the styling by default, instead of adding this again and again for each popup I create. And then the popup inherting it can add it’s own content and provide commands or actions accordingly for those buttons

in a contentpage you would do it using ControlTemplate and ContentPresenter but I dont see it for the radpopup

Popup

answered on 26 Feb 2024

1 answer

35 views

RadComboBox drop down list does not close when used in the RadPopup

Hey Team,

When I tried to use RadComboBox in the RadPopup.
We found the dop down list did not close:
1. When we leave focus from dropdown or close the RadPopup on windows system
2. When we leave focus from dropdown on MacOS

<Button
            Clicked="ShowPopup"
            HorizontalOptions="Center"
            Text="Show RadPopup"
            VerticalOptions="Start"
            x:Name="button">
            <telerik:RadPopup.Popup>
                <telerik:RadPopup
                    IsModal="True"
                    OutsideBackgroundColor="#6F000000"
                    x:Name="popup">
                    <telerik:RadBorder BackgroundColor="Wheat" CornerRadius="8">
                        <Grid
                            HeightRequest="200"
                            Padding="10"
                            WidthRequest="200">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <telerik:RadButton
                                AutomationId="CloseButton"
                                Clicked="ClosePopup"
                                Grid.Row="0"
                                HorizontalOptions="End"
                                Padding="2"
                                Text="Close" />
                            <telerik:RadComboBox AutomationId="staticItemsComboBox" Grid.Row="1">
                                <telerik:RadComboBox.ItemsSource>
                                    <x:Array Type="{x:Type x:String}">
                                        <x:String>USA</x:String>
                                        <x:String>Uganda</x:String>
                                        <x:String>Ukraine</x:String>
                                        <x:String>Canada</x:String>
                                        <x:String>France</x:String>
                                        <x:String>Italy</x:String>
                                        <x:String>United Kingdom</x:String>
                                        <x:String>China</x:String>
                                        <x:String>Japan</x:String>
                                    </x:Array>
                                </telerik:RadComboBox.ItemsSource>
                            </telerik:RadComboBox>
                        </Grid>
                    </telerik:RadBorder>
                </telerik:RadPopup>
            </telerik:RadPopup.Popup>
        </Button>

        private void ClosePopup(object sender, EventArgs e)
        {
            popup.IsOpen = false;
        }
        private void ShowPopup(object sender, EventArgs e)
        {
            popup.IsOpen = true;
        }

Thanks,

Johnson

ComboBox

Popup

answered on 22 Feb 2024

1 answer

23 views

How to hide [No result message] in Autocomplete

Hi all,

I am using AutoComplete as Entry in LoginPage for UserEmail entry; In case the email entered has not been saved in the system, I do not want the [No result message] window to appear. How can I do that?

Xuan.

AutoComplete

answered on 22 Feb 2024

1 answer

15 views

Maui DataGrid ColumnHeader HorizontalTextAlignment "Center" doesnt work

Hi,

seems that the HorizontalTextAlignment="Center" isnt working for the DataGrid ColumnHeader, or at least I am unable to get it working.
For the cells it works.

NuGet Telerik.UI.for.Maui (6.7.0), latest VS2022 with latest Net8/Maui

I am new to Maui/Xaml.

Please help

Uli

Here is my MainPage.xaml and attached a screenshot of the running DataGrid:

<?xml version="1.0" encoding="utf-8" ?>

DataGrid

answered on 21 Feb 2024

1 answer

66 views

Listview - select item by viewmodel and visible on the screen

Hi!

How do I select an item in the listview at runtime (mvvm) and make this item always visible on the screen? Can you help me?

Example:
I press a button to select any item from the list. If this item is not appearing on the screen, listview automatically positions it on the item, making it visible.

Regards,

Rodrigo

ListView