Questions on UI for .NET MAUI Forum

1 answer

68 views

How to automatically change height of RadComboBox dropdown?

The default height of the RadComboBox dropdown doesn't change when the dropdown height is larger than it needs to be. When there's only two options, there's a lot of blank space in dropdown. How would I go about automatically fitting the height to the number of items in the dropdown?

ComboBox

answered on 19 Jul 2023

1 answer

72 views

Exception in ListView when defining ItemStyle and SelectedItemStyle BackgroundColor in C# instead of XAML

If I set ListView Background colors in XAML, they work, but if I set them in code, they don't.

This works:

<telerik:RadListView x:Name="MyList">
    <telerik:RadListView.ItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="Transparent"/>
    </telerik:RadListView.ItemStyle>
    <telerik:RadListView.SelectedItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="DarkRed"/>
    </telerik:RadListView.SelectedItemStyle>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    ...
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
</telerik:RadListView>

This does not:

<telerik:RadListView x:Name="MyList">
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    ...
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
</telerik:RadListView>

// Constructor
public MyListView()
{
    InitializeComponent();

    MyList.ItemStyle.BackgroundColor = Colors.Transparent;
    MyList.SelectedItemStyle.BackgroundColor = Colors.DarkRed;
}

Defining the BackgroundColor in code in this way generates an exception. What am I doing wrong?

(Using: Telerik.UI.for.Maui 5.1.0)

ListView

updated answer on 17 Jul 2023

1 answer

262 views

ComboBox causes UI to not load when testing in TestFlight

I have a MAUI desktop app that I have built using MAUI and Telerik controls,
It runs on Windows Desktop and in Windows deployed via the Microsoft Store,
It runs via Visual Studio on a Mac (Apple M2 Max)
However the UI does not load when running on the same Mac, deployed via TestFlight

I have systematically removed code from the project until I removed the Telerik controls.

I have this in the MauiProgram

var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseTelerik()
                .UseMauiCommunityToolkit()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

This at the ContentPage tag:

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

and this Telerik component code (within a grid and HorizontalStackLayout with other standard controls):

<telerik:RadComboBox x:Name="WorkflowsComboBox"
                TextColor="White"
                HorizontalOptions="Start"
                DisplayMemberPath="Name"
                Placeholder="(select workflow)"
                PlaceholderColor="Black"
                BackgroundColor="Transparent"
                WidthRequest="600"
                Padding="0,3,0,0"
                Margin="10,3,10,3"
                BorderColor="#644E88">
            </telerik:RadComboBox>

The app runs without the above code and UI hangs with the above code?

Latest Visual Studio Mac version with the automatic workflows installed.

packages:

<ItemGroup>
		<PackageReference Include="CommunityToolkit.Maui" Version="5.2.0" />
		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
		<PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="7.0.5" />
		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
		<PackageReference Include="Polly.Extensions.Http" Version="3.0.0" />
		<PackageReference Include="Telerik.UI.for.Maui" Version="5.2.0" />
		<PackageReference Include="NLog.Targets.MauiLog" Version="5.*" />
		<PackageReference Include="NLog.Extensions.Logging" Version="5.*" />
	</ItemGroup>

Any ideas?

Note: The app will need to be run via TestFlight.

I am not getting any crash reports or error messages and trying to catch exceptions everywhere.

The UI simply doesnt show up, the ViewModel initializes, and runs code, including tasks on a timer (before removing most of that code to get the app working)

Please advise.

ComboBox

updated question on 14 Jul 2023

1 answer

75 views

Multiple Row Column Headers

Hey I have seen that in the WPF forum a similar question has already been asked and figured that something similar should be supported for this RadDataGrid in MAUI as well. Can one simply transform the WPF solution to MAUI?

DataGrid

answered on 14 Jul 2023

1 answer

424 views

Binding to SelectedItems in DataGrid

Hey,
I tried to add an utility class for the RadDataGrid with a BindableProperty called SelectedItemsProperty s.th. I can finally bind to RadDataGrids SelectedItems property. Everything works fine (selection by clicking on the rows in the grid and updates to the selection collection in the viewModel also) - unfortunately setting the selected element in the viewModel during the entire initalization process of the viewModel and view does not work. Maybe someone has a clue?

