Questions on UI for .NET MAUI Forum

1 answer

67 views

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

50 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

39 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

163 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

102 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

56 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

36 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

203 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

answered on 20 Feb 2024

1 answer

153 views

The proper way to use a Searchbar + ListView

What is the proper layout type to use when doing a searchbar?

In IOS, with a page that contains several controls, you would want the listview to appear only when you are typing into the searchbar.

I experimented with Grids, StackLayouts, etc. Whatever space gets allocated in the layout for the listview is never collapsed when done searching & you hide the listview. Work fine in Windows and Android.

What is the proper way to do this?

One of many unsuccessful attempts:

ListView

answered on 19 Feb 2024

1 answer

61 views

RadDataGrid DataTable CellContentTemplate DataTemplate binding?

Using the DataTable and RadDataGrid example at https://docs.telerik.com/devtools/maui/controls/datagrid/datatable-support

How do I specify the binding for a CellContentTemplate DataTemplate in XAML ?

For example, for IsVisited

<telerik:RadDataGrid.Columns>
    <telerik:DataGridBooleanColumn PropertyName="IsVisited" HeaderText="IsVisited" SizeMode="Auto"
                           CanUserEdit="False" CanUserFilter="false" IsResizable="false">
        <telerik:DataGridBooleanColumn.CellContentStyle>
            <telerik:DataGridTextCellStyle TextColor="Black" FontSize="14" SelectedTextColor="Blue" HorizontalTextAlignment="End" />
        </telerik:DataGridBooleanColumn.CellContentStyle>
        <telerik:DataGridColumn.CellContentTemplate>
            <DataTemplate>
                <telerik:RadCheckBox IsChecked="{Binding IsVisited}" IsEnabled="False" HorizontalOptions="Center"/>
            </DataTemplate>
        </telerik:DataGridColumn.CellContentTemplate>
    </telerik:DataGridBooleanColumn>
</telerik:RadDataGrid.Columns>

I'm getting the message

"Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics: Warning: 'IsVisited' property not found on 'System.Data.DataRowView', target property: 'Telerik.Maui.Controls.RadCheckBox.IsChecked'"

The checkbox is not checked when IsVisited is true.

CheckBox

DataGrid