Side Menu Borders Xamarin.iOS - 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.

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">

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

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>

Structure of my scrollview xamarin ios

I have the following structure and I want to put a scrollView in my ios application, when I place the Scrowview in this structure my data all disappear. How to make a correct structure where my scrollview works?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:g.Portable.Helpers;assembly=g.Portable"
x:Class="g.Portable.Views.AboutPage"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Title="titulo">
<AbsoluteLayout VerticalOptions="FillAndExpand">
<ScrollView HeightRequest="1000">
<cv:CarouselView x:Name="MAinCarousel" VerticalOptions="Start" HeightRequest="250">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="Image" Grid.RowSpan="2" Source="{Binding img}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="5">
<Label TextColor="White" Text="{Binding category}" BackgroundColor="{Binding category_color}" Font="Bold" FontSize="16" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding data}" FontSize="16" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding titulo}" FontSize="18" HorizontalOptions="Start" Font="Bold" VerticalOptions="CenterAndExpand"/>
<Button Text="Clique aqui..." IsVisible="true" HeightRequest="16" Clicked="Handle_Clicked" TextColor="White" BackgroundColor="#1C86EE"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
<StackLayout BackgroundColor="#234084">
<Label Text=" Últimas " TextColor="White" Font="Bold" FontSize="16" BackgroundColor="#234084"/>
</StackLayout>
<ListView x:Name="listView"
CachingStrategy="RecycleElement"
ItemsSource="{Binding FeedItems}"
HasUnevenRows="True"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" HeightRequest="344" VerticalOptions="Fill">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout HeightRequest = "60" WidthRequest="60">
<Image x:Name="Image" Source="{Binding Image}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Category}" TextColor="White" FontSize="Small" LineBreakMode="NoWrap" BackgroundColor="{Binding Color_category}"/>
<Label Text="{Binding PublishDate}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Title}" TextColor="#234084" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<StackLayout IsVisible="{Binding IsBusy}" BackgroundColor="#80000000" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White">
</ActivityIndicator>
<Label Text="Carregando..." HorizontalOptions="Center" TextColor="White"/>
</StackLayout>
</AbsoluteLayout>
You have multiple children in ScrollView. That is not going to work. ScrollView can have only one direct child

Xamarin.Forms ListView ViewCell issue on iOS

I've been trying to get this looking right in Xaml (x.forms) but can't make it work. Any possibly way this can be solved in Xaml without a custom cell renderer?
Here is how it's supposed to look on native iOS:
What I'm getting so far in Xaml:
Here's my Xaml:
<ScrollView>
<StackLayout>
<ActivityIndicator IsRunning="{Binding IsFetching}" />
<ListView ItemsSource="{Binding Events}" Header="2015" Footer="">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="55">
<ViewCell.View>
<StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="White">
<StackLayout>
<BoxView WidthRequest="44"
HeightRequest="5"
BackgroundColor="Purple"
/>
<Label Text="AUG" FontSize="12" HeightRequest="13" HorizontalOptions="Center" VerticalOptions="Start" FontAttributes="Bold"/>
<Label Text="31" FontSize="13" VerticalOptions="StartAndExpand" HorizontalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Vertical"
HorizontalOptions="StartAndExpand">
<Label Text="Relay For Life of" FontSize="14" VerticalOptions="End" TextColor="Gray"/>
<Label Text="Hope City" FontSize="16" FontAttributes="Bold" VerticalOptions="StartAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
You can try this with a Grid instead of Stack, also add RowHeight to your ListView
<ListView ... RowHeight="55">
...
<ViewCell Height="55">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="44"/> <!-- for the checkmark -->
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="22" />
<RowDefinition Height="17" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" WidthRequest="44" HeightRequest="5" BackgroundColor="Purple"/>
<!-- experiment with the vertical alignment to get it right -->
<Label Grid.Row="1" Text="AUG" .../>
<Label Grid.Row="2" Text="31" .../>
</Grid>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<!-- if the vertical alignment doesn't work well add two more rows for top and bottom padding -->
<Label Grid.Row="0" Text="Relay for life" VerticalOptions="End" .../>
<Label Grid.Row="1" Text="Hope city" VerticalOptions="Start" .../>
</Grid>
</Grid>
</ViewCell>
Set HasUnevenRows="True" on the ListView

Resources