Cheers Christian

View:

<ContentView ....>
              <telerik:RadDataGrid
                    behaviors:DataGridSelectionUtilities.SelectedItems="{Binding SelectedObjects}"
                    ItemsSource="{Binding Objects}"
                    SelectionMode="Multiple"
                    SelectionUnit="Row"/>
               
</ContentView>

ViewModel:

public class ViewModel : INotifyPropertyChanged
{
        public ViewModel(....)
        {
            Objects = new ObservableCollection<TObject>();
            SelectedObjects = new ObservableCollection<TObject>();
        }

        public async Task Initialize()
        {
                this.SelectedObject.Add( $SomeTObject)
        }

        public ObservableCollection<TObject> SelectedObject {get; set;}
        public ObservableCollection<TObject> Objects {get;}

         ......
}

UtilityClass:

public class DataGridSelectionUtilities
    {
        private static bool isSyncingSelection;

        private static List<(WeakReference CollectionFromViewModel, HashSet<RadDataGrid> AssociatedGrids)> collectionToGridViews =
            new List<(WeakReference CollectionFromViewModel, HashSet<RadDataGrid> AssociatedGrids)>();

        public static readonly BindableProperty SelectedItemsProperty = BindableProperty.CreateAttached(
            nameof(RadDataGrid.SelectedItems),
            typeof(INotifyCollectionChanged),
            typeof(DataGridSelectionUtilities),
            defaultValue: new ObservableCollection<object>(),
            propertyChanged: OnSelectedItemsPropertyChanged);

        private static void OnSelectedItemsPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var gridView = (RadDataGrid)bindable;
            if (oldValue is INotifyCollectionChanged oldCollection)
            {
                gridView.SelectionChanged -= GridView_SelectionChanged;
                oldCollection.CollectionChanged -= SelectedItems_CollectionChanged;
                RemoveAssociation(oldCollection, gridView);
            }
            
            if (newValue is INotifyCollectionChanged newCollection)
            {
                gridView.SelectionChanged += GridView_SelectionChanged;
                newCollection.CollectionChanged += SelectedItems_CollectionChanged;
                AddAssociation(newCollection, gridView);
                OnSelectedItemsChanged(newCollection, null, (IList)newCollection);
            }
        }

        public static INotifyCollectionChanged GetSelectedItems(BindableObject obj)
        {
            return (INotifyCollectionChanged)obj.GetValue(SelectedItemsProperty);
        }

        public static void SetSelectedItems(BindableObject obj, INotifyCollectionChanged value)
        {
            obj.SetValue(SelectedItemsProperty, value);
        }
        
        private static void SelectedItems_CollectionChanged(object sender, NotifyCollectionChangedEventArgs args)
        {
            var collection = (INotifyCollectionChanged)sender;
            OnSelectedItemsChanged(collection, args.OldItems, args.NewItems);
        }

        private static void GridView_SelectionChanged(object sender, DataGridSelectionChangedEventArgs args)
        {
            if (isSyncingSelection)
            {
                return;
            }

            if (sender is not RadDataGrid grid)
            {
                return;
            }

            var collection = (IList)GetSelectedItems(grid);
            foreach (var item in args.RemovedItems)
            {
                collection.Remove(item);
            }

            foreach (var item in args.AddedItems)
            {
                collection.Add(item);
            }
        }

        private static void OnSelectedItemsChanged(INotifyCollectionChanged collection, ICollection oldItems, ICollection newItems)
        {
            isSyncingSelection = true;

            var gridViews = GetOrCreateGridViews(collection);
            foreach (var gridView in gridViews)
            {
                SyncSelection(gridView, oldItems, newItems);
            }

            isSyncingSelection = false;
        }

        private static void SyncSelection(RadDataGrid gridView, IEnumerable oldItems, IEnumerable newItems)
        {
            if (oldItems != null)
            {
                SetItemsSelection(gridView, oldItems, false);
            }

            if (newItems != null)
            {
                SetItemsSelection(gridView, newItems, true);
            }
        }

        private static void SetItemsSelection(RadDataGrid gridView, IEnumerable items, bool shouldSelect)
        {
            foreach (var item in items)
            {
                var contains = gridView.SelectedItems.Contains(item);
                if (shouldSelect && !contains)
                {
                    gridView.SelectedItems.Add(item);
                }
                else if (contains && !shouldSelect)
                {
                    gridView.SelectedItems.Remove(item);
                }
            }
        }

        private static void AddAssociation(INotifyCollectionChanged collection, RadDataGrid gridView)
        {
            var gridViews = GetOrCreateGridViews(collection);
            gridViews.Add(gridView);
        }

        private static void RemoveAssociation(INotifyCollectionChanged collection, RadDataGrid gridView)
        {
            var gridViews = GetOrCreateGridViews(collection);
            gridViews.Remove(gridView);

            if (gridViews.Count == 0)
            {
                CleanUp();
            }
        }

        private static HashSet<RadDataGrid> GetOrCreateGridViews(INotifyCollectionChanged collection)
        {
            for (var i = 0; i < collectionToGridViews.Count; i++)
            {
                var wr = collectionToGridViews[i].CollectionFromViewModel;
                if (wr.Target == collection)
                {
                    return collectionToGridViews[i].AssociatedGrids;
                }
            }
            
            collectionToGridViews.Add(
                new ValueTuple<WeakReference, HashSet<RadDataGrid>>(new WeakReference(collection), new HashSet<RadDataGrid>()));
            return collectionToGridViews[^1].Item2;
        }

        private static void CleanUp()
        {
            for (var i = collectionToGridViews.Count - 1; i >= 0; i--)
            {
                var isAlive = collectionToGridViews[i].CollectionFromViewModel.IsAlive;
                var grids = collectionToGridViews[i].AssociatedGrids;
                if (grids.Count == 0 || !isAlive)
                {
                    collectionToGridViews.RemoveAt(i);
                }
            }
        }
    }

