locked
Expander control covers Header elements when expanded first time RRS feed

  • Question

  • User392993 posted

    New to Xamarin Forms and the Expander control I've added to a UWP project is behaving strangely - when the page opens and I click on the Expander, the expanded content covers almost all of the image and label text in the control's header. Once I collapse the content this never happens again, I can expand and collapse without issue. The behaviour only occurs the first time I click on the Expander. I've spent too much time spinning my wheels on this, hopefully someone can give me some direction on how to resolve the issue.

    XAML:

        <ContentPage.Content>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
    
                <Expander Grid.Row="1">
                    <Expander.Header>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="expand.png" VerticalOptions="StartAndExpand">
                                <Image.Triggers>
                                    <DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}" Value="True">
                                        <Setter Property="Source" Value="collapse.png" />
                                    </DataTrigger>
                                </Image.Triggers>
                            </Image>
                            <Label Grid.Column="1" Text="TEST" HorizontalOptions="Start" VerticalOptions="Center"/>
                        </Grid>
                    </Expander.Header>
                    <Expander.ContentTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5*"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="10">
                                    <Picker Title="Score"/>
                                    <Picker Title="Description"/>
                                </StackLayout>
                                <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
                                    <Button Text="Add" VerticalOptions="EndAndExpand" WidthRequest="75" HeightRequest="35" TextColor="Blue" BackgroundColor="WhiteSmoke" Margin="10"/>
                                    <Button Text="Remove" VerticalOptions="EndAndExpand" WidthRequest="75" HeightRequest="35" TextColor="Firebrick" BackgroundColor="WhiteSmoke" Margin="10"/>
                                </StackLayout>
                                <ListView Grid.Row="1" VerticalOptions="EndAndExpand" Margin="10"/>
                            </Grid>
                        </DataTemplate>
                    </Expander.ContentTemplate>
                </Expander>
            </Grid>
        </ContentPage.Content>
    
    Thursday, May 28, 2020 11:20 PM

All replies

  • User392993 posted

    Issue resolved itself once I added an additional row at the bottom of the page, still don't understand the initial behavior or why adding a StackLayout to the bottom of the page made a difference (if any?).

                    <StackLayout Grid.Row="4">
                        <Label Text="Notes" VerticalTextAlignment="Center" Margin="10"/>
                        <Editor Text="{Binding Notes}" VerticalOptions="FillAndExpand" Margin="10"/>
                    </StackLayout>
    
    Tuesday, June 2, 2020 6:58 PM