如何将 ScrollView 减少到仅适用于 Xamarin 中未隐藏的项目

Question

我有一个隐藏的元素，当我点击地图中的某个标记时，它们会被可视化。

但是当我启动应用程序时隐藏了我有一些很大的空白空间？

这是代码：

    <?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MaritsaTundzhaForecast"
             xmlns:local1="clr-namespace:MaritsaTundzhaForecast.Models"
             x:Class="MaritsaTundzhaForecast.MainPage">

    <ContentPage.Resources>

        <ResourceDictionary>
            <local1:LevelToImageConverter x:Key="levelImage" />
        </ResourceDictionary>

    </ContentPage.Resources>




    <StackLayout 
         BackgroundColor="#262626"
                    HeightRequest="10">
        <Label Text="ХИДРОЛОГИЧНА ПРОГНОЗА" 
                HorizontalOptions="CenterAndExpand"
                VerticalTextAlignment="End"
                FontAttributes="Bold"
                TextColor="White"
                Padding="0,10,0,0"/>

        <Label Text="Финансирано по програма на МОН НП 'Млади учени и постдокторанти.' НИМХ - Филиал Пловдив." 
                HorizontalOptions="CenterAndExpand"
                VerticalTextAlignment="End"
                FontAttributes="Bold"
                TextColor="White"
                Padding="0,10,0,0"/>

        <Button Text="ПРЕДСТАВЯНЕ И ТЪЛКУВАНЕ НА ПРОГНОЗАТА"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />


        <ScrollView VerticalOptions="FillAndExpand" x:Name="scrollView">



            <Grid Margin="0,10,0,10" VerticalOptions="EndAndExpand">

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="280" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <Frame x:Name="frameLevelAlertLbl"
                       
                       BackgroundColor="#262626"
                       CornerRadius="30"
                       HasShadow="True">
                    <StackLayout Grid.Row="0" x:Name="contentLbl" Spacing="0">

                        <Label x:Name="LevelAlertLbl"
                              HorizontalTextAlignment="Center"
                              VerticalTextAlignment="Center"
                              TextColor="Black"
                              FontAttributes="Bold"
                              FontSize="Medium"/>

                    </StackLayout>
                 </Frame>

                <StackLayout Grid.Row="1">
                    <Label x:Name="LevelAlertLbl1"
                  HorizontalTextAlignment="Center"
                  VerticalTextAlignment="Center"
                  TextColor="Black"
                  FontAttributes="Bold"
                  FontSize="Medium">

                    </Label>
                </StackLayout>

                <StackLayout Grid.Row="2">
                    <local:CustomMap x:Name="customMap"
                                   MapType="Street"
                                   HasZoomEnabled="True"
                                   HasScrollEnabled="True"
                                   TrafficEnabled="True"
                                   MoveToLastRegionOnLayoutChange="False"/>
                </StackLayout>

                <StackLayout Grid.Row="3" x:Name="InfoLblForecast" >
                    
                    <Label  TextColor="White" BackgroundColor="#6588cf"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="selectedStationLbl" FontAttributes="Bold"/>
                </StackLayout>

                <StackLayout Grid.Row="4" >
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Frame x:Name="FrameCheckStation"
                               CornerRadius="30"
                               HasShadow="True"
                               BackgroundColor="#262626"
                               Grid.ColumnSpan="3" Grid.Row="0">
                        <Label  TextColor="White" Grid.ColumnSpan="3" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="checkStationLbl" FontAttributes="Bold"/>
                            </Frame>
                            <Label  TextColor="White" Grid.ColumnSpan="3" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="checkStationLbl1" FontAttributes="Bold"/>
                        <Label Text="Дата/час:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="0" Grid.Row="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn1" FontAttributes="Bold"/>
                        <Label Text="Показател:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="1" Grid.Row="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn2" FontAttributes="Bold"/>
                        <Label Text="Праг (0-3):" BackgroundColor="#6588cf" TextColor="White" Grid.Column="2" Grid.Row="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn3" FontAttributes="Bold"/>
                    </Grid>


                    <StackLayout>
                        <ListView x:Name="lstLevel" HasUnevenRows="True" BackgroundColor="#f7f77c">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <ViewCell.View>
                                            <Grid BackgroundColor="#f7f77c">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="*"></RowDefinition>
                                                    <RowDefinition Height="2"></RowDefinition>

                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                                </Grid.ColumnDefinitions>
                                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding dateForecast, StringFormat='{0:dd.MM} - {0:hh\\:mmч.}'}" XAlign="Start" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
                                                <Image Grid.Row="0" Grid.Column="1" Source="{Binding levelForecast, Converter={StaticResource levelImage}}" Aspect="Fill"/>
                                                <Label Grid.Row="0" Grid.Column="2" Text="{Binding levelForecast}" XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
                                                <BoxView Color="#001aff" HeightRequest="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
                                            </Grid>
                                        </ViewCell.View>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>

                    <StackLayout Grid.Row="5">

                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="5*"/>
                                <ColumnDefinition Width="5*"/>
                                <ColumnDefinition Width="5*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Frame x:Name="FrameCheckValuesLbl"
                               CornerRadius="30"
                               HasShadow="True"
                               BackgroundColor="#262626"
                               Grid.ColumnSpan="3" Grid.Row="0">
                            <Label  BackgroundColor="Green" TextColor="White" Grid.ColumnSpan="3" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="checkValuesLbl" FontAttributes="Bold"/>
                                </Frame>
                            <Label Text="Дата/час:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="0" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn11" FontAttributes="Bold"/>
                            <Label Text="Показател:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="1" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn22" FontAttributes="Bold"/>
                            <Label Text="Праг (0-3):" BackgroundColor="#6588cf" TextColor="White" Grid.Column="2" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn33" FontAttributes="Bold"/>
                        </Grid>

                        <StackLayout HeightRequest="80">
                            <ListView x:Name="lstLevel2" HasUnevenRows="True" BackgroundColor="#f7f77c">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <ViewCell.View>
                                                <Grid BackgroundColor="#f7f77c">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="*"></RowDefinition>
                                                        <RowDefinition Height="2"></RowDefinition>

                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                                        <ColumnDefinition Width="auto"></ColumnDefinition>
                                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                                    </Grid.ColumnDefinitions>

                                                    <Label Grid.Row="0" Grid.Column="0" Text="{Binding dateForecast, StringFormat='{0:dd.MM} - {0:hh\\:mmч.}'}" XAlign="Start" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
                                                    <Image Grid.Row="0" Grid.Column="1" Source="{Binding levelForecast, Converter={StaticResource levelImage}}" Aspect="Fill"/>
                                                    <Label Grid.Row="0" Grid.Column="2" Text="{Binding levelForecast}" XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
                                                    <BoxView Color="#001aff" HeightRequest="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
                                                </Grid>
                                            </ViewCell.View>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackLayout>

                    </StackLayout>
                    

                </StackLayout>
            </Grid>
        </ScrollView>
    </StackLayout>
