Can't change the size of a MapView [Xamarin] - ios

I have a MapView in my custom ViewRenderer. I am trying to set it's size like this:
public CustomMapRenderer()
{
var camera = CameraPosition.FromCamera(47.497913, 19.040236, 15);
mapView = new MapView(new CGRect(0, 0, 414, 200), camera); //also tried with this: mapView = MapView.FromCamera(new CGRect(0, 0, 414, 200), camera);
this.AddSubview(mapView);
...
}
The view seems to remain in fullscreen though (414*896), if I check it in the debugger though. Since I found not much documentation, I am asking wheter I am setting it correctly? If so, is that a bug? How should I change the size of the view?
EDIT: Added the relevant XAML code too
The XAML where the Map is embedded in is:
<?xml version="1.0" encoding="UTF-8"?>
<attractionbase:AttractionContentListItemBase xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:attractionbase="clr-namespace:AppTourism.CardView.ItemTypes.AttractionPage"
xmlns:map="clr-namespace:AppTourism.MapModule"
mc:Ignorable="d"
x:Class="AppTourism.CardView.ItemTypes.AttractionPage.AddressWithMapContentListItem">
<Frame
HasShadow="False"
Padding="0"
Margin="{Binding MainFrameMargin}"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width}">
<StackLayout Orientation="Vertical" Spacing="0" Margin="0" >
<StackLayout Orientation="Vertical" Margin="10" >
<StackLayout Orientation="Horizontal">
<Image Source="iMarkerSmall.png" HeightRequest="30"></Image>
<Label Text="{Binding Pin.Address}" FontSize="Medium" TextColor="Black"></Label>
</StackLayout>
<Frame Padding="0" HeightRequest="100" CornerRadius="20" HasShadow="False">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Map_Tapped"></TapGestureRecognizer>
</Frame.GestureRecognizers>
<AbsoluteLayout>
<map:CustomMap x:Name="Map" IsEnabled="False"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
<Label Text="N/A" FontSize="Medium" FontAttributes="Bold" TextColor="Black" Margin="5,0" VerticalOptions="Center" x:Name="NALabel" IsVisible="False"
AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" ></Label>
</AbsoluteLayout>
</Frame>
</StackLayout>
<BoxView HeightRequest="{Binding SEPARATOR_HEIGHT}" Margin="{Binding SeparatorMargin}">
<BoxView.BackgroundColor>
<Color>#e6e6e6</Color>
</BoxView.BackgroundColor>
</BoxView>
</StackLayout>
</Frame>
</attractionbase:AttractionContentListItemBase>

Related

BoxView not visible in iOS

I created the following BoxView in my App.xaml (as a separator)...
<Style x:Key="BoxViewGray" TargetType="BoxView">
<Setter Property="HeightRequest" Value="0.2"/>
<Setter Property="Color" Value="Gray"/>
</Style>
...and use it like so in my Page:
<BoxView Style="{StaticResource BoxViewGray}" />
Straight forward and it works out quite fine with Android (Release & Debug) though when I debug the iOS Solution, it's not visible. Maybe as an additional info: I don't have a physical Mac for debugging but use Macincloud instead of. Don't have a physical device (iPhone etc) either.
Update: The complete XAML code of the page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:ErzengelMichael.ViewModels"
x:Class="ErzengelMichael.Views.EinstellungenPage"
Title="{Binding Rosenkranz[0].TabBarTitleSettings}" >
<ContentPage.BindingContext>
<vm:RosenkranzViewModel />
</ContentPage.BindingContext>
<ContentPage.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.1" Color="Purple" />
<GradientStop Offset="0.9" Color="DarkSlateBlue" />
</LinearGradientBrush>
</ContentPage.Background>
<ScrollView>
<StackLayout Padding="10" >
<StackLayout Padding="5">
<BoxView Style="{StaticResource BoxViewGray}" />
<Label Text="{Binding Rosenkranz[0].SettingsText}"
HorizontalOptions="Center" FontSize="24" TextColor="White"
BackgroundColor="Transparent" Margin="0,0,0,5" />
<BoxView Style="{StaticResource BoxViewGray}" />
</StackLayout>
<StackLayout Orientation="Vertical" Padding="10" >
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10">
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="French"
Command="{Binding ChangeLanguageCommand}" Source="france.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="German"
Command="{Binding ChangeLanguageCommand}" Source="germany.jpg" VerticalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent"
CommandParameter="English" Command="{Binding ChangeLanguageCommand}" Source="usa.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Spanish"
Command="{Binding ChangeLanguageCommand}" Source="spain.jpg" VerticalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Italian"
Command="{Binding ChangeLanguageCommand}" Source="italy.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Portugese"
Command="{Binding ChangeLanguageCommand}" Source="portugal.jpg" VerticalOptions="Center" />
</StackLayout>
</StackLayout>
<!--#region IMPRESSUM -->
<StackLayout Spacing="15" Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
<BoxView Style="{StaticResource BoxViewGray}"/>
<Label HorizontalOptions="Center" HorizontalTextAlignment="Center" Text="Development and Design by xxx#web.de" TextColor="White" />
<Label HorizontalOptions="Center" Text="Version 1.0" TextColor="White" FontAttributes="Italic"/>
<Label HorizontalOptions="Center" TextColor="White" HorizontalTextAlignment="Center"
Text="Images used in this App are in the public domain worldwide."/>
<StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="Center" >
<Label HorizontalTextAlignment="Center" >
<Label.FormattedText>
<FormattedString>
<Span Text="" FontFamily="FA-B" TextColor="White" CharacterSpacing="20" FontSize="24" />
<Span Text="" FontFamily="FA-B" TextColor="White" FontSize="24" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
<BoxView Style="{StaticResource BoxViewGray}" />
</StackLayout>
<!--#endregion-->
</StackLayout>
</ScrollView>
</ContentPage>
That because you set the HeightRequest as 0.2(which is less than 0.5) . So in iOS it will been ignored on some device because of screen resolution .
So you would better set it as 0.5 or higher on iOS device .
<Style x:Key="BoxViewGray" TargetType="BoxView">
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform iOS="0.5" Android="0.2" />
</Setter.Value>
</Setter>
<Setter Property="Color" Value="Gray"/>
</Style>

