Xamarin实现点击按钮删除父级StackLayout的技术问题

核心问题 #

当前代码存在两个关键缺陷：

• 动态新增的"X"按钮未绑定点击事件，点击无响应
• DeleteBtn_Clicked方法未实现移除父级StackLayout的逻辑

修复方案与代码修改 #

1. 给动态创建的删除按钮绑定点击事件

修改AddBtn_Clicked方法，为新增的按钮绑定删除事件处理函数：

public void AddBtn_Clicked(object sender, EventArgs args)
{
    var deleteBtn = new Button() { Text = "X", WidthRequest = 45 };
    deleteBtn.Clicked += DeleteBtn_Clicked; // 绑定点击事件

    var newplayer = new StackLayout
    {
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Center,
        Children =
        {
            new Entry() { Placeholder = "Player", WidthRequest=300 },
            deleteBtn
        }
    };
    Players.Children.Add(newplayer);
}

2. 实现删除逻辑

在DeleteBtn_Clicked方法中，通过点击的按钮找到其父级布局，再从容器中移除：

public void DeleteBtn_Clicked(object sender, EventArgs args)
{
    // 获取触发事件的按钮
    var deleteBtn = sender as Button;
    if (deleteBtn == null) return;

    // 获取按钮所在的水平StackLayout
    var playerLayout = deleteBtn.Parent as StackLayout;
    if (playerLayout == null) return;

    // 从Players容器中移除该布局
    Players.Children.Remove(playerLayout);
}

3. 初始项验证

XAML中初始的"X"按钮已绑定DeleteBtn_Clicked，无需修改XAML代码，现在初始项和新增项的删除按钮均可正常工作。

完整修改后代码 #

.xaml文件（无改动）

<ScrollView>
    <StackLayout>
        <Label Text="Enter Players:"></Label>
        <StackLayout x:Name="Players">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                <Entry Placeholder="Player" WidthRequest="300"/>
                <Button Text="X" WidthRequest="45" Clicked="DeleteBtn_Clicked"></Button>
            </StackLayout>
        </StackLayout>
        <Button VerticalOptions="End" Text="Add Player" Clicked="AddBtn_Clicked"></Button>
    </StackLayout>
</ScrollView>

.xaml.cs文件

public void AddBtn_Clicked(object sender, EventArgs args)
{
    var deleteBtn = new Button() { Text = "X", WidthRequest = 45 };
    deleteBtn.Clicked += DeleteBtn_Clicked;

    var newplayer = new StackLayout
    {
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Center,
        Children =
        {
            new Entry() { Placeholder = "Player", WidthRequest=300 },
            deleteBtn
        }
    };
    Players.Children.Add(newplayer);
}

public void DeleteBtn_Clicked(object sender, EventArgs args)
{
    var deleteBtn = sender as Button;
    if (deleteBtn == null) return;

    var playerLayout = deleteBtn.Parent as StackLayout;
    if (playerLayout == null) return;

    Players.Children.Remove(playerLayout);
}

内容的提问来源于stack exchange，提问作者Benjamin