Questions on UI for .NET MAUI Forum

1 answer

97 views

How to make Telerik Radgrid Window more smaller / compressed

Hi Everyone,

Please advise how to make this Radwindow more compressed / smaller..

attached is the screenshot of the current windows that I want to adjust.

thanks,

DataGrid

answered on 06 Jun 2022

1 answer

430 views

Extracting styles to a .NET MAUI Class Library project does not compile

Hi

I am trying to extract my styling for a Telerik TabView into a .NET MAUI Class Library project, which I include in my MAUI application project and reference the ResourceDictionary from there. However, when I try to run the app to Android, I get the following error:

Failed to resolve assembly: 'Telerik.Maui.Controls, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null'

I have even tried to do this for the SDKBrowserMaui example project that shipped with the Telerik installation. The steps I followed are:

1. Add a new project in the solution. Choose ".NET MAUI Class Library".

2. Add the Telerik nuget to this new project.

3. Create a folder named Resources in the new project and add a ".NET MAUI ResourceDictionary (XAML)" file to this folder. I called it "Styles.xaml".

4. Inside the xaml file, add an assembly reference as follows:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

(I saw this in the maui app project, inside App.xaml)

5. Add my styles to the ResourceDictionary as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
	x:Class="MauiLib1.Resources.Styles"
	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls">

	<Style x:Key="tvhi" TargetType="telerik:TabViewHeaderItem">
		<Setter Property="Padding" Value="10,5" />
		<Setter Property="VisualStateManager.VisualStateGroups">
			<VisualStateGroupList>
				<VisualStateGroup Name="CommonStates">
					<VisualState Name="Normal">
						<VisualState.Setters>
							<Setter Property="TextColor" Value="#99ffffff" />
							<Setter Property="FontAttributes" Value="Bold" />
							<Setter Property="BackgroundColor" Value="Transparent" />
						</VisualState.Setters>
					</VisualState>
					<VisualState Name="Disabled">
						<VisualState.Setters>
							<Setter Property="TextColor" Value="#b3b3b3" />
							<Setter Property="FontAttributes" Value="Bold" />
							<Setter Property="BackgroundColor" Value="Transparent" />
						</VisualState.Setters>
					</VisualState>
					<VisualState Name="Selected">
						<VisualState.Setters>
							<Setter Property="TextColor" Value="White" />
							<Setter Property="FontAttributes" Value="Bold" />
							<Setter Property="BackgroundColor" Value="Transparent" />
						</VisualState.Setters>
					</VisualState>
				</VisualStateGroup>
			</VisualStateGroupList>
		</Setter>
	</Style>

	<Style x:Key="tvh" TargetType="telerik:TabViewHeader">
		<Setter Property="BackgroundColor" Value="Transparent" />
		<Setter Property="HorizontalOptions" Value="Start" />
	</Style>

	<Style x:Key="tvc" TargetType="telerik:TabViewContent">
		<Setter Property="VerticalOptions" Value="Fill" />
	</Style>

</ResourceDictionary>

6. Add a reference to the Class library project in the Maui project.

7. Inside the Maui app, in App.xaml, add the new ResourceDictionary. I should now be able to add these keys as StaticResource in my code.

However when I compile, I get the following error:

Failed to resolve assembly: 'Telerik.Maui.Controls, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' MauiLib1 C:\Program Files (x86)\Progress\Telerik UI for .NET MAUI 1.0.1\Examples\MauiLib1\Resources\Styles.xaml 1

Please can you assist, what am I doing wrong? I also tried to add the assembly reference as in my normal xaml files:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

But this gives me the error:

Cannot resolve type "http://schemas.telerik.com/2022/xaml/maui:TabViewHeaderItem". MauiLib1 C:\Program Files (x86)\Progress\Telerik UI for .NET MAUI 1.0.1\Examples\MauiLib1\Resources\Styles.xaml 8

Thank you in advance for the support.

TabView

answered on 06 Jun 2022

1 answer

88 views

PropertySortDescriptor on RadDataGrid

The code below returns an error:

A value of type 'PropertySortDescriptor' cannot be added to a collection or dictionary of type 'SortDescriptorCollection'.

<telerik:RadDataGrid.SortDescriptors>
<telerik:PropertySortDescriptor PropertyName="PracticeLogId" SortOrder="Descending" />
</telerik:RadDataGrid.SortDescriptors>

?

DataGrid

answered on 06 Jun 2022

2 answers

326 views

ComboBox - DropDownButton - DataTemplate

Hallo,

I would like to customize the icon of the "ComboBox - DropDownButton"

Is there any "DataTemplate" for "ComboBox - DropDownButton"? Or any other solution?

I understand that I can customize the style in "RadComboBox.DropDownButtonStyle", but I need the customize the icon of the button

Button

General Discussions

answered on 03 Jun 2022

3 answers

142 views

DropDownSettings style - no more working when moving to RC3

Hi,

