Xamarin Forms Vertical Options Ignored

Xamarin Forms Vertical Options Ignored - c#

The VerticalOptions="End" in my Xamarin Forms doesn't stick the items to the end of the page (which is what it should do right?), I even tried using an absolute layout with the relative position set to 1, but that didn't move the items to the end either.
Here is my Xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
x:Class="CouchTo5kTracker.HomePage">
<ContentPage.Content>
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="350"/>
</Grid.RowDefinitions>
<AbsoluteLayout x:Name="AbsoluteLayoutProgress" Grid.Row="0" HorizontalOptions="FillAndExpand">
<skia:SKCanvasView x:Name="canvasView" PaintSurface="OnCanvasViewPaintSurface" AbsoluteLayout.LayoutBounds="0, 0" AbsoluteLayout.LayoutFlags="XProportional"/>
<Label x:Name="WeekCounter" Text="3/5" FontSize="90" AbsoluteLayout.LayoutBounds="0.5, 100, 150, 150" AbsoluteLayout.LayoutFlags="XProportional"/>
<Label x:Name="WeekLabel" Text="Week" FontSize="30" AbsoluteLayout.LayoutBounds="0.5, 220, 80, 50" AbsoluteLayout.LayoutFlags="XProportional"/>
</AbsoluteLayout>
<StackLayout Grid.Row="1">
<Grid x:Name="RunGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.75*"/>
<ColumnDefinition Width="1.25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Grid.GestureRecognizers>
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="#1476D2" Padding="10,5,5,5" Margin="8,0,1,5">
<Label Text="Next Run" VerticalOptions="Center" FontSize="15" FontAttributes="Bold"/>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="#1476D2" Padding="10,5,5,5" Margin="1,0,8,5">
<Label Text="Date" VerticalOptions="Center" FontSize="15" FontAttributes="Bold"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="#F7F7F7" Padding="10,5,5,5" Margin="8,0,0,5">
<Label x:Name="NextRunLabel" Text="Next Run: Week 4, Run 3" VerticalOptions="Center" FontSize="15"/>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="#F7F7F7" Padding="10,5,5,5" Margin="1,0,8,5">
<Label x:Name="NextRunDateLabel" Text="12/04" VerticalOptions="Center" FontSize="15"/>
</Frame>
</Grid>
<Grid VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Frame Grid.Column="0" Grid.Row="0" VerticalOptions="End"></Frame>
<Frame Grid.Column="1" Grid.Row="0" VerticalOptions="End"></Frame>
</Grid>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
Altering the heirarchy resuts in very unexpected positioning, at the moment I just want to place the two frames at the end of the page. The App is a Xamarin Shell.

Related

Xamarin - Frame Shadow not showing properly

I have a Xamarin Forms project and I'm trying to show frame shadow just like this
But instead it shows like this, the shadow is only appearing on the corners
I can't get it to show everywhere like the first picture
Here is my code:
<?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:viewmodels="clr-namespace:AppCrijoya.ViewModels"
xmlns:model="clr-namespace:AppCrijoya.Models"
x:Class="AppCrijoya.Views.InvoicePage"
x:DataType="viewmodels:InvoiceViewModel"
Title="Facturas">
<!--<ContentPage.BindingContext>
<viewmodels:InvoiceViewModel />
</ContentPage.BindingContext>-->
<ContentPage.Content>
<StackLayout BackgroundColor="White">
<CollectionView x:Name="ListViewCart"
ItemsSource="{Binding ListCart}"
SelectionMode = "Single"
SelectedItem="{Binding CartSelected}"
SelectionChangedCommand="{Binding ShowAlertCommand}"
SelectionChangedCommandParameter="{Binding CartSelected, Source={RelativeSource Self}}"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Invoice">
<Frame Margin="2" CornerRadius="30" HasShadow="True">
<Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="160" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Nombre del Cliente:" VerticalOptions="Start"/>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}" VerticalOptions="Start"/>
<Image Source="arrow_dropdown.png" HeightRequest="20" WidthRequest="20" Grid.Row="0" Grid.Column="3" VerticalOptions="End"/>
<Label Grid.Row="1" Grid.Column="0" Text="Fecha Compra:" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Date}" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="0" Text="Monto Total:" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Total, Mode=TwoWay, StringFormat='{0:N2}€'}" VerticalOptions="Start"/>
<Label Grid.Row="3" Grid.ColumnSpan="3" Text="Detalle Compra" VerticalOptions="Start"/>
<BoxView Grid.Row="4" Grid.ColumnSpan="3" Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
<Label Grid.Row="5" Grid.Column="0" Text="Nombre" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="1" Text="Monto" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="2" Text="Cantidad" VerticalOptions="Start" TextColor="#9C2424"/>
<StackLayout Grid.Row="6" Grid.ColumnSpan="3" Margin="0" Padding="0">
<CollectionView x:Name="ListViewOrders"
ItemsSource="{Binding ListOrders}"
SelectionMode = "None"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:CrOrder">
<Grid RowSpacing="0" ColumnSpacing="0" Margin="0" MinimumHeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Reference}" TextColor="Black" VerticalOptions="Center" FontSize="12" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Price, StringFormat='{0:N2}€'}" TextColor="Black" VerticalOptions="End" FontSize="12" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Quantity}" TextColor="Black" VerticalOptions="End" FontSize="12"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
What can I do to show the shadow all around the frame? Please help and thanks.
EDIT
This is what I have with Margin=2 on Frame
Margin=50
Padding=50
Just to show how it behaves

