I am implementing a picker in xamarin.forms project so while implementing that I am getting the above issue
XamarinPicker.xaml
<pages:CustomPage.Content>
<Grid>
<Grid.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10,20,10,10" />
<On Platform="Android" Value="10" />
</OnPlatform>
</Grid.Padding>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Padding="10,1,0,1" Margin="10,0,10,10" HeightRequest="50" HasShadow="False" BorderColor="#24527A" CornerRadius="5" VerticalOptions="Start">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<controls:CustomEntry Placeholder="{local:Translate NoteSearchHint}" Text="{Binding SearchText}">
<controls:CustomEntry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding TextChangeCommand}" />
</controls:CustomEntry.Behaviors>
</controls:CustomEntry>
<BoxView Grid.Column="1" BackgroundColor="#24527A"/>
<Image Grid.Column="2" Source="search_black" IsEnabled="{Binding IsSearchEnable}" IsVisible="{Binding SearchButtonVisibility}" HeightRequest="20" WidthRequest="20" VerticalOptions="Center" HorizontalOptions="Center" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SearchCommand}"/>
</Image.GestureRecognizers>
</Image>
<Image Grid.Column="2" IsEnabled="{Binding IsCloseEnable}" IsVisible="{Binding CloseButtonVisibility}" Source="close_gray" HeightRequest="{OnIdiom Phone='20',Tablet='30'}" WidthRequest="{OnIdiom Phone='20',Tablet='30'}" Aspect="AspectFit" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CloseCommand}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
<StackLayout Grid.Row="1">
<Grid Padding="{OnIdiom Phone='20,10,20,0',Tablet='30,15,30,0'}" RowSpacing="0" ColumnSpacing="{OnIdiom Phone='20',Tablet='30'}" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{OnIdiom Phone='44',Tablet='58'}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Label Text="My Notes" TextColor="{Binding Tab1TextColor}" Style="{DynamicResource LibraryPurpleSemiBoldLabel}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeTabCommand}" CommandParameter="1" />
</StackLayout.GestureRecognizers>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="0" IsVisible="{Binding IsVisibleTab1Box}" HeightRequest="{OnIdiom Phone='4',Tablet='7'}" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="{DynamicResource Yellow}" CornerRadius="{OnIdiom Phone='4,4,0,0',Tablet='7,7,0,0'}" />
<StackLayout Grid.Row="0" Grid.Column="1">
<Label Text="Other Notes" TextColor="{Binding Tab2TextColor}" Style="{DynamicResource LibraryGraySemiBoldLabel}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeTabCommand}" CommandParameter="2" />
</StackLayout.GestureRecognizers>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="1" IsVisible="{Binding IsVisibleTab2Box}" HeightRequest="{OnIdiom Phone='4',Tablet='7'}" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="{DynamicResource Yellow}" CornerRadius="{OnIdiom Phone='4,4,0,0',Tablet='7,7,0,0'}" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="2" Padding="0" HorizontalOptions="EndAndExpand" IsVisible="{Binding FilterVisibility}" VerticalOptions="StartAndExpand" Orientation="Horizontal">
<Label Text="Filter by:"/>
<Frame HeightRequest="{OnIdiom Phone='30',Tablet='50'}" Padding="0" HasShadow="false" CornerRadius="{OnIdiom Phone='4',Tablet='6'}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Picker x:Name="FilterPicker"
ios:Picker.UpdateMode="WhenFinished"
Title="All"
TitleColor="{DynamicResource LightGray}"
BackgroundColor="{DynamicResource TransparentLightGray}"
FontSize="{DynamicResource FontSize14}"
SelectedItem="{Binding SelectedFilter,Mode=TwoWay}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>All</x:String>
<x:String>Public</x:String>
<x:String>Private</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<!--<Image IsVisible="{Binding EndDropDownVisible}" AbsoluteLayout.LayoutBounds="0.95,0.5,20,20" AbsoluteLayout.LayoutFlags="PositionProportional" Source="chevrondropdown" HeightRequest="{OnIdiom Phone='20',Tablet='30'}" WidthRequest="{OnIdiom Phone='20',Tablet='30'}" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="EndDateImage_Tapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>-->
</Frame>
</StackLayout>
<ListView x:Name="NoteList" Grid.Row="3" ItemsSource="{Binding Notes}" HasUnevenRows="True" IsVisible="{Binding IsViewVisible}" CachingStrategy="RetainElement" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<!--<StackLayout Orientation="Vertical" HeightRequest="90" Margin="5,15,5,5" Padding="10,5,10,5">
<StackLayout Orientation="Horizontal">
<BoxView Color="Black" WidthRequest="5" HeightRequest="80" VerticalOptions="Center" />
<Label Text="Note text" FontSize="14" HeightRequest="80" TextColor="#585858" Margin="3,0,0,0"></Label>
</StackLayout>
<Label Text="Sample note text added by user" FontSize="10" VerticalOptions="StartAndExpand" FontAttributes="Bold" HorizontalOptions="StartAndExpand" TextColor="#000000" Margin="5,0,0,0"></Label>
</StackLayout>-->
<ViewCell>
<Frame Grid.Row="0" HasShadow="False" Padding="0" Margin="10,5" BorderColor="#e0e4e2" IsClippedToBounds="True" CornerRadius="10">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="{Binding NoteData.NoteColor, Converter={converters:HighlightColorConverter}}" Grid.Column="0" Grid.Row="0" Grid.RowSpan="5" WidthRequest="10"/>
<Label Text="{Binding NoteData.NoteText}" Grid.Column="1" Grid.Row="0" FontSize="Small" LineBreakMode="TailTruncation" FontAttributes="Italic" Margin="5,10,0,0" TextColor="Gray" MaxLines="2" VerticalTextAlignment="Center"/>
<Label Text="{local:Translate NoteLabel}" Grid.Column="1" Grid.Row="1" FontSize="Large" FontAttributes="Bold" Margin="5,5,0,5" VerticalTextAlignment="Center" TextColor="#3c5d80"/>
<Label Text="{Binding NoteData.NoteContent}" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="1" Grid.Row="2" FontSize="15" Margin="5,3,0,5" FontAttributes="Bold"/>
<Label Grid.Column="1" Grid.Row="3" TextColor="Gray" FontSize="10" Margin="5,0,0,10">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding PageNumber,Converter={converters:EpubPageIndexConverter}, StringFormat='Page Number : {0}'}" />
<Span Text="{Binding DisplayCreatedDate, StringFormat=' Added on {0: dd-MM-yyyy}'}" />
</FormattedString>
</Label.FormattedText>
</Label>
<StackLayout Grid.Column="1" Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="1" Text="Make it:"/>
<Frame Grid.Row="1" Grid.Column="2" HeightRequest="{OnIdiom Phone='30',Tablet='50'}" Padding="0" HasShadow="false" CornerRadius="{OnIdiom Phone='4',Tablet='6'}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Picker
ios:Picker.UpdateMode="WhenFinished"
Title="Select One"
TitleColor="{DynamicResource LightGray}"
BackgroundColor="{DynamicResource TransparentLightGray}"
FontSize="{DynamicResource FontSize14}"
SelectedItem="{Binding PublicPrivate}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Public</x:String>
<x:String>Private</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</Frame>
</Grid>
</StackLayout>
<ImageButton Source="more" HeightRequest="15" WidthRequest="15" Grid.Row="0" Grid.Column="2" Grid.RowSpan="4" VerticalOptions="Start" Margin="0,10,15,0" Command="{Binding Source={x:Reference NoteList}, Path=BindingContext.OpenActionPopupCommand}" CommandParameter="{Binding .}"/>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference NoteList}, Path=BindingContext.SelectNoteCommand}" CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row="3" IsVisible="{Binding IsViewVisible, Converter={converters:InverseBooleanConverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="{local:Translate NoNoteText}" FontSize="Default" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</pages:CustomPage.Content>
If I remove the SelectedItem="{Binding PublicPrivate}" this line of code it is not throwing any issue but if I add the above line the I am getting the above issue.
XamarinPickerViewModel.cs
string _publicPrivate;
public string PublicPrivate
{
get { return _publicPrivate; }
set { _publicPrivate = value;OnPropertyChanged(); }
}
public override void OnAppearing()
{
base.OnAppearing();
BindPickerData();
}
public void BindPickerData()
{
PublicPrivate = "public";
}
When I tap on the button it is throwing System.ArgumentNullException: 'Value cannot be null. Parameter name: element' this issue and it redirected me to
CustomTabbedPageRendere.cs
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
}
to this
please help me
thanks in advance!!!
To display some text and an image I use the following Collectionview ItemTemplate.
Unfortunately, elements with much text inside the Message property will overflow the template.
The result looks like the image below.
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutFlags="SizeProportional"
AbsoluteLayout.LayoutBounds=".0,.0,1,1"
Padding="0"
VerticalOptions="StartAndExpand">
<Grid Padding="2" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Padding="1" Grid.Column="0">
<templates:DisplayCircleImageTemplate .../>
</StackLayout>
<StackLayout Grid.Column="1"
Grid.Row="0"
VerticalOptions="StartAndExpand">
<Label Text="{Binding MessageHeader}" FontAttributes="Bold" FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame HasShadow="True"
Padding="0"
HorizontalOptions="Center">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="Center"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<StackLayout HorizontalOptions="End">
<Label Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}" Style="{DynamicResource LabelGeneralText}"/>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</custom:CustomFrame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
T
Is there a way to avoid this text-overflow?
Not super framilair with Xamarin but you can try this to shorten your Binding Message text (LineBreakMode="TailTruncation").
<Label
Text="This is a very long text"
LineBreakMode="TailTruncation"
WidthRequest="50">
</Label>
From here: https://forums.xamarin.com/discussion/20509/truncate-long-texts-with-ellipsis-on-label-control
Thanks for your suggestions, I will certainly use the LineBreakMode in the future!
I was able to solve the question by removing the AbsoluteLayout and replaced it with a GridLayout.
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<StackLayout Padding="0"
VerticalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<StackLayout Padding="1">
<templates:DisplayCircleImageTemplate
CircleBackgroundColor="{DynamicResource ColorPrimary}"
ImageSource="{Binding Stable.Image}"
ImageBorderThickness="1.2"
FrameBorderColor="{DynamicResource ColorPrimary}"
ImageBackgroundColor="{DynamicResource ColorPrimary}"
ImageBorderColor="{DynamicResource ButtonColor}"
HeightWidthOuterImage="{DynamicResource ProfileImageSize}"
CornerRadiusOuterImage="{DynamicResource ProfileImageSizeRadius}"
HeightWidthInnerImage="{DynamicResource ProfileImageSizeInsideSize}"/>
</StackLayout>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<StackLayout>
<Label Text="{Binding MessageHeader}"
FontAttributes="Bold"
FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame Grid.Row="1"
Grid.ColumnSpan="2"
HasShadow="True"
Padding="0"
HorizontalOptions="Center"
IsVisible="{Binding HasImage}">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="CenterAndExpand"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}"
Style="{DynamicResource LabelGeneralText}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"/>
</Grid>
</StackLayout>
</custom:CustomFrame>
</ContentView>
I m working on a Xamarin Forms project using Visual studio 2017.I need to show long text using scrolling , so i implemented following code but it not show the all content it shows part of the content and not scrolling as well ,only shows text within the height of the lable .This is not working for both Android and IOS .If i remove HeightRequest="350" it's scrolling but , content is not showing
<Grid BackgroundColor="#0B738C">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<!--bg-->
<RowDefinition Height="20"></RowDefinition>
<!--brand-->
<RowDefinition Height="30"></RowDefinition>
<!--Lable Agreement-->
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<!--Text Agreement-->
<!--checkox-->
<RowDefinition Height="50"></RowDefinition>
<!--I agree Button-->
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Source="{local:ImageResource bg.jpg}"
Aspect="Fill"
Grid.ColumnSpan="1" Grid.RowSpan="12" x:Name="bgImage" />
<Image
Grid.Row="1"
Grid.Column="0"
Source="{local:ImageResource brand.png}"
Aspect="Fill"
Scale="1.5"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.ColumnSpan="1" Grid.RowSpan="1" x:Name="imageBrand" >
</Image>
<Label
x:Name="labelAgreement"
IsVisible="True"
Grid.Row="2"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalOptions="Center"
Text="Software License and Agreement"
TextColor="WhiteSmoke"
FontFamily="Open Sans"
Margin="10"
FontSize="16" />
<ScrollView Grid.Row="3" Grid.Column="0" >
<StackLayout >
<Label
x:Name="txtAgreement"
HorizontalOptions="Center"
VerticalOptions="Fill"
HorizontalTextAlignment="Start"
WidthRequest="300"
HeightRequest="350"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
FontAttributes="None"
BackgroundColor="White"
IsVisible="True"/>
</StackLayout>
</ScrollView>
<Switch
x:Name="checkAgree"
Scale="0.70"
Grid.Row="4" Grid.Column="0"
Margin="15,0,10,5"
HorizontalOptions="Start"
Toggled="Handle_Toggled"></Switch>
<Label
Grid.Row="4" Grid.Column="0"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
HorizontalOptions="Start"
TextColor="#FFFFFF"
FontFamily="Open Sans"
FontSize="14"
FontAttributes="Bold"
Text="Agree to the above terms and conditions"
Margin="80,0,0,10"/>
<Button
Margin="0,0,0,0"
Grid.Row="5"
Grid.Column="0"
x:Name="buttonAgree"
Text="Continue"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsVisible="True"
BackgroundColor="#1B9170"
TextColor="#FFFFFF"
FontFamily="Open Sans"
FontSize="18"
FontAttributes="Bold"
WidthRequest="140"
IsEnabled="False"
Clicked="HandleAgree_Clicked"/>
<Label
Grid.Row="5"
Grid.Column="0"
x:Name="labelError"
Text=""
Font="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsVisible="false"/>
</Grid>
you need to give the HeightRequest to ScrollView.
<ScrollView Grid.Row="3" Grid.Column="0" HeightRequest="250">
<StackLayout >
<Label
x:Name="txtAgreement"
HorizontalOptions="Center"
VerticalOptions="Fill"
HorizontalTextAlignment="Start"
WidthRequest="300"
HeightRequest="350"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
FontAttributes="None"
BackgroundColor="White"
IsVisible="True"/>
</StackLayout>
</ScrollView>
I´m trying to draw something like a small bar chart using boxview control inside a listview (template with columns). So in one column of each item I want to draw the boxview with variable height (depending on a variable value)
Something like this:
<ListView x:Name="lstView" RowHeight="75">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Local}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="1" FontSize="10" TextColor="Navy" />
<Label Text="Empate" Grid.Row="0" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Column="3" FontSize="10" TextColor="Navy"/>
<Label Text="{Binding Visitante}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="5" FontSize="10" TextColor="Navy"/>
**<BoxView Grid.Row="0" Grid.Column="5" HeightRequest="{Binding PctLocal}" WidthRequest="15"/>;**
<Label Text="{Binding PctEmpate}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="2" FontSize="10" />
<Label Text="{Binding PctVisitante}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="4" FontSize="10" />
<Label Text="{Binding LocalSupporters}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="0" FontSize="10" />
<Label Text="{Binding DrawSupporters}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" FontSize="10" />
<Label Text="{Binding AwaySupporters}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="4" Grid.ColumnSpan="2" FontSize="10" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I achieve that?
I am new in a Xamarin. I am working on my first Xamarin.Forms App. From the beginning I was testing everything using simulator iPhone 6s iOS 9.2 and everything was fine but at the end when I test it on iPhone 4s iOS 9.2 I got something strange UI as like attached in below image.
On every screen some of the part is going outside the screen. For above page Xaml code is given below. What I can do to make it working on every device in PCL only? I found same problem on Android too.
Xaml :
<ContentPage.Content>
<StackLayout Padding="10" Spacing="10" VerticalOptions="CenterAndExpand">
<Button BackgroundColor="Red" TextColor="White" Clicked="btnLogout_Click" Text="Logout" WidthRequest="80" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>
<Grid HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="110" />
<RowDefinition Height="110" />
<RowDefinition Height="110" />
<RowDefinition Height="110" />
</Grid.RowDefinitions>
<!-- First Row-->
<StackLayout Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" BackgroundColor="#DAF7A6" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="comingInClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Coming In" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Grid.Row="0" BackgroundColor="#FFC300" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="attendanceClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Leaves/
Holidays" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="1" BackgroundColor="#FF5733" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="statusClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Status" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="#C70039" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="goingOutClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Going Out" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Grid.Row="2" BackgroundColor="#00EC93" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="eventCalendarClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Event Calendar" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>