Column in grid overlapping when the data is updated at runtime
Srilekha Chowdary
20
Reputation points
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
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>