At first, you can create a new frame in your project to check if the cause is the renderer or not. Such as:
<Frame Margin="20" CornerRadius="10" HasShadow="True">
<Label Text="TestShaw" HorizontalOptions="Center"/>
</Frame>
If the shadow shows correctly, the cause maybe the layout or the margin of your frame. So you can change the values of it.
If the shadow shows incorrectly too, you may need to use a custom renderer for the frame. Such as:
[assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
namespace App36.Droid
{
public class MyFrameRenderer : Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
{
public MyFrameRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
CardElevation = 50;
SetOutlineSpotShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
SetOutlineAmbientShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
}
}
}
But in my project, both of them shows correctly. So if you need more information, you can check the link following.
Link: Xamarin forms Shadow on Frame in Android
And here is the frame in my project:
If the platform is ios for your project, please check this case:Forms frame isn't the same on iOS

Xamarin.forms list of list for carousal view

I have a xamarin.forms app which uses a carousal view.My carousal view have 6 items per view. But now it shows one item per view. I know the problem is I need to create a List of List.But I am stuck at this.
My expected output of carousal view is like this.
But what I am getting now is like this
My orginal list that contains data is like this.
ObservableCollection<SECHomescreenData> resultObjForSEC = callForSECtilesScreen.APICallResult<ObservableCollection<SECHomescreenData>>();
my SECHomescreenData.
public partial class SECHomescreenData
{
public string Status { get; set; }
public string Countered { get; set; }
}
When I bind this list to my carousal view,It will only shows one item per view.What I am trying to achieve is fill the data into 6 items of carousal and if there is 7 th item , go to the next page of carousal view. So how can I achieve this? If it requires list of list, how can I do it? Any help is appreciated.
My XAML.
<controls:CarouselViewControl IndicatorsTintColor="LightBlue" ArrowsTintColor="White" CurrentPageIndicatorTintColor="White" ItemsSource="{Binding SECList}" ShowIndicators="True" AnimateTransition="True" ShowArrows="True" Orientation="Horizontal" InterPageSpacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="5" ColumnSpacing="5" >
<Grid.RowDefinitions >
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="0" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145"
>
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="FillAndExpand">
<Grid RowSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGreen"></BoxView>
<Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0" >
</Label>
<Image Source="alllead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
<Grid RowSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightPink"></BoxView>
<Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="123" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">
</Label>
<Image Source="openlead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</Frame>
<Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="1" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
<StackLayout HorizontalOptions="FillAndExpand">
<Grid RowSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightSalmon"></BoxView>
<Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">
</Label>
<Image Source="closedlead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="1" Grid.Row="1" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
<StackLayout HorizontalOptions="FillAndExpand">
<Grid RowSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGoldenrodYellow"></BoxView>
<Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="18" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">
</Label>
<Image Source="callback.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="2" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
<StackLayout HorizontalOptions="FillAndExpand">
<Grid RowSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightSeaGreen"></BoxView>
<Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="169" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">
</Label>
<Image Source="referredby.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="1" Grid.Row="2" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
<StackLayout HorizontalOptions="FillAndExpand">
<Grid RowSpacing="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightCyan"></BoxView>
<Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="142" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">
</Label>
<Image Source="appoinments.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
PS: I asked this question before. But there are some changes.

Actually , you don'r need to use List of List . Set the size of each Frame(width equals 1/2 of screen width and height equals 1/3 height of screen) . And set the prpoerty
Span="3"
CarouselView is released after Xamarin.Forms 4.0 .
<ContentPage 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"
mc:Ignorable="d"
x:Name="contentPage" // set the name of the contentpage
x:Class="xxx.MainPage">
<CarouselView ItemsSource="{Binding MyItems}" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center">
<CarouselView.ItemsLayout>
<GridItemsLayout SnapPointsAlignment="Center" SnapPointsType="Mandatory" Span="3" Orientation="Horizontal"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame WidthRequest="{Binding Source={x:Reference contentPage}, Path=BindingContext.FrameWidth}" HeightRequest="{Binding Source={x:Reference contentPage}, Path=BindingContext.FrameHeight}" HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" BackgroundColor="#4D2F4F4F" BorderColor="#294145">
<StackLayout HorizontalOptions="FillAndExpand">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGreen"></BoxView>
<Label Text="111111" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >
</Label>
<Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0" >
</Label>
<Image Source="alllead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
</Grid>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
in Share Project App.xaml.cs
public static double ScreenWidth;
public static double ScreenHeight;
in Android MainActivity.cs
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
Forms.SetFlags("CollectionView_Experimental");
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density;
App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density;
LoadApplication(new App());
}
in iOS
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
//...
App.ScreenWidth = UIScreen.MainScreen.Bounds.Width;
App.ScreenHeight = UIScreen.MainScreen.Bounds.Height;
//...
}
in Code Behind or ViewModel
public double FrameHeight { get; private set; }
public double FrameWidth { get; private set; }
//...
FrameHeight = App.ScreenHeight/3.0;
FrameWidth = App.ScreenWidth/2.0;

System.FormatException on Content.View-Initialization

I'm developing an app for my Bachelor's degree for creating and managing archaeological Field Guides. One functionality should enable the user to create new Field Guides in-app. A Field guide should consist of general infos (title, author, etc.) and multiple entries for artifact-types.
I want to realize that by having one ContentPage with two views - one for the book-info, one for a list of entries. The user should be able to switch between the two views.
To achieve that I created both as ContentViews, included them into the Parent-XAML and bound their IsVisible-attributes to individual booleans in the ViewModel. Strangely "NewBookInfo" throws an exeption on initialization, while "NewBookEntryList" works just fine. I couldn't find a solution on google and am kinda grasping at straws right now...
<ColumnDefinition Width="100/3*" /> results in runtime exception in InitializeComponent():
System.FormatException
Message=One of the identified items was in an invalid format.
Source=Xamarin.Forms.Core
StackTrace:
at Xamarin.Forms.GridLengthTypeConverter.ConvertFromInvariantString(String value)
...
My Parent-Page:
<?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:local="clr-namespace:FieldGuide.Views"
x:Class="FieldGuide.AddBook">
<StackLayout Spacing="1" VerticalOptions="Fill">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="New Guide" FontAttributes="Bold" FontSize="30"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Grid.Row="0" Grid.Column="0" />
<ImageButton Source="Return_klein.png" Grid.Row="0" Grid.Column="1" Command="{Binding ReturnCommand}"/>
<ImageButton Source="Hamburger_Icon_klein.png" Grid.Row="0" Grid.Column="2" Command="{Binding MenuCommand}"/>
</Grid>
<!--BackgroundColor="Transparent" bei Buttons einfügen-->
<local:NewBookInfo VerticalOptions="FillAndExpand" IsVisible="{Binding BookInfoVisible}"/>
<local:NewBookEntryList VerticalOptions="FillAndExpand" IsVisible="{Binding BookEntriesVisible}"/>
</StackLayout>
</ContentPage>
NewBookInfo.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FieldGuide.Views.NewBookInfo">
<ContentView.Content>
<StackLayout>
<Grid Margin="10, 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="70*"/>
</Grid.ColumnDefinitions>
<Label Text="Title" FontSize="20"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Grid.Row="0" Grid.Column="0"/>
<Label Text="Author" FontSize="20"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Grid.Row="1" Grid.Column="0"/>
<Label Text="Tags" FontSize="20"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Grid.Row="2" Grid.Column="0"/>
<Entry Grid.Row="0" Grid.Column="1"/>
<Entry Grid.Row="1" Grid.Column="1"/>
<Entry Placeholder="Separate with Comma" Grid.Row="2" Grid.Column="1"/>
</Grid>
<Grid VerticalOptions="EndAndExpand" Margin="10, 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100/3*"/>
<ColumnDefinition Width="100/3*"/>
<ColumnDefinition Width="100/3*"/>
</Grid.ColumnDefinitions>
<Button Text="Save" Grid.Row="0" Grid.Column="0"
Command="{Binding SaveBook}"/>
<Button Text="Entries" Grid.Row="0" Grid.Column="1"
Command="{Binding NewEntry}"/>
<Button Text="Discard" Grid.Row="0" Grid.Column="2"
Command="{Binding DiscardBook}"/>
</Grid>
</StackLayout>
</ContentView.Content>
</ContentView>
For comparison NewBookEntryList.xaml (ListView is not yet finished)
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FieldGuide.Views.NewBookEntryList">
<ContentView.Content>
<StackLayout>
<ListView x:Name="FileSystem" ItemsSource="{Binding Entries}" SelectedItem="{Binding SelectedEntry}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" Margin="10" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid VerticalOptions="EndAndExpand" Margin="10, 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button Text="Book Info" Grid.Row="0" Grid.Column="0"
Command="{Binding SaveBook}"/>
<Button Text="New Entry" Grid.Row="0" Grid.Column="1"
Command="{Binding NewEntry}"/>
</Grid>
</StackLayout>
</ContentView.Content>
</ContentView>
This is how I wish it to be in the end.

