ItemsWrapGrid not working with custom UserControl x:bind not binding control property

Question

Edited

In a WinUI3 project, the below XAML GridView code works perfectly fine. The UI in UserHomeView gets generated, and all of the properties and processes dependent on UserHomeViewModel get triggered and updated. However, as soon as I replace StackPanel by ItemsWrapGrid to have the items arranged in a grid, it stops working, I still can see the UI from UserHomeView for every item but UserHomeViewModel is null and the rendered UI for each item is not usable at all.

-Works fine.

<GridView ItemsSource="{x:Bind WindowConfiguratorViewModel.KioskCollection, Mode=OneWay}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel /> <!--Working!-->
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="viewModelsConfigurator:ProfileKioskDesktopViewModel">
            <userHomeViews:UserHomeView UserHomeViewModel="{x:Bind UserHomeViewModel}" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

-Does not work.

<GridView ItemsSource="{x:Bind WindowConfiguratorViewModel.KioskCollection, Mode=OneWay}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid /><!--Not Working!-->
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="viewModelsConfigurator:ProfileKioskDesktopViewModel">
            <userHomeViews:UserHomeView UserHomeViewModel="{x:Bind UserHomeViewModel}" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

I tested with other custom views in user controls and the results are the same. I don't get neither compilation nor runtime errors, the UserHomeViewModel simply does not bind when using ItemsWrapGrid.

Does anybody know why this happens?

Update

I created a minimal reproduction of the issue here https://github.com/hclazarin/DesktopManager

Do you mean you get compile errors when you use ListView.ItemTemplate? — Andrew KeepCoding
– Andrew KeepCoding, Commented Nov 10, 2024 at 0:16
@AndrewKeepCoding No, there are no errors at all. The ListView compiles and all items are rendered, however, the UserHomeViewModel property in each one of the resulting items is null. When I add the items to the ListView manually by using ListViewItem instead of through a template the UserHomeViewModel property is correctly assigned, it's not null, of course, this is not functional since the list will grow as the user interacts with the app. — Hector Lazarin
– Hector Lazarin, Commented Nov 10, 2024 at 5:54
"ItemsWrapGrid" is the default; so the entry is redundant. ItemsWrapGrid is affected by the "size" of "first" item in the collection; unlike StackPanel. Without an "Orientation", one assumes the items are stacking vertically. Do they have "Height"? Or Width? What is the Height of the final GridView? Use the "Live Visual Tree" and (live) property inspector will tell you what's what. — Gerry Schmitz
– Gerry Schmitz, Commented Nov 10, 2024 at 19:15

Andrew KeepCoding · Accepted Answer · 2024-11-11 14:06:31Z

1

Make sure in your user control that the DependencyProperty is a public static readonly property.

public int SomeValue
{
    get => (int)GetValue(SomeValueProperty);
    set => SetValue(SomeValueProperty, value);
}

// My first guess is that `static` is missing.
public /*static*/ readonly DependencyProperty SomeValueProperty =
    DependencyProperty.Register(
        nameof(SomeValue),
        typeof(int),
        typeof(UserControl1),
        new PropertyMetadata(default));

UPDATE

I took a look at your repo. It seems that there's some difference behind the scenes but at least you need to apply these 2 changes.

First of all, if you want to expose a property for a user (custom) control, in general, you should create DependencyProperty instead of a plain property so when the property value changes the UI gets notified.

//public UserHomeViewModel UserHomeViewModel { get; set; }

public UserHomeViewModel UserHomeViewModel
{
    get => (UserHomeViewModel)GetValue(UserHomeViewModelProperty);
    set => SetValue(UserHomeViewModelProperty, value);
}

public static readonly DependencyProperty UserHomeViewModelProperty =
    DependencyProperty.Register(
        nameof(UserHomeViewModel),
        typeof(UserHomeViewModel),
        typeof(UserHomeView),
        new PropertyMetadata(default));

Also, in your UserControl, try setting the binding mode to OneWay:

<Grid Background="{x:Bind UserHomeViewModel.DesktopBackgroundColor, Mode=OneWay}"/>
<Grid Background="{x:Bind UserHomeViewModel.TaskBarBackgroundColor, Mode=OneWay}"/>

edited Nov 11, 2024 at 14:06

answered Nov 10, 2024 at 9:16

Andrew KeepCoding

15.4k2 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hector Lazarin Over a year ago

Thanks! I tried this but still did not work. Soon after, I realized that the issue happens only in GridView because of ItemsWrapGrid. I updated my question accordingly.

Andrew KeepCoding Over a year ago

I can't repro this (unless the code in my answer). Might be faster if you share a minimal reproducible project via GitHub.

Hector Lazarin Over a year ago

I created a minimal reproduction of the issue here github.com/hclazarin/DesktopManager

Hector Lazarin Over a year ago

Awesome! This worked in the minimal reproduction, my actual implementation still behaves oddly but the GridView is working now, I must have a bug somewhere in my business logic. Thanks!!!

Collectives™ on Stack Overflow

ItemsWrapGrid not working with custom UserControl x:bind not binding control property

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related