mohammad anouti
Reputation: 171
Xamarin.Forms ListView ItemTapped background for iOS
I have a button in every viewcell in the listview. When I test my application on iOS Simulator, the background color of the button disappears. I need to get the viewcell to have the same color on clicking same as keeping the background color of the button
Here is the Xaml code of the listview where the button is placed:
<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>
Any idea how to fix it? Thanks for your help in advance
Upvotes: 0
Views: 261
Answers (1)
Martin Zikmund
Reputation: 39082
You can disable the selected item highlight by creating a custom view cell. This should also prevent it from replacing the button background color.
First add the following class to the shared (.NET Standard) project:
public class NoHighlightViewCell : Xamarin.Forms.ViewCell
{
}
This is just a simple derived version of normal view cell that we will customize in iOS. Go to iOS project and add the following class:
[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;
}
}
}
This custom renderer will just apply None selection style to the view cell.
Now finally use this custom ViewCell in XAML. Add namespace declaration to the page header:
xmlns:local="clr-namespace:MyApp;assembly=MyApp"
And then use the view cell:
<ListView.ItemTemplate>
<DataTemplate>
<local:NoHighlightViewCell>
…
</local:NoHighlightViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Upvotes: 3
Related Questions
- Xamarin.Forms ListView: Set the highlight color of a tapped item
- How can I change background color of items of a ListView in Xaml?
- Change the Background Color of an ListView Item on Xamarin Forms
- adding listview hides form background image Xamarin ios
- Adding a background image to a list view Xamarin.Forms
- Xamarin Forms: How to change background from gray on selected item in listview, iOS
- Xamarin Forms - Listview on selected item change all background to the same
- How to change background color of selected item in a listview on xamarin form?
- ListView Tapped removes button background color on data template Xamarin.Forms
- Xamarin Forms Alternating BackgroundColor Listview in XAML