I have different views along with ListView on my screen. ListView almost fills the screen and elements below the ListView are not visible. I have set HasUnEvenRows=True because each list item has different height.
<StackLayout Spacing="0">
<local:PageHeader></local:PageHeader>
<Grid Padding="25,15,25,10" Grid.RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" VerticalOptions="CenterAndExpand" Grid.ColumnSpan="1" Text="{local:Translate FROM_COLON}" FontSize="18"></Label>
<StackLayout Orientation="Vertical" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
<Label Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontStyle="Bold" FontSize="18"></Label>
<Label Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontSize="18"></Label>
</StackLayout>
<ContentView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Padding="0,15,0,0">
<Button Text="{Binding DetailsButtonTitle}" Clicked="OnDetailButtonClick" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.DarkBlue}" HorizontalOptions="Start" VerticalOptions="StartAndExpand" Padding="0"></Button>
</ContentView>
<Button Grid.Column="3" Grid.Row="1" Grid.RowSpan="{Binding ReplyButtonRowSpan}" Text="{local:Translate REPLY}" Image="reply_arrow_small" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.Gray}" HorizontalOptions="End" VerticalOptions="EndAndExpand" Padding="0" FontSize="13" WidthRequest="65" Clicked="OnReplyButtonClick"></Button>
<Label Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown, Converter={local:NotConverter Convert}}" Text="{Binding HumanizedDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
<ContentView Padding="0,0,0,5" Grid.Column="0" Grid.Row="2" IsVisible="{Binding IsDetailShown}" >
<Label Text="{local:Translate FROM_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<StackLayout Orientation="Horizontal" Grid.Column="1" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}">
<Label VerticalTextAlignment="Start" Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<Label VerticalTextAlignment="Start" Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</StackLayout>
<Label Grid.Column="0" Grid.Row="4" Grid.RowSpan="1" IsVisible="{Binding IsDetailShown}" Text="{local:Translate TO_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<ListView x:Name="ListToAddresses" Grid.RowSpan="1" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}" HeightRequest="{Binding ListHeight}" VerticalOptions="Start" HasUnevenRows="True" CachingStrategy="RecycleElement" ItemsSource="{Binding Recipients}" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell IsEnabled="False">
<StackLayout VerticalOptions="Start" Padding="0,0,0,12" >
<Label Text="{Binding Path=Key}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" VerticalOptions="Start" />
<Label Text="{Binding Path=Value}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" VerticalOptions="Start" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentView Padding="0,5,0,0" Grid.Column="0" Grid.Row="5" IsVisible="{Binding IsDetailShown}">
<Label Text="{local:Translate DATE_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<Label Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="3" VerticalTextAlignment="End" IsVisible="{Binding IsDetailShown}" Text="{Binding LongDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</Grid>
<BoxView HeightRequest="1" BackgroundColor="{x:Static local:ColorUtils.LightGray}"></BoxView>
<ContentView Padding="25,15,25,0">
<Label Text="{Binding Description}" FontSize="18"></Label>
</ContentView>
</StackLayout>
Related
I looked for open codes or nuget that could help me with this question, I would like to create a list of Cards like these in the images, where I could have several click events, but could get the id of the item that fills the card.
Eu tentei com CollectionView, porem não consigo pegar a id do item do card, nem com uma label e o x:Name atribuído a essa label.
Segue o cod xaml que criei
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage.Resources>
<converters:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage" />
</ContentPage.Resources>
<ContentPage.Content>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Image.GestureRecognizers HeightRequest="30" WidthRequest="30">
</Image.GestureRecognizers>
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0" Margin="2">
<Grid>
<StackLayout Padding="0" Margin="5,25,10,0" HorizontalOptions="Center">
<Frame BackgroundColor="White" HeightRequest="440" WidthRequest="330" HasShadow="True" Padding="5" Margin="0">
<StackLayout>
<Label x:Name="lblMessage" HorizontalOptions="StartAndExpand" Text="Rep:" IsVisible="false"></Label>
<StackLayout HeightRequest="100" WidthRequest="320" Orientation="Horizontal" HorizontalOptions="Fill">
<Frame HeightRequest="100" WidthRequest="320" BackgroundColor="Transparent" Padding="0" Margin="0">
<ImageButton Source="{Binding ImagemVideo, Converter={StaticResource ByteArrayToImage}}" Aspect="AspectFill" Margin="0" Clicked="Video_Clicked"/>
</Frame>
</StackLayout>
<Frame BorderColor="Transparent" BackgroundColor="White" HorizontalOptions="CenterAndExpand">
<Label Grid.Column="0"
TextColor="#000000"
Text="{Binding NomeTreino}"
FontAttributes="None"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Margin="8,0,10,10"
FontSize="Medium"/>
</Frame>
<Frame BorderColor="LightGray" BackgroundColor="White" HorizontalOptions="StartAndExpand">
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" Text="{Binding Descricao}"/>
</Frame>
<StackLayout Padding="0" Margin="5,5">
<Grid Visual="Material">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Visual="Material" Grid.Column="0" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Carga:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding cargaInicial}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Séries:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding serie1}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Rep:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding repeticao1}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BorderColor="LightGray">
<StackLayout >
<!--<Image Source="prod.jpg"></Image>-->
<Label Text="{Binding tempoIntervalo}" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BorderColor="LightGray">
<StackLayout >
<ImageButton BackgroundColor="White" Source="Checkblue.png" Aspect="Fill" HeightRequest="20" WidthRequest="20" Margin="0" Clicked="BtnCheck_Clicked"/>
</StackLayout>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</StackLayout>
</ContentPage.Content>
in your event handler
protected void ButtonClicked(object Sender, EventArgs args)
{
var btn = (Button)sender;
var item = (MyClassName)btn.BindingContext;
// now you can access an property on item that you need
}
Im unable to navigate the content page when i click on button using xamarin forms. It is working on Android but not working in IOS.
Kindly check the below code.
ButtonClick Event
Navigation.PushAsync(new LeaveRequestAddEdit("insert"));
The xaml code is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
<ContentPage.Content>
<StackLayout>
<Frame Padding="5" Margin="5,5,5,5" CornerRadius="10" HasShadow="True" BackgroundColor="White" BorderColor="LightBlue">
<Grid BackgroundColor="White" x:Name="LeaveRequestContainer">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<RadioButton x:Name="OnedayRadioBtn" Clicked="OnedayRadioBtn_Clicked" />
<Label Text="One Day" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
<RadioButton x:Name="MultipledaysRadioBtn" Clicked="MultipledaysRadioBtn_Clicked"/>
<Label Text="Multiple Days" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<Label x:Name="selectlable" Text="Select :" Margin="50,0,0,0" IsVisible="False" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="selectdate" IsVisible="False" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand" />
<Label x:Name="fromdatelabel" Text="From Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="fromdate" IsVisible="False" DateSelected="fromdate_DateSelected" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Label x:Name="todatelable" Text="To Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="Todate" IsVisible="False" Date="{Binding ToDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Frame CornerRadius="10" Margin="0" Padding="0" BorderColor="LightBlue" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<local1:ExtendedEditorControl x:Name="Reason" Placeholder="Enter Reason Here" IsExpandable="True" Text="{Binding ReasonForLeave,Mode=TwoWay}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" MaxLength="250" />
</Frame>
<StackLayout Orientation="Vertical" x:Name="ActionNoteStack" IsVisible="False" Grid.Row="4" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Label x:Name="title" IsVisible="False" Text="Action Notes :" TextColor="Black" HorizontalOptions="Start" VerticalOptions="Center" />
<!--<Label Text="Action Notes :" WidthRequest="400" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" TextColor="Blue"/>-->
<Frame x:Name="actionframe" IsVisible="False" CornerRadius="10" Margin="0" BorderColor="LightBlue" Padding="0">
<Label x:Name="actionNote" IsVisible="False" Text="{Binding ActionNotes,Mode=TwoWay}" Margin="5" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
</Frame>
</StackLayout>
</Grid>
</Frame>
<StackLayout Margin="5,0,5,5" Orientation="Horizontal" VerticalOptions="End">
<Button Text="Save" x:Name="btnSave" BackgroundColor="#6559D8" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand" Clicked="btnSave_Clicked"/>
<Button Text="Cancel" x:Name="btnCancel" Clicked="btnCancel_Clicked" BackgroundColor="Gray" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Kindly help on this. I'm new to Xamarin forms
You can replace the Clicked event in the RadioButton with the CheckedChanged event to make it work.
I have a bug in the page display using a listview so I started migrating from listview to collectionview, but...
This is the XAML code with the collection View, I dont know why when the ItemSource dont have any data, the empty view is not shown.
<StackLayout Style="{StaticResource PageLayout}">
<StackLayout VerticalOptions="CenterAndExpand" IsVisible="{Binding LoadingIndicator}">
<ActivityIndicator IsRunning="True" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand" IsVisible="{Binding ShowContent}">
<CollectionView ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged" Style="{StaticResource CollectionViewChecklistDefault}">
<CollectionView.Header>
<StackLayout HeightRequest="5">
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnSpacing="0" RowSpacing="0" Margin="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="25" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*" />
<ColumnDefinition Width="33*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding APP_ID}" IsVisible="False"/>
<BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="8" Grid.ColumnSpan="3" Style="{StaticResource ListBox}"/>
<Image Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Style="{StaticResource ListImage}">
<Image.Source>
<FontImageSource Glyph="" FontFamily="FontAwesomeSolid" Color="#343a40"></FontImageSource>
</Image.Source>
</Image>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding OBSERVATION_TYPE_NAME}" Style="{StaticResource ListLabelBold}"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[DATE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}:'}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding OBSERVATION_DATE, StringFormat=' \{0:dd MMM yyyy}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[COMPANY], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding COMPANY_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[WORKPLACE], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding WORKPLACE_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[SECTOR], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding SECTOR_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[FOLLOW_UP_DEPARTMENT], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding FOLLOW_DEPARTMENT_NAME, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource PreviewLabel}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Traductions[DESCRIPTION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}, StringFormat='\{0}: '}" FontAttributes="Bold" TextTransform="Uppercase" TextColor="DarkGray"/>
<Span Text="{Binding OBSERVATION_DESCRIPTION, StringFormat=' \{0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Traductions[CLOSE_OBSERVATION], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListValueGreenEnd}" />
<Image Grid.Row="7" Grid.Column="2" Aspect="AspectFit" Style="{StaticResource ListImageArrow}">
<Image.Source>
<FontImageSource Glyph="" FontFamily="FontAwesomeSolid" Color="#7ca04b"></FontImageSource>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.EmptyView>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="{Binding Traductions[THERE_ARE_NO_OBSERVATIONS], Source={RelativeSource AncestorType={x:Type viewModel:ObservationCloseListViewModel}}}" Style="{StaticResource ListNotItemsFound}"/>
<Label Text="TEST"/>
</StackLayout>
</CollectionView.EmptyView>
</CollectionView>
</StackLayout>
</StackLayout>
This is how it shows with collection view (empty). I put an extra label with TEST
This is how it has to be
The root cause of the issue you faced lays in usage of CollectionView.Header. But that's not your mistake. It is a bug of CollectionView: EmptyView does not appear when Header is used.
It had been already reported to Xamarin.Forms developers. You can track the progress here.
I did some experiments. The only way I can get this symptom to happen is if {Binding ShowContent} fails to return True.
I believe the problem isn't the CollectionView. Its the visibility of the surrounding StackLayout.
To verify:
Replace IsVisible="{Binding ShowContent}" with IsVisible="True".
If that makes EmptyView show up, then check these possible causes:
BindingContext. (In a comment, you show what looks like correct code. Double-check.)
Proper declaration of ShowContent, to inform XAML of changes:
// Start "true", so InitializeComponent will begin with it there.
private bool _showContent = true;
public bool ShowContent {
get => _showContent;
set {
_showContent = value;
OnPropertyChanged();
}
}
If you have code that sets ShowContent, verify that you have set it to true.
I have xamarin forms app.I have a screen which looks nice on iphone 6.But in Iphone 5 , it look like compressed.How to solve this design issue? In bigger devices the design works fine.
My XAML
<Grid RowSpacing="1" x:Name="DetailsCardview" IsVisible="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,2">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
<Image Source="invoiceby.png" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Text="Invoice Details" TextColor="LightGreen" VerticalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Grid >
<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="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Invoice No" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="InvoiceNumber" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Customer" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="CustomerName" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Sold By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label x:Name="SoldBy" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Sold On" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
<Label Text="-" x:Name="SoldOn" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Invoiced By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="-" x:Name="InvoicedBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand"
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Referred By" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="5" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
<Label Text="-" x:Name="ReferredBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Current Carrier" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="1">
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="-" x:Name="CurrentCarrier" MaxLines="1" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
<Grid Grid.Row="1">
<Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,7">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
<Image Source="tracking.png" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Text="Tracking Details" TextColor="LightGreen" VerticalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Grid >
<Grid.RowDefinitions >
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Tracking No" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding TrackingNo}" x:Name="TrackingNo" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Product Name" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding ProductName}" x:Name="ProductName" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Comments" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding InvoiceComments}" x:Name="Comments" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Refund" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding Refund}" x:Name="Refund" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="4" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Micro" Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
<Label Text="Quantity" TextColor="LightBlue" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4" >
<Label Text=":" TextColor="White" VerticalTextAlignment="Center" >
</Label>
</StackLayout>
<StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
<Label Text="{Binding Qty}" x:Name="Quantity" TextColor="White" VerticalTextAlignment="Center" MaxLines="1" HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
<Frame Grid.Row="2" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" HasShadow="False" CornerRadius="7" BackgroundColor="Transparent" BorderColor="Transparent" Margin="10,2,10,2" Padding="5">
<Frame BackgroundColor="Transparent" HasShadow="False" HorizontalOptions="FillAndExpand" BorderColor="Green" IsClippedToBounds="True" Padding="0" Margin="10,0,10,0">
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS" Value="35" />
<On Platform="Android" Value="40" />
</OnPlatform>
</Frame.CornerRadius>
<Grid >
<Image Source="dialerbg2.png" Aspect="AspectFill" HeightRequest="30"></Image>
<Grid BackgroundColor="Transparent" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<Image Source="cellphone.png" HorizontalOptions="Start" HeightRequest="25" VerticalOptions="Center"></Image>
<Label Grid.Column="0" Text="Phone" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="LightBlue" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
<Label Grid.Column="1" Text=":" VerticalTextAlignment="Center" TextColor="White" FontSize="Small">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Label x:Name="PhoneNumber" Grid.Column="2" Text="+919605209575" VerticalTextAlignment="Center" TextColor="White" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Image Source="caller.png" HorizontalOptions="EndAndExpand" Grid.Column="3"></Image>
</Grid>
</Grid>
</Frame>
</Frame>
</Grid>
How to make this similar on every screen size? Should I add scrollview? Iam bit confused. Any help is appreciated.
You should wrap your design within a ScrollView.
In smaller devices your list will not have sufficient space to display all elements, so it will resize and adjust to fill the available space.
can you give me some guidlines about setting diffrent text sizes
according to device screen size? I think that will solve my problem
For example:
nfloat screenSize = UIScreen.MainScreen.Bounds.Size.Height;
// 5, 5s, SE, 5C 320 * 568
nfloat iphone5sHeight = 568;
if (screenSize <= iphone5sHeight)
{
//set the fontSize
}
else {
//set the fontSize for higher screen
}
You can have a look at these two threads for more idea: different-uifont-sizes-for-different-ios-devices-in-swift and how-to-ios-item-and-font-sizes-scaling-as-screen-size
I am unable to use a grid within a DataTemplate.
Specifically, text does not get rendered when using a grid.
<ListView ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Name}" />
<Label Grid.Row="1" Grid.Column="0" Text="Labor:" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding LaborCost}" />
<Label Grid.Row="2" Grid.Column="0" Text="Materials:" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Materials, Converter={StaticResource MaterialsToCostConverter}}" />
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Description}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestions?