Binding SfPopup Content

[Tim Belvin]

I am confused on how to bind a Command to an element in SfPopupLayout.Content. Here is my code:

<?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:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"

             xmlns:popuplayout="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"

             mc:Ignorable="d"

             x:Class="SFFastTrack.Views.Config.AddressTypes">

    

       <popuplayout:SfPopupLayout x:Name="Addresspopup" Closing="Popup_OnClosing" Opened="Popup_OnOpen">

        <popuplayout:SfPopupLayout.PopupView>

            <popuplayout:PopupView AnimationMode="SlideOnTop" AcceptButtonText="Submit">

                <popuplayout:PopupView.ContentTemplate>

                    <DataTemplate x:Name="typesPopupTemplate">

                        <StackLayout>

                            <border:SfBorder HorizontalOptions="FillAndExpand" HasShadow="True" ShadowColor="Gray"

                                             BorderColor="LightGray" Margin="5,5,5,0" BorderWidth="1"

                                             BackgroundColor="White"

                                             CornerRadius="9">

                                <Entry x:Name="NewType" Text="{Binding NewTypeName}"/>

                            </border:SfBorder>

                        </StackLayout>

                    </DataTemplate>

                </popuplayout:PopupView.ContentTemplate>

            </popuplayout:PopupView>

        </popuplayout:SfPopupLayout.PopupView>

        <popuplayout:SfPopupLayout.Content>

            <ListView x:Name="AddressTypeView" ItemsSource="{Binding AddressTypes}" SeparatorVisibility="None">

                <ListView.Header>

                    <StackLayout>

                        <Label Text="Types of Addresses" FontSize="Medium" FontAttributes="Bold" HorizontalTextAlignment="Center" Padding="10"/>

                    </StackLayout>

                </ListView.Header>

                <ListView.Footer>

                    <StackLayout>

                        <Label Text="Add New" BackgroundColor="#f0f0f0" TextColor="#006bcd" VerticalTextAlignment="Center"

                                       VerticalOptions="Center" 

                                       HorizontalTextAlignment="Center" FontSize="20">

                            <Label.GestureRecognizers>

                                <TapGestureRecognizer Tapped="OnAddNew_Tapped" />

                                

                            </Label.GestureRecognizers>

                        </Label>

                    </StackLayout>

                </ListView.Footer>

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <ViewCell>

                            <StackLayout x:Name="vcSL">

                                <Grid>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="0.7*" />

                                        <ColumnDefinition Width="0.3*" />

                                    </Grid.ColumnDefinitions>

                                    <Label Text="{Binding AddressTypeName}" Grid.Column="0"/>

                                    <Button x:Name="DeleteButton" FontFamily="{StaticResource SegoeMDL2Assets}" HorizontalOptions="End"

                                            Text="&#xE74D;" Grid.Column="1" Command="{Binding Path=BindingContext.DeleteCommandX, Source={x:Reference vcSL}}" CommandParameter="{Binding .}"/>

                                    

                                </Grid>

                            </StackLayout>

                        </ViewCell>

                    </DataTemplate>

                    

                </ListView.ItemTemplate>

                

            </ListView>

        </popuplayout:SfPopupLayout.Content>

    </popuplayout:SfPopupLayout>

    

</ContentPage>

What is required to bind the Button clicked event to my ViewModel Command DeleteCommandX? In my code behind for this page, I set the BindingContext to the viewmodel. Note the data bindings work as expected. Appreciate any help.

[Karthikraja Kalaimani]

Hi Tim Belvin,

Thanks for contacting Syncfusion support.

Based on provided information currently we are working on your query “how to bind a Command to an element in SfPopupLayout.Content”. We will update further details on 21^st November 2019. We appreciate your patience until then.

Regards, 

Karthik Raja

[Karthikraja Kalaimani]

Hi Tim Belvin,

Thanks for your patience.

We have analyzed your code, you have wrongly set the source for that DeleteButton so only Command is not triggered for DeleteButton. To overcome this set X:Name to that Page and then set the source as a page to DeleteButton. We have prepared a sample for the same. 

Please refer the below code example,

 

[XAML] 

<?xml version="1.0" encoding="utf-8" ?> 

<ContentPage ……….. 

             ……. 

             x:Name="page" 

             …..> 

  <ContentPage.Content> 

    <popuplayout:SfPopupLayout x:Name="Addresspopup">
       …. 

        <popuplayout:SfPopupLayout.Content> 

                <ListView x:Name="AddressTypeView" ItemsSource="{Binding Employees}" SeparatorVisibility="None"> 

                ……. 

                <ListView.ItemTemplate> 

                    <DataTemplate> 

                    <ViewCell> 

                        <StackLayout x:Name="vcSL"> 

                            <Grid> 

                          ……… 

                                <Button x:Name="DeleteButton" HorizontalOptions="End" 

                                            Text="&#xE74D;" Grid.Column="1" Command="{Binding Path=BindingContext.ClosePopup, Source={x:Reference page}}" CommandParameter="{x:Reference DeleteButton}"/> 

 

                            </Grid> 

                        </StackLayout> 

                    </ViewCell> 

                </DataTemplate> 

                </ListView.ItemTemplate> 

            </ListView> 

        </popuplayout:SfPopupLayout.Content> 

    </popuplayout:SfPopupLayout> 

    </ContentPage.Content> 

</ContentPage> 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_Demo-859598126-134205181.zip 

We hope this helps please let us know if need further assistance from us.

Regards, 

Karthik Raja