Is my TableView in Xamarin.Forms supposed to be gray?

Quick question:
Is the TableView in Xamarin.Forms supposed to be all grey like below picture? I was expecting a layout similar to what I'm getting, but with white backgrounds for individual TableSections.
Is this because of iOS 14, something I'm doing wrong or maybe the simulator? I'm also experiencing lack of DatePicker and TimePicker support - works on android but not on iPhone simulator, and I was told this issue was the simulator.
I haven't been able to test it on a real device.
I'm posting my code for the Tableview XAML below.
XAML code
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
Title="{Binding FullName}"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ContactBook.ContactsDetailPage">
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Personal Info">
<EntryCell Label="First Name" Text="{Binding FirstName}" Keyboard="Text" />
<EntryCell Label ="Last Name" Text="{Binding LastName}" Keyboard="Text"/>
</TableSection>
<TableSection Title="Contact Info">
<EntryCell Label="Phone" Text="{Binding Phone}" Keyboard="Telephone"/>
<EntryCell Label="Email" Text="{Binding Email}" Keyboard="Email" />
</TableSection>
<TableSection Title="Other">
<SwitchCell Text="Blocked" On="{Binding IsBlocked}" />
</TableSection>
<TableSection>
<ViewCell>
<Button Text="Save" HorizontalOptions="FillAndExpand" Clicked="Button_Clicked"/>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</ContentPage>
You could use ViewCell and StackLayout to achieve that, becuause xxxCell not contain a BackgroundColor pproperty.
For example, code as follows:
<TableSection Title="Contact Info">
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Phone" VerticalOptions="Center"/>
<Entry Text="Binding Phone" HorizontalOptions="FillAndExpand" Keyboard="Telephone"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Email" VerticalOptions="Center" />
<Entry Text="Binding Email" HorizontalOptions="FillAndExpand" Keyboard="Email" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection Title="Other" >
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="15,0,0,0" Text="Blocked" VerticalOptions="Center"/>
<Switch Margin="280,0,0,0" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection>
<ViewCell>
<StackLayout BackgroundColor="White">
<Button Text="Save"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
The effect:
TableView has a BackgroundColor property that lets you set the background color you want. So if you want it to match the rest of your page, you can do
<TableView Intent="Form" BackgroundColor="White">

Xamarin IOS CollectionView: cannot vertically align items