<telerikMauiControls:RadDateTimePicker x:Name="fromDateTimePicker" HorizontalOptions="Center" VerticalOptions="Center" Margin="5,5,0,2" HeightRequest="35" WidthRequest="200" 
                                                        Date="{Binding FromDate, Mode=TwoWay}" 
                                                        SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
                                                        SpinnerStyle="{StaticResource spinnerStyle}"
                                                        SelectionHighlightStyle="{StaticResource selectionHighlightStyle}"
                                                        DisplayLabelStyle="{StaticResource displayLabelStyle}"
                                                        PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                                                        AreSpinnerHeadersVisible="True">
                    <!--<telerikMauiControls:RadDateTimePicker.DropDownSettings>
                        <telerikMauiControls:PickerDropDownSettings 
                                             FooterStyle="{StaticResource footerStyle}"
                                             FooterTemplate="{StaticResource dropDowViewFooterTemplate}"
                                             AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                                             CancelButtonStyle="{StaticResource cancelButtonStyle}" />
                    </telerikMauiControls:RadDateTimePicker.DropDownSettings>-->
                </telerikMauiControls:RadDateTimePicker>

  <ControlTemplate x:Key="dropDowViewFooterTemplate">
                <telerikMauiControls:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                                               BorderColor="{TemplateBinding BorderColor}"
                                               BorderThickness="{TemplateBinding BorderThickness}"
                                               CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid ColumnSpacing="0"
                          RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <telerikMauiControls:RadButton Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center"
                                               Text="{TemplateBinding CancelButtonText}"
                                               Style="{TemplateBinding CancelButtonStyle}"
                                               Command="{TemplateBinding CancelCommand}"/>
                        <telerik:RadBorder Grid.Column="1"  WidthRequest="1" Margin="2" BorderColor="#00B5DC"/>
                        <telerikMauiControls:RadButton Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" 
                                               Text="{TemplateBinding AcceptButtonText}"
                                               Style="{TemplateBinding AcceptButtonStyle}"
                                               Command="{TemplateBinding AcceptCommand}"/>
                    </Grid>
                </telerikMauiControls:RadBorder>
            </ControlTemplate>

DateTimePicker

answered on 03 Jun 2022

1 answer

306 views

TabView - line under selected item is missing

I am testing the Telerik MAUI controls (trial version) and specifically looking into the TabView control. I cannot seem to get the line underneath the selected tab view item to display, as in your documentation:

My code is as follows:

<telerik:RadTabView
	x:Name="tabView"
	Grid.Row="0"
	BackgroundColor="Transparent"
	VerticalOptions="Fill">
	
	<telerik:RadTabView.HeaderStyle>
		<Style TargetType="telerik:TabViewHeader">
			<Setter Property="BackgroundColor" Value="Transparent" />
			<Setter Property="HorizontalOptions" Value="Start" />
		</Style>
	</telerik:RadTabView.HeaderStyle>

	<telerik:RadTabView.HeaderItemStyle >
		<Style TargetType="telerik:TabViewHeaderItem">
			<Setter Property="Padding" Value="10,5" />
			<Setter Property="VisualStateManager.VisualStateGroups">
				<VisualStateGroupList>
					<VisualStateGroup Name="CommonStates">
						<VisualState Name="Normal">
							<VisualState.Setters>
								<Setter Property="TextColor" Value="#99ffffff" />
								<Setter Property="FontAttributes" Value="Bold" />
								<Setter Property="BackgroundColor" Value="Transparent" />
							</VisualState.Setters>
						</VisualState>
						<VisualState Name="Disabled">
							<VisualState.Setters>
								<Setter Property="TextColor" Value="#b3b3b3" />
								<Setter Property="FontAttributes" Value="Bold" />
								<Setter Property="BackgroundColor" Value="Transparent" />
							</VisualState.Setters>
						</VisualState>
						<VisualState Name="Selected">
							<VisualState.Setters>
								<Setter Property="TextColor" Value="White" />
								<Setter Property="FontAttributes" Value="Bold" />
								<Setter Property="BackgroundColor" Value="Transparent" />
							</VisualState.Setters>
						</VisualState>
					</VisualStateGroup>
				</VisualStateGroupList>
			</Setter>
		</Style>
	</telerik:RadTabView.HeaderItemStyle>

	<telerik:RadTabView.ContentStyle>
		<Style TargetType="telerik:TabViewContent">
			<Setter Property="VerticalOptions" Value="Fill" />
		</Style>
	</telerik:RadTabView.ContentStyle>
	
	<telerik:TabViewItem HeaderText="Settings">
		<Grid BackgroundColor="White">
			<Label Margin="10" Text="This is the content of the Settings tab" />
		</Grid>
	</telerik:TabViewItem>

	<telerik:TabViewItem HeaderText="About">
		<Label Margin="10" Text="This is the content of the About tab" />
	</telerik:TabViewItem>

	<telerik:TabViewItem HeaderText="View">
		<Label Margin="10" Text="This is the content of the View tab" />
	</telerik:TabViewItem>
</telerik:RadTabView>

And my tabview displays as follows (notice the line is missing):

I am running this on Android.

I have also tried to copy and paste some of the tabview examples from your code directly into my program, but I still don't see the line.

I have followed the instructions on getting started. Maybe I'm missing something small. Please assist. Thank you in advance.

