适用于iOS的Xamarin.Forms ListView ItemTapped背景

时间:2019-01-28 08:31:24

标签: listview button xamarin.forms

我在列表视图的每个视图单元中都有一个按钮。当我在iOS Simulator上测试应用程序时,按钮的背景色消失了。我需要使Viewcell在单击时具有与保留按钮背景色相同的颜色

enter image description here

这是放置按钮的列表视图的Xaml代码:

<ListView x:Name="orderslv"  HasUnevenRows="True"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" SeparatorVisibility="None" Grid.Column="0" Grid.Row="1">
    <ListView.Behaviors>
        <extended:InfiniteScrollBehavior IsLoadingMore="{Binding isbusy}" />
    </ListView.Behaviors>
    <ListView.Header>
        <StackLayout>
            <SearchBar  TextChanged="SearchBar_TextChanged" x:Name="searching" FontFamily="{StaticResource MyriadProRegularFont}" Placeholder="Search by vendor" IsVisible="False">
            </SearchBar>
            <Label TextColor="#FF0000" IsVisible="False" x:Name="error_label" Text="No items in this category" FontFamily="{StaticResource MyriadProRegularFont}" HorizontalTextAlignment="Center">
                <Label.FontSize>
                    <OnIdiom Phone="20" Tablet="30"/>
                </Label.FontSize>
            </Label>
        </StackLayout>
    </ListView.Header>
    <ListView.Footer>
        <Grid Padding="6" x:Name="grid">
            <!-- set the footer to have a zero height when invisible -->
            <Grid.Triggers>
                <Trigger TargetType="Grid" Property="IsVisible" Value="False">
                    <Setter Property="HeightRequest" Value="0" />
                </Trigger>
            </Grid.Triggers>
            <!-- the loading content -->
            <Label Text="Loading..." TextColor="#039BE5" VerticalOptions="Center" HorizontalOptions="Center" FontFamily="{StaticResource MyriadProSemiBoldFont}">
                <Label.FontSize>
                    <OnIdiom Phone="20" Tablet="30"/>
                </Label.FontSize>
            </Label>
        </Grid>
    </ListView.Footer>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                    <Frame CornerRadius="4" Padding="0" IsClippedToBounds="True" HasShadow="True" HorizontalOptions="FillAndExpand">
                        <Frame.Effects>
                            <controls:ViewShadowEffect  DistanceX="5" DistanceY="5" Color="Gray"/>
                        </Frame.Effects>
                        <Grid Padding="10" IsClippedToBounds="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#EFEEEC" Margin="2,0,2,1">
                            <Grid.Effects>
                                <controls:ViewShadowEffect  DistanceX="5" DistanceY="5" Color="Gray"/>
                            </Grid.Effects>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid IsClippedToBounds="True" Grid.Column="0" Grid.Row="0">
                                <abstractions:CircleImage Grid.Column="0" Grid.Row="0" Source="exp20181029Artboard71" Aspect="AspectFill">
                                    <Image.WidthRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='80', Tablet='110'}" Android="{OnIdiom Phone='100', Tablet='130'}"/>
                                    </Image.WidthRequest>
                                    <Image.HeightRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='80', Tablet='110'}" Android="{OnIdiom Phone='100', Tablet='130'}"/>
                                    </Image.HeightRequest>
                                </abstractions:CircleImage>
                                <Image Source="exp20181029Artboard70" Grid.Column="0" Grid.Row="0" HorizontalOptions="EndAndExpand" VerticalOptions="Start" IsVisible="{Binding is_new}">
                                    <Image.Margin>
                                        <OnIdiom Phone="0,12,0,0" Tablet="0,12,0,0"/>
                                    </Image.Margin>
                                    <Image.WidthRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='20', Tablet='30'}" Android="{OnIdiom Phone='20', Tablet='30'}"/>
                                    </Image.WidthRequest>
                                    <Image.HeightRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='20', Tablet='30'}" Android="{OnIdiom Phone='20', Tablet='30'}"/>
                                    </Image.HeightRequest>
                                </Image>
                                <Grid Grid.Column="0" Grid.Row="0">
                                    <abstractions:CircleImage Source="{Binding path}" Grid.Column="0" Grid.Row="0" BackgroundColor="Transparent" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
                                        <abstractions:CircleImage.WidthRequest>
                                            <OnPlatform iOS="{OnIdiom Phone='65', Tablet='80'}" Android="{OnIdiom Phone='80', Tablet='110'}"/>
                                        </abstractions:CircleImage.WidthRequest>
                                        <abstractions:CircleImage.HeightRequest>
                                            <OnPlatform iOS="{OnIdiom Phone='65', Tablet='80'}" Android="{OnIdiom Phone='80', Tablet='110'}"/>
                                        </abstractions:CircleImage.HeightRequest>
                                    </abstractions:CircleImage>
                                </Grid>
                            </Grid>
                            <Grid Grid.Column="1" Grid.Row="0" VerticalOptions="CenterAndExpand">
                                <Grid.Margin>
                                    <OnIdiom Phone="0,16,0,0" Tablet="0,20,0,0"/>
                                </Grid.Margin>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Label Text="{Binding description}" TextColor="#039BE5" HorizontalOptions="StartAndExpand" FontFamily="{StaticResource MyriadProSemiBoldFont}" Grid.Column="0" Grid.Row="0" MaxLines="2" LineBreakMode="TailTruncation">
                                    <Label.FontSize>
                                        <OnIdiom Phone="{OnPlatform Android=14,iOS=10}" Tablet="{OnPlatform Android=18,iOS=16}"/>
                                    </Label.FontSize>
                                </Label>
                                <StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="1">
                                    <Label Text="{Binding Item_Code}" HorizontalOptions="StartAndExpand" TextColor="#231F20" FontFamily="{StaticResource MyriadProRegularFont}" >
                                        <Label.FontSize>
                                            <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                        </Label.FontSize>
                                    </Label>
                                </StackLayout>
                                <StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="2">
                                    <Label Text="{Binding price}" HorizontalOptions="StartAndExpand" TextColor="#231F20" FontFamily="{StaticResource MyriadProRegularFont}"  >
                                        <Label.FontSize>
                                            <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                        </Label.FontSize>
                                    </Label>
                                    <Label Text="{Binding CURRENCY_SYMBOL}" HorizontalOptions="StartAndExpand" TextColor="#231F20" FontFamily="{StaticResource MyriadProRegularFont}">
                                        <Label.FontSize>
                                            <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                        </Label.FontSize>
                                    </Label>
                                    <Label Text="/" HorizontalOptions="StartAndExpand" TextColor="#231F20" FontFamily="{StaticResource MyriadProRegularFont}" >
                                        <Label.FontSize>
                                            <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                        </Label.FontSize>
                                    </Label>
                                    <Label Text="{Binding Uom_Code}" HorizontalOptions="StartAndExpand" TextColor="#231F20" FontFamily="{StaticResource MyriadProRegularFont}">
                                        <Label.FontSize>
                                            <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                        </Label.FontSize>
                                    </Label>
                                </StackLayout>
                                <abstractions:CircleImage Source="exp20181126Artboard32" HorizontalOptions="StartAndExpand" Aspect="AspectFit" Grid.Column="0" Grid.Row="3">
                                    <abstractions:CircleImage.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="ItemDetails_Tapped"/>
                                    </abstractions:CircleImage.GestureRecognizers>
                                    <abstractions:CircleImage.Effects>
                                        <controls:ViewShadowEffect  DistanceX="5" DistanceY="5" Color="Gray"/>
                                    </abstractions:CircleImage.Effects>
                                    <abstractions:CircleImage.WidthRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='20', Tablet='20'}" Android="{OnIdiom Phone='30', Tablet='30'}"/>
                                    </abstractions:CircleImage.WidthRequest>
                                    <abstractions:CircleImage.HeightRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='20', Tablet='20'}" Android="{OnIdiom Phone='30', Tablet='30'}"/>
                                    </abstractions:CircleImage.HeightRequest>
                                </abstractions:CircleImage>
                            </Grid>
                            <Grid HorizontalOptions="EndAndExpand" Grid.Column="2" Grid.Row="0" VerticalOptions="FillAndExpand">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.Margin>
                                    <OnIdiom Phone="0,16,0,0" Tablet="0,20,0,0"/>
                                </Grid.Margin>
                                <abstractions:CircleImage Source="exp20181029Artboard83itemdetail" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Grid.Column="0" Grid.Row="0" IsVisible="{Binding has_promotion}">
                                    <abstractions:CircleImage.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="promotion_Clicked"/>
                                    </abstractions:CircleImage.GestureRecognizers>
                                    <abstractions:CircleImage.Effects>
                                        <controls:ViewShadowEffect  DistanceX="5" DistanceY="5" Color="Gray"/>
                                    </abstractions:CircleImage.Effects>
                                    <abstractions:CircleImage.WidthRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='20', Tablet='20'}" Android="{OnIdiom Phone='28', Tablet='28'}"/>
                                    </abstractions:CircleImage.WidthRequest>
                                    <abstractions:CircleImage.HeightRequest>
                                        <OnPlatform iOS="{OnIdiom Phone='20', Tablet='20'}" Android="{OnIdiom Phone='28', Tablet='28'}"/>
                                    </abstractions:CircleImage.HeightRequest>
                                </abstractions:CircleImage>
                                <Grid Grid.Column="1" Grid.Row="0" VerticalOptions="CenterAndExpand">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Label Text="Quantity" HorizontalTextAlignment="Center" TextColor="#231F20" FontFamily="{StaticResource MyriadProRegularFont}" Grid.Column="0" Grid.Row="0">
                                        <Label.FontSize>
                                            <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                        </Label.FontSize>
                                    </Label>
                                    <controls:CustomStepper Grid.Column="0" Grid.Row="1" HorizontalOptions="CenterAndExpand" OnValueChanged="CustomStepper_OnValueChanged">
                                    </controls:CustomStepper>
                                    <Frame IsClippedToBounds="True" Padding="0" HasShadow="True" CornerRadius="4" Grid.Column="0" Grid.Row="2">
                                        <Button Text="ADD TO CART" TextColor="#039BE5" BackgroundColor="White"  Clicked="Addtocart_Clicked" Padding="5" >
                                            <Button.FontSize>
                                                <OnIdiom Phone="{OnPlatform Android=12,iOS=8}" Tablet="{OnPlatform Android=16,iOS=14}"/>
                                            </Button.FontSize>
                                            <Button.HeightRequest>
                                                <OnIdiom Phone="34" Tablet="40"/>
                                            </Button.HeightRequest>
                                        </Button>
                                    </Frame>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Frame>
                </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

