locked
Xamarin Forms Frame not expanding with content RRS feed

  • Question

  • User383017 posted

    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

    Monday, March 4, 2019 6:51 AM

Answers

  • User369978 posted

    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

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, March 5, 2019 3:24 AM
  • User383017 posted

    @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

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, March 6, 2019 1:05 PM

All replies

  • User355485 posted

    @foamster 1I think this video can help you. https://www.youtube.com/watch?v=GG10QPrRC3w&feature=youtu.be

    Monday, March 4, 2019 7:09 AM
  • User383017 posted

    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..

    Monday, March 4, 2019 7:19 AM
  • User355485 posted

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

    Monday, March 4, 2019 7:37 AM
  • User383017 posted

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

    Monday, March 4, 2019 7:38 AM
  • User369978 posted

    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

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, March 5, 2019 3:24 AM
  • User383017 posted

    @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

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, March 6, 2019 1:05 PM
  • User387960 posted

    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>
    
    Thursday, August 8, 2019 10:39 AM