c# - How to dynamically change Grid.Row in .NET MAUI based on a bindable property? - Stack Overflow

admin管理员组

文章数量:1289509

Question: I am working on a .NET MAUI application where I have a Grid with 3 rows:

Header (Row 0 - always visible) Today's Appointments (Row 1 - should be hidden if there are no appointments) CollectionView with buttons (Row 2 - should move to Row 1 if Row 1 is hidden) The issue is that when Row 1 (which contains HomePageDisplayingAppointmentBorder) is hidden, the CollectionView (Row 2) does not properly move to Row 1. Instead, it jumps to Row 0, overlapping the header.

I want to dynamically change the Grid.Row of the CollectionView based on the HasAppointments property.

What I've tried so far:

1. Binding directly to Grid.Row (Did not work)

<CollectionView Grid.Row="{Binding HasAppointments}" />

This does not work because Grid.Row is not a bindable property.

2. DataTrigger in XAML (Did not work)

<CollectionView Grid.Row="2">
    <CollectionView.Triggers>
        <DataTrigger TargetType="CollectionView" Binding="{Binding HasAppointments}" Value="False">
            <Setter Property="Grid.Row" Value="1" />
        </DataTrigger>
    </CollectionView.Triggers>
</CollectionView>

Still does not work since Grid.Row is not a bindable property.

3. Handling it in Code-Behind (Did not work properly) In my HomeViewModel, I have an ObservableProperty:

[ObservableProperty]
private bool hasAppointments;

And in HomePage.xaml.cs, I tried updating the Grid.Row dynamically:

private void HomeViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(HomeViewModel.HasAppointments))
    {
        UpdateCollectionViewRow();
    }
}

private void UpdateCollectionViewRow()
{
    if (BindingContext is HomeViewModel viewModel)
    {
        MyCollectionView.SetValue(Grid.RowProperty, viewModel.HasAppointments ? 2 : 1);
    }
}

protected override async void OnAppearing()
{
    base.OnAppearing();

    if (BindingContext is HomeViewModel viewModel)
    {
        viewModel.PropertyChanged += HomeViewModel_PropertyChanged;
    }
}

However, this also does not work correctly. The CollectionView still moves above the header (Row 0) instead of shifting to Row 1.

My Questions:

1. What is the correct way to dynamically change Grid.Row in .NET MAUI?
2. Why does SetValue(Grid.RowProperty, ...) not work as expected?
3. Is there a better way to solve this issue?

Additional Details: Framework: .NET MAUI Platforms: Android & iOS Issue: CollectionView moves to Row 0 (above the header) instead of shifting to Row 1 when HasAppointments is false.

<CollectionView Grid.Row="{Binding HasAppointments}" />

<CollectionView Grid.Row="2">
    <CollectionView.Triggers>
        <DataTrigger TargetType="CollectionView" Binding="{Binding HasAppointments}" Value="False">
            <Setter Property="Grid.Row" Value="1" />
        </DataTrigger>
    </CollectionView.Triggers>
</CollectionView>

[ObservableProperty]
private bool hasAppointments;

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.4"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Header (Always Visible) -->
    <components:HomeHeader Grid.Row="0" />

    <!-- Appointment Information (Hidden if No Appointments) -->
    <Grid Grid.Row="1">
        <components:HomePageDisplayingAppointmentBorder IsVisible="{Binding HasAppointments}"/>
    </Grid>

    <!-- CollectionView for Buttons -->
    <CollectionView Grid.Row="2"
                    x:Name="MyCollectionView"
                    ItemsSource="{Binding HomeButton}"
                    VerticalOptions="FillAndExpand">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <components:HomeButton Data="{Binding .}" 
                                       BackgroundColor="{DynamicResource Company}" 
                                       TextColor="{DynamicResource Company}" 
                                       FrameTapped="OnButtonTapped" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>

Question: I am working on a .NET MAUI application where I have a Grid with 3 rows:

Header (Row 0 - always visible) Today's Appointments (Row 1 - should be hidden if there are no appointments) CollectionView with buttons (Row 2 - should move to Row 1 if Row 1 is hidden) The issue is that when Row 1 (which contains HomePageDisplayingAppointmentBorder) is hidden, the CollectionView (Row 2) does not properly move to Row 1. Instead, it jumps to Row 0, overlapping the header.

I want to dynamically change the Grid.Row of the CollectionView based on the HasAppointments property.

What I've tried so far:

1. Binding directly to Grid.Row (Did not work)

<CollectionView Grid.Row="{Binding HasAppointments}" />

This does not work because Grid.Row is not a bindable property.

2. DataTrigger in XAML (Did not work)

<CollectionView Grid.Row="2">
    <CollectionView.Triggers>
        <DataTrigger TargetType="CollectionView" Binding="{Binding HasAppointments}" Value="False">
            <Setter Property="Grid.Row" Value="1" />
        </DataTrigger>
    </CollectionView.Triggers>
</CollectionView>

Still does not work since Grid.Row is not a bindable property.

3. Handling it in Code-Behind (Did not work properly) In my HomeViewModel, I have an ObservableProperty:

[ObservableProperty]
private bool hasAppointments;

And in HomePage.xaml.cs, I tried updating the Grid.Row dynamically:

private void HomeViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(HomeViewModel.HasAppointments))
    {
        UpdateCollectionViewRow();
    }
}

private void UpdateCollectionViewRow()
{
    if (BindingContext is HomeViewModel viewModel)
    {
        MyCollectionView.SetValue(Grid.RowProperty, viewModel.HasAppointments ? 2 : 1);
    }
}

protected override async void OnAppearing()
{
    base.OnAppearing();

    if (BindingContext is HomeViewModel viewModel)
    {
        viewModel.PropertyChanged += HomeViewModel_PropertyChanged;
    }
}

However, this also does not work correctly. The CollectionView still moves above the header (Row 0) instead of shifting to Row 1.

My Questions:

1. What is the correct way to dynamically change Grid.Row in .NET MAUI?
2. Why does SetValue(Grid.RowProperty, ...) not work as expected?
3. Is there a better way to solve this issue?

Additional Details: Framework: .NET MAUI Platforms: Android & iOS Issue: CollectionView moves to Row 0 (above the header) instead of shifting to Row 1 when HasAppointments is false.

<CollectionView Grid.Row="{Binding HasAppointments}" />

<CollectionView Grid.Row="2">
    <CollectionView.Triggers>
        <DataTrigger TargetType="CollectionView" Binding="{Binding HasAppointments}" Value="False">
            <Setter Property="Grid.Row" Value="1" />
        </DataTrigger>
    </CollectionView.Triggers>
</CollectionView>

[ObservableProperty]
private bool hasAppointments;

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.4"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Header (Always Visible) -->
    <components:HomeHeader Grid.Row="0" />

    <!-- Appointment Information (Hidden if No Appointments) -->
    <Grid Grid.Row="1">
        <components:HomePageDisplayingAppointmentBorder IsVisible="{Binding HasAppointments}"/>
    </Grid>

    <!-- CollectionView for Buttons -->
    <CollectionView Grid.Row="2"
                    x:Name="MyCollectionView"
                    ItemsSource="{Binding HomeButton}"
                    VerticalOptions="FillAndExpand">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <components:HomeButton Data="{Binding .}" 
                                       BackgroundColor="{DynamicResource Company}" 
                                       TextColor="{DynamicResource Company}" 
                                       FrameTapped="OnButtonTapped" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>

• c#
• xaml
• maui

Share Improve this question Follow asked Feb 20 at 10:17 Mohammed KhalilMohammed Khalil 111 bronze badge 1

• Could you post an image for "jumps to Row 0"? There might be issue put collectionView into a row without fixed height, instead you can try put CollectionView into another Grid, and also try the behaviour when height is fixed. – Shaw Commented Feb 20 at 21:55

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Generally, changing of the values for Grid.Row is needed for a swap. i.e. 1 gets move to 2 and 2 gets move to 1. In your case, since you want to "collapse" an item, then, this happens automatically. For instance, if I had a definition that went Grid.RowDefinitions="Auto,Auto,Auto" but there was no visible element on Grid.Row="1" then the elements at Grid.Row="0" and Grid.Row="2" will appear connected together.

Anyhow, if you must change the Grid.Row the Binding approach and the DataTrigger should be working. Alternatively, you may like to try converters. The CommunityToolkit.Maui comes with many useful converters so you don't have to write your own. For instance the MathExpressionConverter will allow you to simplify your Bindings with an expression, e.g.

Grid.Row="{Binding HasAppointments,
                   Converter={toolkit:MathExpressionConverter}
                   ConverterParameter='x ? 2 : 1'}" />

Alternatively, you may like to try the BoolToObjectConverter.

<ContentPage.Resources>
    <ResourceDictionary>
        <toolkit:BoolToObjectConverter x:Key="TwoOrOneConverter" TrueObject="2" FalseObject="1"/>
    </ResourceDictionary>
</ContentPage.Resources>

<!-- ... -->

Grid.Row="{Binding HasAppointments, Converter={StaticResource TwoOrOneConverter}}"

Setting the IsVisible property to false on all items in single Grid cell (same column and row) in Grid should make it disappear (without changing the RowDefinitions of Grid).
For this case should be enough to:

Header = row 0  
Today's Appointments = row 1  
CollectionView = row 2  

and then only to set IsVisible on 'Today's Appointments' to make row 1 disappear.

They are reported some bugs that may be relevant with overflows when CollectionView is used but I believe they should be fixed with next MAUI releases for .NET 9.
Also if you think that it is MAUI bug, you can report it here or look for another relevant if exists: https://github/dotnet/maui/issues?q=is%3Aissue%20state%3Aopen%20CollectionView

You can alternatively try to use Grid.SetRow(BindableObject, position) / Grid.SetColumn(BindableObject, position) directly in your code or use CollectionView's header to contain Today's Appointments if you want also to make it scroll with CollectionView itself.

本文标签： cHow to dynamically change GridRow in NET MAUI based on a bindable propertyStack Overflow