I'm using CollectionView with DataTemplate
<DataTemplate x:Key="tileTemplate">
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red" Padding="5" x:Name="ItemContainer">
<StackLayout Padding="5" HorizontalOptions="CenterAndExpand" WidthRequest="{Binding Width, Source={x:Reference ItemContainer}}" HeightRequest="{Binding Width, Source={x:Reference ItemContainer}}">
<Image Source="{Binding LogoID}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFit" />
</StackLayout>
</StackLayout>
</DataTemplate>
<CollectionView x:Name="ItemsCollectionView" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource itemsDataTemplateSelector}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"/>
</CollectionView.ItemsLayout>
</CollectionView>
On Android they align vertically from the top:
But on IOS they align rather chaotically:
I can't figure out how to align them from the top like in Android.
--== UPDATE ==-- :
The problem is with HeightRequest of inner StackLayout
HeightRequest="{Binding Width, Source={x:Reference ItemContainer}}"
(same result if you use OnSizeAllocated)
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
HeightRequest = Width;
}
How to keep proportions and prevent tiles from popping on IOS is still opened question.
It may caused by the layout in your stacklayout, I wrote a sample and it works well in iOS:
<CollectionView >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="3"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey Capuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red">
<Frame BackgroundColor="Green" WidthRequest="100" HeightRequest="90">
<Image Source="Images.png"/>
</Frame>
<Label Text="{Binding .}" HorizontalTextAlignment="Center"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Try using StartAndExpand instead of FillAndExpand on the StackLayouts VerticalOptions

Side Menu Borders Xamarin.iOS

First I'd like to mention that I'm no professional at Xamarin.
The problem I'm currently facing occured after using a custom renderer to achieve a transparent master detail page on my xamarin.ios project, after achieving this, I noticed that I now have a grey border on the outside of my master detail page, I tried accessing it throught a couple properties, but none seem to work.
Here's the customer renderer code
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
var master = ViewControllers[0];
master.View.BackgroundColor = UIColor.Clear;
var detail = ViewController.ChildViewControllers[1];
}
Here's my xaml code used for the design of the side menu:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage
x:Class="LoyaltyWorx.SideMenu"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
xmlns:local="clr-namespace:LoyaltyWorx.MarkupExtensions; assembly=LoyalyWorx"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical" BackgroundColor="Transparent" Spacing="0">
<StackLayout
HorizontalOptions="Fill"
Orientation="Horizontal"
VerticalOptions="Fill" BackgroundColor="Black" Padding="50, 50, 50, 50" >
<StackLayout HorizontalOptions="Center" Orientation="Vertical">
<ffimageloading:CachedImage x:Name="ProfilePictureCircleImage"
LoadingPlaceholder="profile_image_placeholder.png"
ErrorPlaceholder="profile_image_placeholder.png"
DownsampleToViewSize="true"
FadeAnimationEnabled="true"
HeightRequest="65"
WidthRequest="65">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</StackLayout>
<StackLayout
HorizontalOptions="CenterAndExpand"
Orientation="Vertical"
VerticalOptions="CenterAndExpand">
<Label
x:Name="FullNameLabel"
FontSize="18"
HorizontalOptions="Center"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
<BoxView HeightRequest="2" BackgroundColor="#D90B31"/>
<ListView
x:Name="NavigationMenuItems"
ItemSelected="OnMenuItemSelected"
BackgroundColor="{StaticResource TileColour}"
RowHeight="60"
SeparatorVisibility="None"
SeparatorColor="Transparent"
Margin="0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for menu items -->
<StackLayout
Padding="20,10,0,10"
Orientation="Horizontal"
Spacing="20"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<local:TintedCachedImage TintColor="{StaticResource SideMenuIconColor}"
Source="{Binding Icon}"
VerticalOptions="Center"
DownsampleToViewSize="true"
HeightRequest="19"
WidthRequest="19"/>
<Label
FontSize="15"
Text="{Binding Title}"
TextColor="{StaticResource SideMenuTextColor}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage />
</MasterDetailPage.Detail>
</MasterDetailPage>
Please assist.

Listview not updated when isVisible is set to true