TabView

answered on 03 Jun 2022

1 answer

318 views

Maui -- unit testing -- class libraries

So...

Maui apps can't have unit tests in a test project? Is that right? So, I have to move code I want to test into class libraries?

But Maui class libraries cannot contain Telerik code. Is that right? I can get Resharper to offer this:

but none of those options do anything. I have the Telerik Maui nuget installed in the class library.

FWIW, I am porting over a Xamarin Forms project and trying to figure out how to structure the app and what my limitations are...

DataGrid

General Discussions

answered on 02 Jun 2022

1 answer

370 views

Is MAUI really platform independent?

The project I'm working on is .NET 6 Core web API using MS SQL and MySQL along with Angular for UI.

I'm researching Angular but it does seem a little archaic in this day and age as a UI solution (most compatible, but least functional and more difficult to build a UI). My project requirements are:

1. Must run on Windows

2. Must run on macOS

3. Must run on iOS

4. Must run on Android

5. Must run on all web browsers

MAUI seems like a good fit, HOWEVER, it doesn't seem to support client/server (aka web deployments on IIS or Apache)?

Some questions:

a. Is there really only ONE code path for all of the above deployments?

b. How easy is it to build a package for deployment ... docker?

c. Reading the documentation and data binding seems easy and consistent with other technologies using in the Telerik space, HOWEVER, the datagrid suggests it's only supported in iOS and Android (not windows)?

d. Blazor seems to be required for doing web UI, how does that work with MAUI?

Cheers, Rob.

DataGrid

General Discussions

answered on 27 May 2022

2 answers

109 views

Select button not seen

Hi

I do not see select button at date time picker.

<telerikMauiControls:RadDateTimePicker x:Name="fromDateTimePicker" HorizontalOptions="Center" VerticalOptions="Center" Margin="5,5,0,2" HeightRequest="35" WidthRequest="200" 
                                                        Date="{Binding FromDate, Mode=TwoWay}" 
                                                        SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
                                                        SpinnerStyle="{StaticResource spinnerStyle}"
                                                        SelectionHighlightStyle="{StaticResource selectionHighlightStyle}"
                                                        DisplayLabelStyle="{StaticResource displayLabelStyle}"
                                                        PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                                                        AreSpinnerHeadersVisible="True">
                    <!--<telerikMauiControls:RadDateTimePicker.DropDownSettings>
                        <telerikMauiControls:PickerDropDownSettings 
                                             FooterStyle="{StaticResource footerStyle}"
                                             FooterTemplate="{StaticResource dropDowViewFooterTemplate}"
                                             AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                                             CancelButtonStyle="{StaticResource cancelButtonStyle}" />
                    </telerikMauiControls:RadDateTimePicker.DropDownSettings>-->
                </telerikMauiControls:RadDateTimePicker>

DateTimePicker

answered on 27 May 2022

1 answer

277 views

RadDockLayout resolve issue

I am getting an error from Visual Studio saying that it can't resolve RadDockLayout.

This is the specific error:../MainPage.xaml(3,3): Error XFC0000: Cannot resolve type "http://schemas.telerik.com/2022/xaml/maui:telerik:RadDockLayout". (XFC0000) (MOBLZ_MAUI) XamlC

I am using the xml namespace required and I am able to render other controls such as Badge.

Here is the xml snippet

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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"
             x:Class="xxx.MainPage">
    <ScrollView>
 <telerik:RadDockLayout>
  <Grid x:Name="titlePanel"
                  HeightRequest="60"
                  BackgroundColor="{StaticResource AccentColor8}"
                  IsVisible="{Binding IsTitlePanelVisible}"
                  telerik:RadDockLayout.Dock="{Binding TitlePanelDock, Converter={StaticResource StringToDockConverter}}">
                <Label Text="Title" TextColor="White"/>
            </Grid>
            <Grid x:Name="navigationPanel"
                  HeightRequest="60"
                  BackgroundColor="#ADD9FC"
                  IsVisible="{Binding IsNavigationPanelVisible}"
                  telerik:RadDockLayout.Dock="{Binding NavigationPanelDock, Converter={StaticResource StringToDockConverter}}">
                <Label Text="Navigation" />
            </Grid>
            <Grid x:Name="listPanel"
                  WidthRequest="120"
                  BackgroundColor="#DFDFDF"
                  IsVisible="{Binding IsListPanelVisible}"
                  telerik:RadDockLayout.Dock="{Binding ListPanelDock, Converter={StaticResource StringToDockConverter}}">
                <VerticalStackLayout Margin="20">
                    <Label Text="List" FontSize="Small" Margin="0"/>
                    <Label Margin="0" Text="&#xE84A;" FontSize="50"/>
                    <Label Margin="0" Text="&#xE84A;" FontSize="50"/>
                    <Label Margin="0" Text="&#xE84A;" FontSize="50"/>
                    <Label Margin="0" Text="&#xE84A;" FontSize="50"/>
                </VerticalStackLayout>
            </Grid>

        </telerik:RadDockLayout>
    </ScrollView>
    
</ContentPage>

General Discussions

answered on 26 May 2022