</ContentPage>

我有六行 - 0,1,2,3 没有隐藏。 rows - 4,5,6 被隐藏。

如何将 ScrollView 减少到第 0、1、2、3 行以及何时显示第 4、5、6 行以减少自动到最后？

Answer 1

可以通过修改Grid定义的行高来实现隐藏效果。

这里是 xaml 代码：

<StackLayout>
    <ScrollView>
        <Grid x:Name="myGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto" />
                <RowDefinition Height="280" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="200" />
            </Grid.RowDefinitions>
            <Label BackgroundColor="Red"></Label>
            <Label BackgroundColor="Orange" Grid.Row="1"></Label>
            <Label BackgroundColor="Yellow" Grid.Row="2"></Label>
            <Label BackgroundColor="Green" Grid.Row="3"></Label>
            <Label BackgroundColor="Blue" Grid.Row="4"></Label>
            <Label BackgroundColor="Purple" Grid.Row="5"></Label>
        </Grid>
    </ScrollView>
    <Button Clicked="Button_Clicked" HeightRequest="50" Text="click"></Button>
</StackLayout>

这是后台代码：

private void Button_Clicked(object sender, EventArgs e)
{
    var res = myGrid.RowDefinitions;
    (res[3] as RowDefinition).Height = 0;
    (res[4] as RowDefinition).Height = 0;
    (res[5] as RowDefinition).Height = 0;
}