XAML How do I access Button that's inside a ListView?

Question

I have the following ListView which displays a button for each item in the list. I want the buttons to pass through their primary key 'BoxID' when clicked and open up a new page. The problem arises due to the corresponding cs document not being able to reference the button. Why is the cs function not able to access this button? Is there a way around this?

XAML:

<ListView x:Name="boxList" ItemsSource="{Binding Boxes}">
    <ListView.ItemTemplate> 
        <DataTemplate> 
            <ViewCell>
                <ViewCell.View>
                    <StackLayout Orientation="Horizontal" Padding="10,0">
                        <StackLayout HorizontalOptions="StartAndExpand">
                            <Button x:Name="editBoxButton" Text="{Binding 
                                    BoxName}" CommandParameter="{Binding 
                                    BoxID}"
                                    FontAttributes="Bold" Clicked="editBox" 
                                    HeightRequest="75" WidthRequest="150" 
                                    FontSize="Medium" BorderColor="Black"/>
                        </StackLayout>
                        <Label HorizontalOptions="EndAndExpand" 
                        VerticalOptions="Center" Text="{Binding Complete}"/>
                    </StackLayout>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

CS:

private void editBox(object sender, EventArgs e) {
    int temp_boxID = editBoxButton.CommandParameter;
    Navigation.PushModalAsync(new EditBoxPage(temp_boxID));
}

Thanks

check out https://stackoverflow.com/questions/25912091/how-do-i-pass-the-button-as-commandparameter-from-xaml-in-a-xamarin-forms-page — Nick Kovalsky, Oct 29 '17 at 20:38

score 0 · Accepted Answer · answered Oct 29 '17 at 15:49

The reason why it's not able to reference to that button is because it's in a DataTemplate.

Now how can you solve it? It's simple, since the event listener is the clicked event of the button, just cast the sender as a button. Now you can further simplyfy your work by accessing DataContext if it's UWP or the BindingContext if it's xamarin (since you've mentioned android tag too). Your modified for XAMARIN code is below:

 private void editBox(object sender, EventArgs e)
    {

        //if you're using VS2017 with c# 7.0
        if (sender is Button editBoxButton)
        {
            if (editBoxButton.CommandParameter is int temp_boxID)
                Navigation.PushModalAsync(new EditBoxPage(temp_boxID));
        }

        //if not then we'll go the traditional way
        var editBoxButton = sender as Button;
        if(editBoxButton!=null)
        {
            var boxID = editBoxButton.CommandParameter;
            int temp_boxID;
            int.TryParse(boxID.ToString(), out temp_boxID);
            Navigation.PushModalAsync(new EditBoxPage(temp_boxID));

        }
    }

I've put two ways of doing it based on the version of Visual Studio you're using and the version of Language you're using C# 6.0 or C# 7.0

XAML How do I access Button that's inside a ListView?

1 Answers1