Xamarin.Forms 检测自定义 ContentView 单击外部事件

Question

我有一个 CustomCalendar 元素，它是通过扩展 ContentView 并在另一个 ContentPage 中使用此自定义视图而创建的。我尝试使用 Unfocused 事件来检测外部点击。但问题是它没有触发事件处理程序。您能否建议我以更好的方式检测点击之外的元素。

我在页面中以这种方式使用我的自定义视图，其中包含 Unfocused EventToCommandBehavior

<views:CustomCalendar x:Name="cal">
       <views:Calendar.Behaviors>
             <prism:EventToCommandBehavior 
                           EventName="Unfocused"
                           Command="{Binding UnfocusedCalandar}"/>
       </views:Calendar.Behaviors>
</views:Calendar>

Answer 1

Unfocused 事件在 VisualElement 失去焦点时引发，它只适用于能够接收焦点的元素，不幸的是 ContentView 无法接收焦点，所以 focused 和 Unfocused 事件永远不会触发内容视图。

可以接收焦点的元素：Entry、Editor、Picker等..。

---

作为一个临时解决方法，你可以将 ContentView 包装到 StackLayout 中，在 ContentView 和 parenet 布局上设置点击手势，它自己的点击手势会阻止父视图的手势。

<StackLayout BackgroundColor="Red" >
        <ContentView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" >
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="ContentViewTap"/>
            </ContentView.GestureRecognizers>
        </ContentView>


        <CollectionView BackgroundColor="Gray" Focused="CollectionView_Focused" >
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.RowSpan="2"
                       Source="dog.png"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                        <Label Grid.Column="1"
                       Text="{Binding }"
                       FontAttributes="Bold" />
                        <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding }"
                       FontAttributes="Italic"
                       VerticalOptions="End" />

                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Tapped="StackLayoutTap" />
                        </Grid.GestureRecognizers>
                    </Grid>


                </DataTemplate>
            </CollectionView.ItemTemplate>


        </CollectionView>

        <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Tapped="StackLayoutTap" />
        </StackLayout.GestureRecognizers>
    </StackLayout>