Right Justification in Listview

Hi Eric, thank you, the screenshot helps understand the layout a little more, but I still have to make some assumptions again without any code to go on (if you don't want to share your code in public, please open a Support Ticket instead of a forum post).

Review

If I understand correctly, you're using an entire RadListView (inside another RadListView), for those to glassware items in that last column.

Yes, a ListViewLinearLayout will render it's items starting from left to right, into the virtualization panel. Here are some callout using your screeshot.

• The red box is the viewport for realized items
• The green boxes are the containers that get realized and recycled
• The yellow arrow is the direction of scrollview panel, from the first item onwards.

My understanding of what you are asking for, is you would like the items to be right aligned.

Answer

Since the LinearLayout can only render items from the left to right, this means it is not possible to right-align scrolling canvas that extends to the right... (there is just no right edge to align, that edge goes into infinity).

In order for these to be right-aligned, you would need the items panel to start on the right. Then, as new items are added, they get added to the left. This would be a mirror implementation of what you see in the screenshot's callouts.

Alternate Solution

So let me propose a different solution. Nesting one UI virtualized control as a child of another UI virtualized control is usually a recipe for problems anyways. Since I imagine you're not going to have thousands of glassware items, let's get rid of the RadListView, it's too powerful of a control for what you need here.

Instead, use a simple HorizontalStackLayout and programmatically add the items to it. Since you want to reuse this UI, it's best to make it into a ContentView.

Existing Example

For inspiration, I have already written code that does exactly this thing. I wanted a SegmentedView that had RadButtons as items see https://github.com/LanceMcCarthy/CustomXamarinDemos/tree/main/src/SegmentedCustomControl 

The only difference in what you need, and what I did there, is I use RadButton for the children of the StackLayout  here https://github.com/LanceMcCarthy/CustomXamarinDemos/blob/e2b044f1139f403ec277a63a33d9c5b8d42d97fc/src/SegmentedCustomControl/SegmentedCustomControl/Portable/Controls/ButtonSegments.xaml.cs#L135-L162 

In your case, you can just recreate the XAML inside the DataTemplate instead of a RadButton (line 143).

Head Start on Your Custom Control

I give you a pretty good running start by showing you the important parts.

Glassware Data Model

Before starting with any code for the view, I'm starting with this following mockup data model for the glassware items:

public class GlasswareModel
{
    public string ImagePath { get; set; }
    public string Name { get; set; }
    public double Price { get; set; }
}

GlasswareItem

Now, we can move the XAML from inside your ItemTemplate into it's own ContentView. For this demo, I've named it "GlasswareItem". Since I don't have your ItemTemplate code, I'll just make it up based on the screenshot:

• An Image bound to "ImagePath"
• Two Labels, bound to "Name" and "Price"

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TelerikMauiAppTest"
             x:Class="TelerikMauiAppTest.GlasswareItem"
             x:DataType="local:GlasswareModel">

    <Grid RowDefinitions="Auto,Auto"
          ColumnDefinitions="40, Auto">
        <Image Source="{Binding ImagePath}"
               WidthRequest="38"
               Grid.RowSpan="2"
               Grid.Row="0"
               Grid.Column="0"/>
        <Label Text="{Binding Name}"
               Grid.Column="1"
               Grid.Row="0"/>
        <Label Text="{Binding Price, StringFormat='{0:C2}'}"
               Grid.Column="1"
               Grid.Row="1"/>
    </Grid>
</ContentView>

Note: That does not need any code behind because all the work is done by setting the BindingContext when we instantiate the control.

GlasswareView

Now, for the important parent control, this is the one that will eventually get right-aligned.

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TelerikMauiAppTest.GlasswareView">
    <HorizontalStackLayout x:Name="RootLayout"/>
</ContentView>

In the code-behind, we

• Have an ItemsSource bindable property
• In the ItemsSourceChanged method we invoke a DrawItems method
• Then inside DrawItems, you create a new GlasswareItem UI element and set it's BindingContext to that glassware data item

public partial class GlasswareView : ContentView
{
	public GlasswareView ()
	{
		InitializeComponent();
	}

    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create(nameof(ItemsSource), typeof(IList<GlasswareModel>), typeof(GlasswareView), null, propertyChanged: OnItemsSourceChanged);

    public IList<GlasswareModel> ItemsSource
    {
        get => (IList<GlasswareModel>)GetValue(ItemsSourceProperty);
        set => SetValue(ItemsSourceProperty, value);
    }

    private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is GlasswareView self && newValue is List<GlasswareModel> items)
        {
            self.DrawItems();
        }
    }

    // This method clears any existing children and draws a new one for each glassware
    private void DrawItems()
    {
        RootLayout.Children.Clear();
        
        foreach (var glasswareModel in ItemsSource)
        {
            RootLayout.Children.Add(new GlasswareItem
            {
                BindingContext = glasswareModel
            });
        }
    }
}

Implementation

Finally, you can now use the new control in your layout and it can be right-aligned:

<local:GlasswareView ItemsSource="{Binding AvailableGlassware}" HorizontalOptions="End"/>

[EDIT] Fixed typos, phrasing and formatting.

Hi almostEric,

Quick follow up, I wanted to share some screenshots of the result at runtime (with some simple data and images):

In case it helps, I've attached the relevant files

Excellent! Just in case you had any issues with my files, I've attached a complete runnable project for you.

While I was moving the code to an isolated project, I happened to also put some extra polish on it by surfacing the panel's spacing and padding values through two new BindableProperties. Here's what it looks like now:

and was created with:

<controls:GlasswareView ItemsSource="{Binding AvailableGlassware}"
                        ItemPanelPadding="5"
                        ItemPanelSpacing="5"
                        HorizontalOptions="End"
                        Grid.Column="1" />

*custom properties in bold

About comparison to WPF, I am originally a WPF/Silverlight/Windows Phone/UWP dev myself... so, I can completely relate to the implicit expectations to have the same XAML experience that I've become accustomed to. However, when working with Xamarin.Forms or .NET MAUI, it's good to keep in mind that MAUI doesn't actually use the XAML (except for WinUI native layer).

Instead, .NET MAUI translates the objects into native equivalent items and tries to map the XAML-defined property values into the native equivalent item's properties. However, they don't always have the same features across all the platforms. So, although something might be easy to do in WinUI, it may not be possible in the Android, which means that feature is not raised up to the MAUI layer. It's boils down to the fact that the lowest common denominator feature set achievable everywhere, thus little things like this do creep up from time to time.