›

Xamarin Forms Frame not expanding with content

foamsterfoamster Member ✭✭
in Xamarin.Forms

I'm new to Xamarin Forms, and I've met my first challenge. I want a Frame around my Stacklayout within a Listview. When the user selects an item in the Listview I want some controls to appear. This works fine without the Frame, but the Frame does not expand when the controls appear. How can I change or get around this behavior?

Since I simply cannot get the editor here to behave, my code is linked below:
pastebin-dot-com/QyzWPYsT

Tagged:

Best Answers

Answers

  • HarshitaHarshita INMember ✭✭✭✭

    @foamster
    1I think this video can help you.

  • foamsterfoamster Member ✭✭

    Thanks for the answer, @Harshita but my problem is not expanding a Listview (that part works fine). It is expanding a frame that does not work..

  • HarshitaHarshita INMember ✭✭✭✭

    what do you want? can you show it visualy?so that it will be helpfull for answering

  • foamsterfoamster Member ✭✭

    I linked my code in the original question, you can see the effect if you copy it into a solution and run it..

  • ColeXColeX Member, Xamarin Team Xamurai
    Accepted Answer

    As a workaround , i add a tap gesture on viewcell and resize cell height .

    Xaml

    <StackLayout>
        <ListView x:Name="listView" HasUnevenRows="True" ItemsSource="{Binding Items}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell Tapped="ViewCell_Tapped">
                        <StackLayout BackgroundColor="Red">
                            <Frame BackgroundColor="White" BorderColor="Black">
                                <StackLayout BackgroundColor="Red">
                                    <Label Text="{Binding Name}"></Label>
                                    <Entry Text="{Binding Details}" IsVisible="{Binding ShowDetails}"></Entry>
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

    Code behind

    private void ViewCell_Tapped(object sender, EventArgs e)
    {
        var s = sender as ViewCell;

        ViewModelItem a = s.BindingContext as ViewModelItem;
        a.ShowDetails = !a.ShowDetails;

        if(a.ShowDetails == true)
        {
            s.Height += 100;
        }
        else
        {
            s.Height -= 100;
        }


        s.ForceUpdateSize();
    }

    Refer https://github.com/xamarin/xamarin-forms-samples/blob/master/UserInterface/ListView/DynamicUnevenListCells/UnevenListCells/HomePage.xaml.cs

  • foamsterfoamster Member ✭✭
    Accepted Answer

    @ColeX Thanks for the reply. I went with a similar, but slightly different approach:

    https://stackoverflow.com/questions/54977809/xamarin-forms-frame-not-expanding-with-content/55023811

  • Add0bbAAdd0bbA Member ✭
    edited August 8

    i have the same problem here. Any solutions ?

    i have 2 labels inside a Vertical stackview inside viewcell inside listview(hasUnevenRows=true)

    label2 visibility is binding to item.isAnswerVisible as {Binding isAnswerVisible}

    onItemClick, i change items isAnswerVisible to !isAnswerVisible

    Obviously label2 obeys binding and changes visibility
    (i could understand that because it renders itself out of stackView and View Cell over below viewCell )

    but stackView surrounding labels , can not detect visibility change and does not change its height

    First stackview was surrounded with frame. i thought frame was the problem and comment it out.
    But seems to be stackview is the problem

    Problem seems to be not about binding. Binding works. i could see that

    Problem seems to be stackView not realizing children changing visibilities.

    Varios Fill and FillANdExpand combinations tried for VerticalOptions for all elements.
    Not working.

    ListView is inside Absolute Layout

    using XamarinForms 4.1.06....

        <ListView
        x:Name="listView"
        SeparatorVisibility="None"
        HasUnevenRows="True"
        SelectionMode="None"
        AbsoluteLayout.LayoutFlags="All"
        AbsoluteLayout.LayoutBounds="1,1,1,0.85"
        HorizontalOptions="Fill"
        VerticalOptions="Fill"
        CachingStrategy="RetainElement"
        BackgroundColor="Orange"
        ItemsSource="{Binding faqs}"
        ItemTapped="listViewItem_Tapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <!--<Frame
                        Margin="20,10"
                        Padding="25,15"
                        CornerRadius="10"
                        OutlineColor="#ebebeb"
                        BackgroundColor="White"
                        HasShadow="False"
                        HorizontalOptions="Fill"
                        VerticalOptions="FillAndExpand">

                    </Frame>-->
                    <StackLayout
                        HorizontalOptions="Fill"
                        VerticalOptions="FillAndExpand"
                        Padding="10"
                        Margin="10,3,10,3"
                        BackgroundColor="Green"
                        Spacing="15">
                        <Label
                            x:Name="lbl"
                            HorizontalOptions="Fill"
                            VerticalOptions="StartAndExpand"
                            BackgroundColor="Red"
                            Text="{Binding question}"
                            FontSize="18"
                            TextColor="#525252"
                            FontFamily="{StaticResource TitilliumWeb-Regular}"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Start" />
                        <Label
                            x:Name="lblAnswer"
                            HorizontalOptions="Fill"
                            VerticalOptions="EndAndExpand"
                            BackgroundColor="Azure"
                            Text="{Binding answer}"
                            FontSize="17"
                            TextColor="#525252"
                            FontFamily="{StaticResource TitilliumWeb-Regular}"
                            VerticalTextAlignment="Center"
                            HorizontalTextAlignment="Start"
                            IsVisible="{Binding isAnswerVisible}" />
                    </StackLayout>
                </ViewCell>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>
Sign In or Register to comment.