Search code examples
c#.netmauihot-reload

Maui changes on control size only active after hot reload

A generic problem I have been facing more than once, I've been trying to find a way arround but it came back way too often, so I'll ask here in hope to get a solution.

The issue

Here's the issue : on a .Net MAUI project, I have been facing some weird situations in which the things I tried to implement are working only AFTER an hot reload. Until I change anything and trigger an hot reload, my changes stay ineffective, but work fine after the hot reload.

I couldn't find anyone mentionning the same issue, is this a known bug ? And if not, any clue on how to debug this and where to look for the source of this problem ? Edit : forgot to mention it, but apart from trying several things in case it was linked to the situations themselves and not hot reload, I've also tried several time to delete and regenerate bin, obj and .vs folders, without any success.

An example to illustrate

I have this piece of code in my xaml file :

<Grid RowDefinitions=auto,*>
    <Grid ColumnDefinitions="*,15,*" VerticalOptions="Fill" Background="Aqua">
        <Button Grid.Row="1" Grid.Column="0" HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type Grid}}, Path=Height}" Margin="5" ImageSource="remove_bold_white48.svg" StyleClass="CheckNo"/>
        <Button Grid.Row="1" Grid.Column="2" HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type Grid}}, Path=Height}" Margin="5" ImageSource="check_double_white48.svg" StyleClass="CheckOk"/>
    </Grid>
</Grid>

Which renders as follow : App before hot reload

But once I trigger hot reload, by for example setting the Margin property of one of the button to 15, and then back to 5 immediatly, and saving my file : App after hot reload Which is the expected result. However once I rebuild my project, the buttons go back to the wrong height from the first picture.

Edit : added the StyleClass for my second button (first is the same with Green replaced by Red) :

<Style TargetType="View" ApplyToDerivedTypes="True" Class="CheckOk">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource GreenYesLT}, Dark={StaticResource GreenYesDT}}"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray600}, Dark={StaticResource Gray400}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
Solution

  • Okay turns out @Cyrbosys's comment pointed me to the right direction : the issue was due to the order in which the sizes were set.

    TL;DR : Buttons heights were set, then Grid was resized, but Button resize was not triggered ; only hot reload triggered the size update since it used new Grid size.

    Basically here it came from the fact that my application was locked in Portrait mode, and Landscape mode was allowed for this view only. So when I loaded this view, it set the size of the Grid, THEN swapped to landscape mode, resizing the Grid to fit the now landscape-oriented device, but didn't resize the button in this new configuration.

    So for anyone coming here with a similar issue, and especially similar behaviors regarding hot reload, it probably means your control isn't updated when some other objects it depends on are updated.