I'm trying to make a ListView with clickable rows. When you click on a row it sets a child stacklayout to visibility true. This works fine in android, but not in ios. Maybe I'm doing it the wrong way. I am still a beginner, any idea how to fix this or any other better approach?
The problem is that it opens on ios so the visibility changes, but it does not update the height of the cell. The cell updates off-screen for example if you scroll up until you can't see the opened cell anymore and then scroll back down. You'll see it has updated the height.
I tried using a custom renderer, but i have no idea where to start.
This is my xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Lisa.Excelsis.Mobile.AssessmentPage" xmlns:local="clr-namespace:Lisa.Excelsis.Mobile;assembly=Lisa.Excelsis.Mobile">
<StackLayout>
<local:SpecialListView x:Name="CategoryList"
ItemsSource = "{Binding Categories}"
HasUnevenRows="true"
RowHeight="-1"
GroupDisplayBinding="{Binding Name}"
IsGroupingEnabled="true">
<local:SpecialListView.ItemTemplate>
<DataTemplate>
<ViewCell x:Name="ObservationCell">
<ViewCell.View>
<StackLayout x:Name="ObservationContainer"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
VerticalOptions="StartAndExpand"
BackgroundColor="White">
<StackLayout x:Name="Observation"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Padding="15, 10, 10, 10"
BackgroundColor="White">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="OpenItem"/>
</StackLayout.GestureRecognizers>
<Grid HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label x:Name="ObservationOrder"
Text="{Binding Criterion.Order, StringFormat='{0}.'}"
FontSize="18"
VerticalOptions="StartAndExpand"
Grid.Column="0" Grid.Row="0"/>
<Label x:Name="ObservationTitle"
Text="{Binding Criterion.Title}"
FontSize="18"
VerticalOptions="StartAndExpand"
Grid.Column="1" Grid.Row="0"/>
</Grid>
</StackLayout>
<StackLayout x:Name="ObservationButtons"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
BackgroundColor="White"
IsVisible="false"
Padding="0, 0, 0, 20"
ClassId = "{Binding Id, StringFormat='ObservationButtons_{0}'}">
<Grid HorizontalOptions="Center"
Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" >
<Image Source="yesnobutton0.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
x:Name="yesImage">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetYesImage"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Ja" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0">
<Image Source="yesnobutton0.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
x:Name="noImage">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetNoImage"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Nee" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
<Image Source="maybenot.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="3" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="skip.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="4" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="unclear.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="5" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="change.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="6" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</local:SpecialListView.ItemTemplate>
</local:SpecialListView>
</StackLayout>
This is an example of how it works on android and how i want it to work on ios.
I reproduced your Problem in a small Testproject. I prefer doing layout changes via data binding, instead of code behind.
Let's start with the Template:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App6.Page1">
<ListView x:Name="CategoryList"
BackgroundColor="Gray"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedItem}"
HasUnevenRows="true"
RowHeight="-1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell x:Name="ObservationCell">
<ViewCell.View>
<StackLayout x:Name="Observation"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Padding="15, 10, 10, 10"
BackgroundColor="White">
<Label x:Name="ObservationTitle"
Text="{Binding Title}"
FontSize="18"
TextColor="Black"
VerticalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal" IsVisible="{Binding IsSelected}">
<Image BackgroundColor="Fuchsia" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Green" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Yellow" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Blue" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Black" WidthRequest="40" HeightRequest="40"></Image>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
The Datatemplate is basicaly the same, but:
the StackLayout has no Click-Listener
the Visbility of the StackLayout is bound to IsSelected (IsVisible="{Binding IsSelected}")
the SelectedItem of the ListView is bound to SelectedItem of our ViewModel
Our Page just sets the ViewModel as DataContext
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
BindingContext = new Page1ViewModel();
}
}
The ViewModel
implements INotifyPropertyChanged to notify the view about data changes
adds some dummy items to our Categories Collection
has a SelectedItem property that updates the IsSelected property of the Categories
class Page1ViewModel : INotifyPropertyChanged
{
private Category _selectedItem;
private ObservableCollection<Category> _categories = new ObservableCollection<Category>();
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<Category> Categories
{
get { return _categories; }
set
{
_categories = value;
OnPropertyChanged();
}
}
public Category SelectedItem
{
get { return _selectedItem; }
set
{
if (_selectedItem == value)
return;
if (_selectedItem != null)
{
_selectedItem.IsSelected = false;
}
_selectedItem = value;
if (_selectedItem != null)
{
_selectedItem.IsSelected = true;
}
}
}
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public Page1ViewModel()
{
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
}
}
Last, but not least, but most important, you need a tiny custom renderer that overwrites the default one. We call ReloadData() if the SelectedItem has changed.
[assembly: ExportRenderer(typeof(ListView), typeof(MyListViewRenderer))]
namespace App6.iOS.CustomRenderer
{
public class MyListViewRenderer : ListViewRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ListView.SelectedItemProperty.PropertyName)
{
Device.BeginInvokeOnMainThread(() => Control.ReloadData());
}
}
}
}
Result

Resources