The problem was in the width-declaration of the last grid in NewBookInfo.xaml.But the error wasn't flagged by the built-in error-detection in VS.
Instead of
<ColumnDefinition Width="100/3*"/>
I just replaced it with
<ColumnDefinition Width="33*"/>
Thanks to #Jason, for providing help in the comments.

MasterDetailPage background image not displaying in IOS in xamarin.forms

I am using MasterDetailPage in Xamarin.Forms. I have set BackgroundImage property in OnAppearing() method. It works fine in android. But, In IOS image doesn't display.
My Code : XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="EzySales.Views.MainPageMaster"
Title="Master" >
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="MenuItemsListView" WidthRequest="200"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}"
SeparatorColor="White">
<ListView.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image Source="logo.png" Grid.Row="1" Grid.Column="1"></Image>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Grid.Row="2">
<StackLayout Padding="15,10" Orientation="Horizontal">
<Image Source="{Binding Icon}"
WidthRequest="30"
HeightRequest="30" Margin="0,0,5,0"
VerticalOptions="Center" />
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding Title}"
TextColor="White"
FontSize="16" FontAttributes="Bold" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
MainPageMaster.xaml.cs
protected override void OnAppearing()
{
this.BackgroundImage = "masterpagebg.png";
}
Image is available in Resource Folder.

I have also face same issue and solved.
Try this Hope it will Help..
You could use a Relative layout to achieve the results
<RelativeLayout>
<Image Source="masterpagebg.png" Opacity="1"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<ListView RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}" x:Name="MenuItemsListView" WidthRequest="200"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}"
SeparatorColor="White">
<ListView.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image Source="logo.png" Grid.Row="1" Grid.Column="1"></Image>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Grid.Row="2">
<StackLayout Padding="15,10" Orientation="Horizontal">
<Image Source="{Binding Icon}"
WidthRequest="30"
HeightRequest="30" Margin="0,0,5,0"
VerticalOptions="Center" />
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding Title}"
TextColor="White"
FontSize="16" FontAttributes="Bold" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>

You should check if the image is set to the iOS project as BundleResource, if not you should set it as so. I myself had some troubles with this.

call variable from codebehind inside DataTemplate with Xamarin Forms

