Column in grid overlapping when the data is updated at runtime

Srilekha Chowdary 20 Reputation points
2024-04-24T13:17:59.2633333+00:00

I am using a custom control with a frame(contains an entry and an icon in a horizontal grid) and a collection view in stack layout with vertical orientation as attached below.

I am facing an issue wherein when a search text is typed matching lowest length of item in collection source the UI is updated accordingly but removing the text completely makes the search icon come in between the layout as attached below
User's image

User's image

Attaching the code for reference
<StackLayout Orientation="Vertical">

<Frame

    x:Name="entryFrame"

    Margin="15,15,15,0"

    Padding="0"

    BackgroundColor="White"

    BorderColor="#80B5E9"

    CornerRadius="4"

    HasShadow="False">

    <Grid ColumnDefinitions="*,Auto" HorizontalOptions="FillAndExpand">

        <Entry

            x:Name="entry"

            Grid.Column="0"

            Margin="10,6,0,2"

            BackgroundColor="{DynamicResource ClrWhite}"

            FontSize="16"

            HorizontalOptions="FillAndExpand"

            PlaceholderColor="{DynamicResource ClrAccEcolabBlue}"

            TextChanged="Search_TextChanged"

            VerticalOptions="FillAndExpand" />

        <StackLayout

            Grid.Column="1"

            BackgroundColor="{DynamicResource ClrAccEcolabBlue}"

            HorizontalOptions="EndAndExpand">

            <Label

                Padding="11"

                FontFamily="AppIconsFont"

                FontSize="24"

                Text="{x:Static ext:IconFont.IconSearch}"

                TextColor="White" />

        </StackLayout>

    </Grid>

</Frame>

<CollectionView

    x:Name="collection"

    Margin="0,5,0,0"

    BackgroundColor="{DynamicResource ClrWhite}"

    MaximumHeightRequest="300"

    MinimumHeightRequest="100"

    VerticalOptions="FillAndExpand">

    <CollectionView.GroupHeaderTemplate>

        <local:GroupHeaderTemplateSelector CalculatorGroupHeaderTemplate="{StaticResource CalculatorGroupHeaderTemplate}" />

    </CollectionView.GroupHeaderTemplate>

</CollectionView>

</StackLayout>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,900 questions
{count} votes