任何想法如何解决? 感谢您的提前帮助

1 个答案:

答案 0 :(得分:3)

您可以通过创建自定义视图单元格来禁用所选项目的突出显示。这也应该防止它替换按钮的背景色。

首先将以下类添加到共享的(.NET Standard)项目中:

public class NoHighlightViewCell : Xamarin.Forms.ViewCell 
{ 
}

这只是我们将在iOS中自定义的普通视图单元的简单派生版本。转到iOS项目并添加以下类:

[assembly: ExportRenderer(typeof(NoHighlightViewCell), typeof(NoHighlightCellRenderer))]
namespace MyApp.iOS
{
    public class NoHighlightCellRenderer : ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell cell,
                                                UITableView tableView)
        {
            var cell = base.GetCell(item, cell, tableView);
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;
            return cell;
        }
    }
}

此自定义渲染器将仅将None选择样式应用于视图单元。

现在终于在XAML中使用此自定义ViewCell。将名称空间声明添加到页面标题:

xmlns:local="clr-namespace:MyApp;assembly=MyApp"

然后使用视图单元格:

<ListView.ItemTemplate>
     <DataTemplate>
         <local:NoHighlightViewCell>
             …
         </local:NoHighlightViewCell>
     </DataTemplate>
</ListView.ItemTemplate>