在 UWP 中，在 Xamarin.forms 的 Flex 布局中显示所选项目

问题描述

我正在通过 BindableLayout 在 FlexLayout 中显示一个列表。当有人选择一个项目时，我想显示一些背景颜色。在 UWP 中似乎真的很难。

  <FlexLayout x:Name="FlexTypes" Wrap="Wrap" Margin="0" HorizontalOptions="FillAndExpand" BindableLayout.ItemsSource="{Binding Items}">

                                                    <BindableLayout.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackLayout HeightRequest="120" WidthRequest="150">
                                                                <StackLayout.GestureRecognizers>
                                                                    <TapGestureRecognizer Command="{Binding Source={x:Reference Page},Path=BindingContext.Additemcommand}" CommandParameter="{Binding .}"/>
                                                                </StackLayout.GestureRecognizers>
                                                                <Frame Margin="5" Padding="0" CornerRadius="10" BackgroundColor="#f1f5fb" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                                                    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,20,0">
                                                                        <Label Text="{Binding Name}" FontAttributes="Bold" HorizontalOptions="CenterandExpand"/>
                                                                        <Frame BackgroundColor="#ffffff" Padding="0" HeightRequest="30" WidthRequest="50" VerticalOptions="EndAndExpand" Margin="20">
                                                                            <Label Text="{Binding Price,StringFormat='₹ {0:N}'}" HorizontalOptions="CenterandExpand" VerticalOptions="CenterandExpand"/>
                                                                        </Frame>
                                                                    </StackLayout>
                                                                </Frame>
                                                            </StackLayout>
                                                        </DataTemplate>
                                                    </BindableLayout.ItemTemplate>

解决方法

我正在通过 BindableLayout 在 FlexLayout 中显示一个列表。当有人选择一个项目时，我想显示一些背景颜色。

根据您的要求，我们建议在 TapGestureRecognizer Tapped 事件中处理它并创建一个先前的值来记录点击的项目。然后在下一个项目单击时将其背景颜色设置为默认值。更多内容请参考以下示例代码。

private Layout previous;
private void TapGestureRecognizer_Tapped(object sender,EventArgs e)
{
    if (previous != null)
    {
        previous.BackgroundColor = Color.White;
    }
    var stacklayout = sender as Layout;         
    stacklayout.BackgroundColor = Color.Red;          
    previous = stacklayout;
}

Xaml

<FlexLayout
    x:Name="FlexTypes"
    Margin="0"
    HorizontalOptions="FillAndExpand"
    Wrap="Wrap">
    <BindableLayout.ItemsSource>

        <x:Array Type="{x:Type x:String}">
            <x:String>1</x:String>
            <x:String>2</x:String>
            <x:String>3</x:String>
            <x:String>4</x:String>
            <x:String>5</x:String>
        </x:Array>
    </BindableLayout.ItemsSource>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <StackLayout HeightRequest="120" WidthRequest="150">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                </StackLayout.GestureRecognizers>
                <Label Text="{Binding}" />
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>