Xamarin Forms 單擊列表視圖上的菜單時如何打開彈出窗口

Question

我有一個 XAML 頁面，其中包含菜單的 ListView，我正在嘗試將注銷鏈接為按鈕以顯示 RadPopup。 這個 Popup 沒有 MVVM
我是菜鳥所以不要怪我那么難...

這是XAML上的ListView

        <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>
        

我為 PopupView XAML 創建了一個 ContenPage

    <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>

我正在嘗試將 PopupView 綁定到注銷 ListView。 有人可以幫我弄這個嗎？

Answer 1

從我的角度來看，沒有必要使用 Button。 您可以使用列表視圖的 ItemSelected 事件來實現它。

在 xaml 中，只需添加 listview_ItemTapped 事件處理程序：

<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>

在.cs文件中實現它：

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

希望對你有效。