DataGrid

answered on 14 Jul 2023

1 answer

111 views

How to reduce padding on RadTabView?

I think the padding of the TabViewItems in the RadTabView control is too large in some situations. If you reduce the height of the control, the text is no longer visible in whole or in part.Setting the value of padding to 0 changes nothing.Is there a way to reduce the padding?

TabView

answered on 13 Jul 2023

1 answer

95 views

Can we add treeview in the gridview

<telerik:RadDataGrid x:Name="dataGrid"
ItemsSource="{Binding People}">
<telerik:RadDataGrid.GroupHeaderTemplate>

<telerik:RadTreeView x:Name="treeView"
ItemsSource="{Binding Items}"
CheckBoxMode="Recursive">
<telerik:TreeViewDescriptor DisplayMemberPath="Name"
ItemsSourcePath="Children"
TargetType="{x:Type local:Item}" />
<telerik:RadTreeView.BindingContext>
<local:ViewModel/>
</telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>

</telerik:RadDataGrid.GroupHeaderTemplate>
</telerik:RadDataGrid>

public class Item
{
public Item(string name)
{
this.Name = name;
this.Children = new ObservableCollection<Item>();
}

public string Name { get; set; }
public IList<Item> Children { get; set; }
}

public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public Gender Gender { get; set; }
}

answered on 10 Jul 2023

1 answer

652 views

Warnings

Hi,

I get these warnings, do I miss something?