It would recover from the codebehind firstGrid and secondGrid objects.
But these are inside a DataTemplate, as I can recall them from the codebehind?
Thank you.
Here is my code:
<control:CarouselView x:Name="carouselView">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46*"></RowDefinition>
<RowDefinition Height="0.2*"></RowDefinition>
<RowDefinition Height="53.8*"></RowDefinition>
</Grid.RowDefinitions>
<!-- griglia del carousel, tutta la struttura inizia qui-->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"></ColumnDefinition>
<ColumnDefinition Width="35*"></ColumnDefinition>
<ColumnDefinition Width="45*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Image="backBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmePrev" Grid.Column="0"></Button>
<!--<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>-->
<StackLayout Margin="0,0,10,0" VerticalOptions="Center" HorizontalOptions="End" Grid.Column="1">
<Image HeightRequest="70" Source="{Binding Immagine}" Aspect="AspectFit"></Image>
</StackLayout>
<!-- griglia superiore, riprende i dati tra le barre bianche-->
<Grid Grid.Row="0" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{Binding Descrizione}" Margin="{Binding Margine}" TextColor="#fff" FontSize="Small" VerticalTextAlignment="End" HorizontalTextAlignment="Start" Grid.Row="0"/>
<Label Text="{Binding Valore}" FontSize="Large" TextColor="#fff" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" Grid.Row="1"/>
<Image Margin="-25,-5,0,0" Source="{Binding ImmagineBatteriaEmoticon}" HeightRequest="50" x:Name="emoticonBattery" Grid.Row="1" VerticalOptions="Start" HorizontalOptions="Start"></Image>
</Grid>
<Button Image="nextBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmeNext" Grid.Column="3"></Button>
<!--<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>-->
</Grid>
<!-- griglia fare la riga bianca -->
<Grid BackgroundColor="White" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
<!-- griglia inferiore, ritrare i dati dei testi -->
<ScrollView Grid.Row="2">
<Grid Padding="5" Grid.Row="2" x:Name="firstGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"></ColumnDefinition>
<ColumnDefinition Width="35*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="0" Text="{Binding Testo1}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="0" Text="{Binding Valore1}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="1" Text="{Binding Testo2}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="1" Text="{Binding Valore2}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="2" Text="{Binding Testo3}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="2" Text="{Binding Valore3}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="3" Text="{Binding Testo4}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="3" Text="{Binding Valore4}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="4" Text="{Binding Testo5}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="4" Text="{Binding Valore5}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="5" Text="{Binding Testo6}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="5" Text="{Binding Valore6}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="6" Text="{Binding Testo7}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="6" Text="{Binding Valore7}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="7" Text="{Binding Testo8}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="7" Text="{Binding Valore8}"></Label>
</Grid>
<RelativeLayout Grid.Row="2" x:Name="secondGrid" BackgroundColor="Fuchsia" HeightRequest="50" WidthRequest="100">
<Label Text="ciao"></Label>
</RelativeLayout>
</ScrollView>
</Grid>
<!--<Label Text="{Binding Testo}" />-->
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
Warning: Before that is duplicated, the code is for Xamarin forms pcl. Which it is slightly different from c # with WPF.
thanks

When you use a DataTemplate, the binding concern the object you are binding and not the ViewModel you may have used.
But fear not, as Xamarin provides us ways to attach treatements to this kind of objects !
Let's say you want to click your image :
<Button Image="nextBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmeNext" Grid.Column="3"></Button>
May become
<Image Source="nextBlueArrow.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="clickmeNext"
CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
With the clickmeNext method in your code behind like this :
public async void clickmeNext(object sender, EventArgs e)
{
Image imageSender = (Image)sender;
YourObject yourObject= (YourObject )imageSender.BindingContext;
//some actions on your instance of YourObject,
//which is the instance linked to the image
}
If I did not answer your question, don't hesitate to add to your question to make it more clear.

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Xamarin Forms Vertical Options Ignored - c#

Related

Xamarin - Frame Shadow not showing properly

Xamarin.forms list of list for carousal view

System.FormatException on Content.View-Initialization

MasterDetailPage background image not displaying in IOS in xamarin.forms

call variable from codebehind inside DataTemplate with Xamarin Forms

Categories

Resources