CODEWITHSUNDEEP
xamarin.formsxamarin.androidxamarin.ios
Razzzz
Razzzz

Reputation: 391

Xamarin.Forms Why so much space between two stacklayouts in PopUp view

enter image description here``` 

<pages:PopupPage.Resources>
        <local1:ChangeFrameBackgroudColor x:Key="ChangeFrameBackgroudColor" />
    </pages:PopupPage.Resources>

    <pages:PopupPage.Animation>
        <animations:ScaleAnimation DurationIn="400"
                                   DurationOut="300"
                                   EasingIn="SinOut"
                                   EasingOut="SinIn"
                                   HasBackgroundAnimation="True"
                                   PositionIn="Center"
                                   PositionOut="Center"
                                   ScaleIn="1.2"
                                   ScaleOut="0.8" />
    </pages:PopupPage.Animation>

    <StackLayout Margin="12"

                 BackgroundColor="WhiteSmoke"
                 HorizontalOptions="Center"
                 VerticalOptions="Center"
                 >
        <StackLayout>

            <ListView x:Name="list" HasUnevenRows="True"  ItemsSource="{Binding Firms}" SelectedItem="{Binding FirmId} " Header="{Binding}" ItemTapped="Choose_firm" SelectionMode="Single" Margin="0"  >
                <ListView.ItemTemplate >
                    <DataTemplate>
                        <local:ExtendedViewCell SelectedBackgroundColor="WhiteSmoke"  >

                            <StackLayout  Padding="20, 10"  >
                                <Frame x:Name="frameLabel" BorderColor="#2188ff" BackgroundColor="{Binding IsActive, Converter={StaticResource ChangeFrameBackgroudColor}}" CornerRadius="10">
                                    <Label  FontAttributes="Bold" FontSize="18" TextColor="Black" Text="{Binding Name}" ></Label>
                                </Frame>
                            </StackLayout>

                        </local:ExtendedViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <ContentView BackgroundColor="#006BE6" >
                            <Label Margin="10" HorizontalOptions="CenterAndExpand" Text="Choose Firm"  TextColor="White" FontSize="20" FontAttributes="Bold"/>
                        </ContentView>
                    </DataTemplate>
                </ListView.HeaderTemplate>
            </ListView>
            <StackLayout VerticalOptions="End" Orientation="Horizontal" >
                <Label Text="Check Default:"  FontSize="18" />
                <CheckBox  IsChecked="False" Color="#006BE6" ></CheckBox>
            </StackLayout>
            </StackLayout>

        <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,10">
            <Button Text="CHANGE"  BackgroundColor="#006BE6" IsEnabled="{Binding !IsBusy}" TextColor="White" Command="{Binding LoadFirmCommand}" CommandParameter="{Binding FirmId}" CornerRadius="10"></Button>
            <Button Text="CANCEL"  BackgroundColor="Gray" IsEnabled="{Binding !IsBusy}" TextColor="White" Clicked="ClosePopUp" CornerRadius="10"></Button>
        </StackLayout>
    </StackLayout>

</pages:PopupPage>

In first StackLayout i got ListView with only 3 elements. After that is lot empty space , and at the bottom of the PopUp are other two StackLayouts. I tried with Margins , Padding but nothing changed. I don't know what is the problem. Why is so much space. The bottom two StackLayouts dont have space between. How to solve this empty space?

Upvotes: 0

Views: 605

Answers (1)

SomeStudent
SomeStudent

Reputation: 3048

I have not ran your code, but, looking at your XAML I can see that for your stack layout in the vertical option we tell it to end

<StackLayout VerticalOptions="End" Orientation="Horizontal" >
                <Label Text="Check Default:"  FontSize="18" />
                <CheckBox  IsChecked="False" Color="#006BE6" ></CheckBox>

However, Note how it is wrapped in the parent stack layout. Since it doesn't have a height request, it simply obeys what it was told to do. The parent stacklayout is the one where the list view is defined. So it loads the list view and then it renders the other stack layout at the bottom (End), does causing the massive gap so in essence: 

<StackLayout VerticalOptions="End" Orientation="Horizontal" >
                <Label Text="Check Default:"  FontSize="18" />
                <CheckBox  IsChecked="False" Color="#006BE6" ></CheckBox>
            </StackLayout>
            </StackLayout>

Goes To:

</StackLayout>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
                <Label Text="Check Default:"  FontSize="18" />
                <CheckBox  IsChecked="False" Color="#006BE6" ></CheckBox>
            </StackLayout>

Upvotes: 1

Related Questions