2022-04-18 17:28:44,692 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Microsoft.Maui.Controls.ContentPresenter.Content'
2022-04-18 17:28:44,692 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Microsoft.Maui.Controls.ContentPresenter.Content'
2022-04-18 17:28:50,247 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'RoutesSource' property not found on 'AutomationClient.MAUI.ViewModels.RoutesViewModel', target property: 'Telerik.XamarinForms.DataGrid.RadDataGrid.ItemsSource'
2022-04-18 17:28:53,358 [1] WARN Microsoft.Maui.Controls.BindableObject - Cannot convert 2 to type 'Telerik.XamarinForms.Input.BorderStyle'
2022-04-18 17:29:28,361 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Microsoft.Maui.Controls.ContentPresenter.Content'
2022-04-18 17:29:28,362 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Microsoft.Maui.Controls.ContentPresenter.Content'
2022-04-18 17:29:54,510 [1] WARN Microsoft.Maui.Controls.Style - Style TargetType Telerik.XamarinForms.Input.PickerPopupContentView is not compatible with element target type Telerik.XamarinForms.Input.PickerDropDownContentView
2022-04-18 17:30:04,937 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'RoutesSource' property not found on 'AutomationClient.MAUI.ViewModels.RoutesViewModel', target property: 'Telerik.XamarinForms.DataGrid.RadDataGrid.ItemsSource'
2022-04-18 17:30:05,001 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'RoutesSource' property not found on 'AutomationClient.MAUI.ViewModels.RoutesViewModel', target property: 'Telerik.XamarinForms.DataGrid.RadDataGrid.ItemsSource'
2022-04-18 17:30:07,182 [1] WARN Microsoft.Maui.Controls.BindableObject - Cannot convert 2 to type 'Telerik.XamarinForms.Input.BorderStyle'
2022-04-18 17:30:13,386 [1] WARN Microsoft.Maui.Controls.Style - Style TargetType Telerik.XamarinForms.Input.PickerPopupContentView is not compatible with element target type Telerik.XamarinForms.Input.PickerDropDownContentView
2022-04-18 17:30:45,607 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Microsoft.Maui.Controls.ContentPresenter.Content'
2022-04-18 17:30:45,607 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Microsoft.Maui.Controls.ContentPresenter.Content'
2022-04-18 17:30:52,438 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'RoutesSource' property not found on 'AutomationClient.MAUI.ViewModels.RoutesViewModel', target property: 'Telerik.XamarinForms.DataGrid.RadDataGrid.ItemsSource'
2022-04-18 17:30:52,557 [1] WARN Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics - 'RoutesSource' property not found on 'AutomationClient.MAUI.ViewModels.RoutesViewModel', target property: 'Telerik.XamarinForms.DataGrid.RadDataGrid.ItemsSource'
2022-04-18 18:02:28,858 [1] WARN Microsoft.Maui.Dispatching.Dispatcher - Replaced an existing DispatcherProvider with one from the service provider

General Discussions

answered on 07 Jul 2023

1 answer

163 views

Clear Controls from code behind

Is there a method or process to clear a SignaturePad or ComboBox from the code behind?

For instance, a user fills out the page and clicks a Save button, after saving the data, all controls should be blanked out.

thank you!

ComboBox

SignaturePad

updated answer on 06 Jul 2023

1 answer

110 views

RadLegend Icon color does not match Series stroke (color)

When setting the Stroke of a series (in this case a ScatterLineSeries) to something other than the default, the RadLegend icon color does does not sync to match. I have tried nulling and resetting the LegendProvider of the legend in hopes it would grab the new colors, but I can't seem to find a work around for this issue. Is there anything I can do to keep the series and the icon colors in sync when they are set?

Xaml:

<Grid RowDefinitions="*">

        <telerik:RadCartesianChart x:Name="chart"
                                   Grid.Row="0">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:NumericalAxis x:Name="xAxis" />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:NumericalAxis x:Name="yAxis" />
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Series />

            <telerik:RadCartesianChart.Annotations>

                <telerik:CartesianGridLineAnnotation x:Name="marker"
                                                     Axis="{x:Reference xAxis}" />

            </telerik:RadCartesianChart.Annotations>

            <telerik:RadCartesianChart.ChartBehaviors>

                <telerik:ChartSelectionBehavior x:Name="selection"
                                                DataPointSelectionMode="Single"
                                                SelectionChanged="ChartSelectionBehavior_SelectionChanged" />
            </telerik:RadCartesianChart.ChartBehaviors>

        </telerik:RadCartesianChart>

        <ScrollView Grid.Row="0"
                    VerticalOptions="Start"
                    x:Name="legendContainer"
                    HeightRequest="80">
            <telerik:RadLegend x:Name="legend"
                               LegendProvider="{x:Reference Name=chart}" />
        </ScrollView>
    </Grid>

Code Behind:

                ScatterLineSeries lineSeries = new ScatterLineSeries()
                {
                    DisplayName = series.Name,
                    //Stroke = series.Color,  cannot set this, as legend icon color will not match
                    StrokeThickness = series.Thickness,
                    XValueBinding = new PropertyNameDataPointBinding(nameof(SeriesData.XScaled)),
                    YValueBinding = new PropertyNameDataPointBinding(nameof(SeriesData.YScaled)),
                    ItemsSource = data
                };

Chart