.net 无法在MAUI应用程序中滚动到列表底部

anauzrmj  于 2023-05-30  发布在  .NET
关注(0)|答案(2)|浏览(199)

上下文:我正在开发一个跟踪用户每天执行的程序的移动的应用程序。
问题:我遇到了一个问题,在单击用户的个人资料并查看其程序历史记录时,如果用户已完成大量程序,我无法向下滚动到列表底部。
下面是我的实现:
->查看(程序历史):
由第一个解决方案修改的代码(但无法滚动到列表底部)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ProjetSport.Views.ExerciceActivitiesView"
             xmlns:vm="clr-namespace:ProjetSport.ViewModels"
             Title="ExerciceActivitiesView">
    <ContentPage.BindingContext>
        <vm:ActiviteExerciceViewModel></vm:ActiviteExerciceViewModel>
    </ContentPage.BindingContext>
    <ContentPage.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="#FEFAE2" />
            <On Platform="Android" Value="#FEFAE2" />
            <On Platform="UWP" Value="#FEFAE2" />
        </OnPlatform>
    </ContentPage.BackgroundColor>
    <Grid RowDefinitions="Auto,*">
        <VerticalStackLayout Grid.Row="0">
            <HorizontalStackLayout HorizontalOptions="Center" Margin="0,20,0,20">
                <Label Text="Vous avez effectué : "></Label>
                <Label Text="{Binding Avancee}" FontAttributes="Bold"></Label>
                <Label Text="%" FontAttributes="Bold"></Label>
                <Label Text=" du programme selectionné"></Label>
            </HorizontalStackLayout>
            <HorizontalStackLayout HorizontalOptions="Center">
                <Border Stroke="#000000"
            StrokeThickness="5"
            StrokeShape="RoundRectangle 50,50,50,50"
            BackgroundColor="#DFDBC6"
            HorizontalOptions="Center">
                    <Button Text="Afficher les exercices" Clicked="Button_Clicked" HorizontalOptions="Center" BackgroundColor="#FEF8BF" TextColor="#000000"></Button>
                </Border>
                <Border Stroke="#000000"
            StrokeThickness="5"
            StrokeShape="RoundRectangle 50,50,50,50"
            BackgroundColor="#DFDBC6"
            HorizontalOptions="Center">
                    <Button Text="Réduire" Clicked="Button_Clicked_1" HorizontalOptions="Center" BackgroundColor="#FEF8BF" TextColor="#000000"></Button>
                </Border>
            </HorizontalStackLayout>
        </VerticalStackLayout>
        <CollectionView Grid.Row="1"
                WidthRequest="350"
                x:Name="CollectionView"
                IsVisible="true"
             ItemTemplate="{StaticResource Exercices}"
             BackgroundColor="#FEFAE2"
             ItemsSource="{Binding SelectedProgramActivity}"
            />
    </Grid>
</ContentPage>

->代码隐藏:

public partial class ExerciceActivitiesView : ContentPage
{
    public ExerciceActivitiesView()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        CollectionView.IsVisible = true;
    }

    private void Button_Clicked_1(object sender, EventArgs e)
    {
        CollectionView.IsVisible = false;
    }
}

->DataTemplate

<DataTemplate x:Key="Activite">
                <Border Stroke="#000000" StrokeThickness="3" BackgroundColor="#F2EED5" StrokeShape="RoundRectangle 10, 20, 20, 10" Margin="0,10,5,20">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <HorizontalStackLayout Margin="50,20,0,20">
                            <Label Text="{Binding Name}"
                   Grid.Column="1"
                   HorizontalTextAlignment="Center"
                   FontSize="Small"
                               Margin="-10,0,0,0"
                               TextColor="#100905"
                    ></Label>
                        </HorizontalStackLayout>
                        <HorizontalStackLayout Margin="240,15,0,0">
                            <Label Text="{Binding Date, StringFormat='{0:dd/MM/yyyy}'}"
                   Grid.Column="2"
                   HorizontalTextAlignment="Center"
                   FontSize="Small"
                               Margin="-10,0,0,0"
                               TextColor="#100905"
                            />
                        </HorizontalStackLayout>
                    </Grid>
                </Border>
            </DataTemplate>

我将感谢任何关于如何解决这个滚动问题的指导。先谢谢你了!

tcbh2hod

tcbh2hod1#

如果Maui在VerticalStackLayout中遇到CollectionView问题,这应该会有所帮助。将CollectionView移动到它自己的Grid Row中,并给予所有剩余空间*

<Grid RowDefinitions="Auto,*">
   <VerticalStackLayout Grid.Row="0">
      ... all your xaml EXCEPT CollectionView ...
   </VerticalStackLayout>
   <CollectionView Grid.Row="1" ...>
      ...
   </CollectionView>
</Grid>
iyfjxgzm

iyfjxgzm2#

如果你有很多数据,你也可以试着这样做来滚动你的数据

<ContentPage.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="#FEFAE2" />
            <On Platform="Android" Value="#FEFAE2" />
            <On Platform="UWP" Value="#FEFAE2" />
        </OnPlatform>
    </ContentPage.BackgroundColor>
    <ScrollView>
        <VerticalStackLayout>
          
            <!-- The code of your project  -->
           
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

相关问题