Слайд-макет в соответствии со списком прокрутки. - Xamarin.forms - PullRequest
Новая
       59

Слайд-макет в соответствии со списком прокрутки. - Xamarin.forms

0 голосов
/ 21 февраля 2020

В моем приложении Xamarin.Forms у меня есть StackLayout и ListView.

Я хочу скрыть / показать этот StackLayout в зависимости от направления прокрутки ListView:

Если пользователь прокручивает вниз - > сдвиньте вверх StackLayout и скройте.

Если пользователь прокручивает вверх -> сдвиньте вниз StackLayout и покажите.

Я только что подписался на событие OnAppearing ListView. 

ObservableCollection<DistrictData> DistrictDatas = new ObservableCollection<DistrictData>();
int lastItemIndex;
int currentItemIndex;
private void FirstListview_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    DistrictData item = e.Item as DistrictData;

    currentItemIndex = DistrictDatas.IndexOf(item);
    if (currentItemIndex > lastItemIndex)
    {
        SelectAllLayout.TranslationY -= 30;
        SelectAllLayout.IsVisible = false;
    }
    else
    {
        SelectAllLayout.TranslationY = 0;
        SelectAllLayout.IsVisible = true;
    }
    lastItemIndex = currentItemIndex;
}

My Xmal 

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
             xmlns:controls="clr-namespace:SampleApp.CustomRender"
             mc:Ignorable="d"             
             x:Class="SampleApp.Views.Notification_Center.Add_New_Notification.Districts">
    <ContentPage.Content>
        <Grid>

            <Grid BackgroundColor="#076c9c">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>                  
                </Grid.RowDefinitions>
                <Grid x:Name="SelectAllLayout" Grid.Row="0" Margin="10,10,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <BoxView Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand" BackgroundColor="LightBlue" HeightRequest="0.1"></BoxView>

                        <Frame Grid.Row="0" HasShadow="False" BackgroundColor="White" Padding="7" CornerRadius="20" Grid.Column="1">
                            <Label Text="Step 1" FontSize="Micro" TextColor="Black" HorizontalOptions="Center" VerticalOptions="Center" Margin="10,0,10,0">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </Frame>
                        <BoxView Grid.Row="0" VerticalOptions="Center" Grid.Column="2" HorizontalOptions="FillAndExpand" BackgroundColor="LightBlue" HeightRequest="0.1"></BoxView>
                        <StackLayout  Grid.Row="1" HorizontalOptions="StartAndExpand" Orientation="Horizontal" Margin="12,0,0,0">
                            <CheckBox IsChecked="False" HorizontalOptions="Start" VerticalOptions="Center" Color="LightGreen"></CheckBox>
                            <Label Text="Select All" FontSize="Small" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" Margin="10,0,0,0">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </StackLayout>
                    </Grid>                      
                <StackLayout  VerticalOptions="Center" Grid.Row="1"   x:Name="ListLayout"  BackgroundColor="Transparent" 
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">

            <ListView 
             x:Name="FirstListview"
             HasUnevenRows="True"                 
             HeightRequest="{Binding Path=Height, Source={x:Reference ListLayout}}"  
             CachingStrategy="RecycleElement"
             HorizontalOptions="FillAndExpand"                 
             BackgroundColor="Transparent"      
             ItemAppearing="FirstListview_ItemAppearing"
             ItemTapped="DistrictList_ItemTapped"
             VerticalOptions="FillAndExpand"  
             Margin="7,7,7,0"       
             SeparatorVisibility="None">
                        <ListView.ItemTemplate >
                            <DataTemplate >
                                <ViewCell >
                                    <ViewCell.View>
                                        <Frame HorizontalOptions="FillAndExpand"                                                                                 
                                           BorderColor="#4088CCF1" BackgroundColor="#4088CCF1"
                                                       Padding="10"
                                           Margin="3"
                                           CornerRadius="6">
                                            <Frame.HasShadow>
                                                <OnPlatform x:TypeArguments="x:Boolean" iOS="false" Android="true"/>
                                            </Frame.HasShadow>
                                            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                                                <CheckBox HorizontalOptions="Start" IsChecked="{Binding Selected}" Color="LightBlue" Margin="2,-6,0,0" VerticalOptions="Start"></CheckBox>
                                                <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand" >
                                                    <Label Text="District Name" FontSize="Micro" TextColor="LightBlue" Margin="10,0,0,0"></Label>
                                                    <Label Text="{Binding Heading}" VerticalOptions="Center" FontSize="12" HorizontalTextAlignment="Start" TextColor="White" Margin="10,5,5,5">
                                                        <Label.FontFamily>
                                                            <OnPlatform x:TypeArguments="x:String">
                                                                <On Platform="iOS" Value="Montserrat-Regular" />
                                                                <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                                            </OnPlatform>
                                                        </Label.FontFamily>
                                                    </Label>
                                                </StackLayout>
                                                <Image Source="NC_rightarrow.png" HorizontalOptions="EndAndExpand" HeightRequest="15"  Margin="0,0,7,0" VerticalOptions="Center"></Image>
                                            </StackLayout>
                                        </Frame>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Grid>        
        </Grid>
    </ContentPage.Content>  
</ContentPage>

Но это не работает так, как я задумал. Когда мы прокручиваем, раскладка отображается и скрывается случайным образом. Как это решить? Я передал этот вопрос Ссылка . Но не повезло.

1 Ответ

0 голосов
/ 22 февраля 2020

Ну, я должен сказать, что в вашем коде нет ничего плохого, кроме того, что вы постоянно используете визуальный элемент с обновленными значениями, и это, на мой взгляд, вызывает мерцание. Мне удалось устранить мерцание, реализовав viewmodel и уменьшив попадания в сетку. Это был частичный успех, поскольку привязка к высоте сетки выполнялась правильно все время, но сама сетка, похоже, имеет проблемы с обновлением высоты при прокрутке списка. В вашем случае (на мой взгляд) лучшим решением является использование абсолютного макета в качестве дополнительного пользовательского меню. Работает нормально, не вызывая описанных проблем. Вы можете найти рабочий базис c пример здесь .

...