Xamarin Forms how to open a popup when you clicked a menu on the listview

Question

I have a XAML Page that holds a ListView of Menu and I'm trying to link the Logout as a button to show the RadPopup. This Popup has no MVVM
I'm a rookie so don't blame me so hard...

This is the ListView on the XAML

        <ListView x:Name="listview" x:FieldModifier="public" 
                  BackgroundColor="{StaticResource BlueDark}"
                  SeparatorVisibility="Default" 
                  SeparatorColor="White" 
                  SelectionMode="Single"
                  HasUnevenRows="False"
                  ios:ListView.SeparatorStyle="FullWidth">

            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:MenuItem}">

                    <local:MenuItem  Title="{x:Static lang:AppResources.MenuHome}"           TargetPage="{x:Type local:AlarmsListPage}"/>
                    <local:MenuItem  Title="{x:Static lang:AppResources.MenuSitesAndAssets}" TargetPage="{x:Type local:AlarmsListPage}"/>
                    <local:MenuItem  Title="{x:Static lang:AppResources.MenuUserProfile}"    TargetPage="{x:Type local:AlarmsListPage}"/>
                    <local:MenuItem  Title="{x:Static lang:AppResources.MenuFeedback}"       TargetPage="{x:Type local:AlarmsListPage}"/>
                    <local:MenuItem  Title="{x:Static lang:AppResources.MenuLogout}"        TargetPage="{x:Type local:AlarmsListPage} "/>
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="33"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Grid.ColumnSpan="3"
                                   Text="{Binding Title}" TextColor="white" Padding="15,0,0,0"
                                   VerticalTextAlignment="Center"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        

And I created a ContenPage for PopupView XAML

    <ContentPage.Content>
        <Button Clicked="LogoutPopup">
            <telerikPrimitives:RadPopup.Popup>
                <telerikPrimitives:RadPopup x:Name="Popup" Placement="Center" OutsideBackgroundColor="WhiteSmoke"  IsModal="False">
                    <telerikPrimitives:RadBorder CornerRadius="10" BackgroundColor="{StaticResource BlueDark}">
                        <Grid Padding="25">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                            </Grid.ColumnDefinitions>
                            <StackLayout Margin="12" Padding="24" Spacing="24" BackgroundColor="{StaticResource BlueDark}" HorizontalOptions="Center" VerticalOptions="Center">
                                <StackLayout>
                                    <Label Grid.Column="0"  Grid.Row="0" Grid.ColumnSpan="2" TextColor="{StaticResource White}" HorizontalTextAlignment="Center" 
                                     Text="Are you sure you want to log out? You will no longer receive alarm notifications." />
                                </StackLayout>
                                <Button Grid.Column="0" Grid.Row="1" BackgroundColor="Transparent" TextColor="{StaticResource White}" Text="Yes"/>
                                <Button Grid.Column="1" Grid.Row="1" BackgroundColor="Transparent" TextColor="{StaticResource White}" Text="No"/>
                            </StackLayout>
                        </Grid>
                    </telerikPrimitives:RadBorder>
                </telerikPrimitives:RadPopup>
            </telerikPrimitives:RadPopup.Popup>
        </Button>
    </ContentPage.Content>
</ContentPage>

I'm trying to bind the PopupView to the Logout ListView. Can someone help me with this?

Answer 1

From my point of view, a Button is not necessary. You could use ItemSelected event of listview to make it.

In xaml, just add listview_ItemTapped event handler:

<StackLayout>
<ListView x:Name="listview" x:FieldModifier="public" 
              ItemTapped="listview_ItemTapped"  // add this line
              BackgroundColor="AliceBlue"
              SeparatorVisibility="Default" 
              SeparatorColor="White" 
              SelectionMode="Single"
              HasUnevenRows="False"
              >
...
...

</ListView>
// you could just put your popup after listview
<telerikPrimitives:RadPopup.Popup>
    <telerikPrimitives:RadPopup x:Name="Popup" ...


...

</telerikPrimitives:RadPopup.Popup>
</StackLayout>

In the.cs file implement it:

void listview_ItemTapped(System.Object sender, Xamarin.Forms.ItemTappedEventArgs e)
    {
        // popup page here
        Popup.IsOpen = true;
    }

Hope it works for you.