Questions on UI for .NET MAUI Forum

1 answer

97 views

RadCartesianChart background color defaults to White on iOS rather than Transparent

The chart background color defaults to white on ios, rather than transparent as it does on Android / Windows. Work around by setting the Background to your color of choice.

Chart

answered on 20 Jul 2023

1 answer

116 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

94 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 (obsolete)

updated answer on 17 Jul 2023

1 answer

328 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

132 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

531 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

149 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

131 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

816 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