XAML 为什么在.NET MAUI中删除项目后列表视图显示不正确?

nlejzf6q  于 2022-12-20  发布在  .NET
关注(0)|答案(1)|浏览(165)

第一个屏幕上有所有的注解。

在我删掉第一张纸条之后!
我最近开始用. NET MAUI编程。C#列表中的元素被正确删除。但是,删除后剩下的元素只显示了一部分。这意味着只显示了第4个元素。对于其他元素,只显示了一个空栏。
我的代码到目前为止:XAML:

<VerticalStackLayout>
        <ScrollView>
            <StackLayout>

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Image
                        Grid.Column="0"
                        Source="logo.png"
                        WidthRequest="150"
                        HorizontalOptions="Start"
                        VerticalOptions="Start"/>

                    <Label
                        TextColor="Black"
                        Grid.Column="1"
                        Text="TODO"
                        FontSize="35"
                        HorizontalOptions="Start" 
                        VerticalOptions="Start" 
                        Margin="23"/>

                </Grid>



                <Grid BackgroundColor="#24D4A3">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                    <ListView 
                    Grid.ColumnSpan="2"
                    Grid.RowSpan="2"
                    RowHeight="100"
                    x:Name="listview">
                    <ListView.ItemTemplate>
                            <DataTemplate >
                            <ViewCell >

                                    <Grid BackgroundColor="#24D4A3">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Button BackgroundColor="#DEABF5"
                                            Text="{Binding Title}"  
                                            Clicked="onNoteSelected"
                                            BorderWidth="2"
                                            TextColor="Black"
                                            FontSize="28"
                                            Margin="20"
                                            CornerRadius="100"
                                            WidthRequest="350"
                                            HeightRequest="70"
                                            HorizontalOptions="Center"
                                            VerticalOptions="Start"/>

                                        <Button
                                            BindingContext="{Binding Id}"
                                            Clicked="ToDoSolved" 
                                            BorderWidth="2"
                                            BorderColor="Black"
                                            BackgroundColor="White"
                                            WidthRequest="45"
                                            HeightRequest="45"
                                            CornerRadius="35" 
                                            Margin="0,0,260,0" 
                                            />
                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                    <ImageButton  
                                Clicked="Settings"
                                Source="settings.png"
                                Grid.Row="0"
                                Grid.Column="2"
                                BorderColor="#2b3c3c" 
                                BorderWidth="0" 
                                BackgroundColor="#34A4EB" 
                                CornerRadius="35" 
                                HorizontalOptions="End" 
                                WidthRequest="70" 
                                HeightRequest="70" 
                                Margin="0,10, 10, 0" 
                                VerticalOptions="Start"/>
                        <ImageButton 
                                Clicked="CreateNote"
                                Source="add.png"
                                Grid.Row="1"
                                Grid.Column="2"
                                BorderColor="#2b3c3c" 
                                BorderWidth="0" 
                                BackgroundColor="#34A4EB" 
                                CornerRadius="35" 
                                HorizontalOptions="End" 
                                WidthRequest="70" 
                                HeightRequest="70" 
                                Margin="0,0,10,10" 
                                Padding="2,0,0,0"/>
                    </Grid>
            </StackLayout>
        </ScrollView>
    </VerticalStackLayout>

C编号:

public partial class MainPage : ContentPage
    { 

    private ObservableCollection<Note> notes = new ObservableCollection<Note>();
    public ObservableCollection<Note> Notes 
    {
        get { return notes; }
        set { notes = value; }
    }
    public MainPage()   
    {
        InitializeComponent();

        notes.Add(new Note(1, "My Note1", "I'm ugly"));
        notes.Add(new Note(2, "My Note2", "I'm short"));
        notes.Add(new Note(3, "My Note3", "I'm smart"));
        notes.Add(new Note(4, "My Note4", "I'm smart"));
        //notes.Add(new Note(6, "My Note6", "I'm smart"));
        //notes.Add(new Note(7, "My Note7", "I'm smart"));
        //notes.Add(new Note(8, "My Note8", "I'm smart"));
        //notes.Add(new Note(9, "My Note9", "I'm smart"));
        this.BindingContext= Notes;
        listview.ItemsSource= Notes;
        
    }

    private async void CreateNote(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//CreateNote");
    }

    private async void Settings(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Settings");
    }

 

    private void ToDoSolved(object sender, EventArgs e)
    {
        Button button= (Button) sender ;
        
        var id = (int)button.BindingContext;
         
        var item = Notes.SingleOrDefault(x => x.Id == id);
        if (item != null) 
        {
            Notes.Remove(item);
            Console.WriteLine(id);
        }
    
    }

    async void onNoteSelected(object sender, EventArgs e)
    {
        Button button= (Button) sender ;

        var id = (int)button.BindingContext;

        //await Shell.Current.GoToAsync("NotePage" + id);
    }
}

我将感激任何帮助:)

wfveoks0

wfveoks01#

您可以像下面这样使用RefreshView,我简化了您的代码,使其简洁但切中要害。要删除项目,因为您使用的是ListView,所以可以使用ItemSelected方法删除选定的项目。详细信息,请参阅响应项目选择。

    • 代码隐藏:**
public partial class MainPage : ContentPage 
{

    bool isRefreshing;

    public ObservableCollection<Note> Notes { get; private set; } = new ObservableCollection<Note>();

    public ICommand RefreshCommand => new Command(async () => await RefreshItems());

    public bool IsRefreshing
    {
        get { return isRefreshing; }
        set
        {
            isRefreshing = value;
            OnPropertyChanged();
        }
    }

    public MainPage()
    {
        InitializeComponent();

        AddNotes();

        BindingContext = this;
    }

    private void AddNotes()
    {
        Notes.Add(new Note(0, "My Note1"));
        Notes.Add(new Note(1, "My Note2"));
        Notes.Add(new Note(2, "My Note3"));
        Notes.Add(new Note(3, "My Note4"));
    }

    private async Task RefreshItems()
    {
        IsRefreshing = true;

        await Task.Delay(500);

        Notes.Clear();
        AddNotes();
  
        IsRefreshing = false;

    }

}
    • Xaml:**
<RefreshView 

        IsRefreshing="{Binding IsRefreshing}"
        Command="{Binding RefreshCommand}"
        RefreshColor="Black"
        >

        <VerticalStackLayout>

            <ScrollView>

                <StackLayout>

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition />

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition />

                            <ColumnDefinition />

                        </Grid.ColumnDefinitions>


                        <Image

                    Grid.Column="0"

                    Source="logo.png"

                    WidthRequest="150"

                    HorizontalOptions="Start"

                    VerticalOptions="Start"

               />


                        <Label

                    TextColor="Black"

                    Grid.Column="1"

                    Text="TODO"

                    FontSize="35"

                    HorizontalOptions="Start"

                    VerticalOptions="Start"

                    Margin="23"

                    

                    />


                    </Grid>


                    <Grid BackgroundColor="#24D4A3">

                        <Grid.RowDefinitions>

                            <RowDefinition />

                            <RowDefinition />

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition />

                            <ColumnDefinition />

                        </Grid.ColumnDefinitions>


                        <ListView

                Grid.ColumnSpan="2"

                Grid.RowSpan="2"

                RowHeight="100"

                 x:Name="listview"

                ItemsSource="{Binding Notes}" >

                            <ListView.ItemTemplate>

                                <DataTemplate >
                                    <ViewCell>

                                 

                                        <Grid BackgroundColor="#24D4A3" >

                                            <Grid.RowDefinitions>

                                                <RowDefinition Height="auto"/>

                                            </Grid.RowDefinitions>

                                            <Grid.ColumnDefinitions>

                                                <ColumnDefinition Width="auto"/>

                                            </Grid.ColumnDefinitions>

                                            <Button BackgroundColor="#DEABF5"

                                        Text="{Binding Title}"

                                        BorderWidth="2"

                                        TextColor="Black"

                                        FontSize="28"

                                        Margin="20"

                                        CornerRadius="100"

                                        WidthRequest="350"

                                        HeightRequest="70"

                                        HorizontalOptions="Center"

                                        VerticalOptions="Start"/>

                                            <Button

                                        BindingContext="{Binding Id}"

                                       Text="Delete"
                                          

                                        BorderWidth="2"

                                        BorderColor="Black"

                                        BackgroundColor="White"

                                       WidthRequest="45"

                                        HeightRequest="45"

                                        CornerRadius="35"

                                        Margin="0,0,260,0"

                                        />

                                        </Grid>

                                    </ViewCell>
                                </DataTemplate>

                            </ListView.ItemTemplate>

                        </ListView>

                    </Grid>

                </StackLayout>

            </ScrollView>

        </VerticalStackLayout>

    </RefreshView>
    • 注:**
public class Note 
{
    public int Id { get; set; }
    public string Title { get; set; }

    public Note(int id, string title)
    {
         Id = id;
         Title = title;
     }
     
}

相关问题