Use custom DataTemplate in XF with XAML - c#

This code is working :
<ListView ItemsSource="{Binding ItemsSourcePrimary}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="15, 5, 15, 5" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Image Source="{Binding IconSource}" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="{Binding Title}" VerticalOptions="Center" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But I would like to seperate a part into a class like this :
<ListView ItemsSource="{Binding ItemsSourcePrimary}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<local:MenuListCell Title="{Binding Title}" IconSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But I have an error :
No Property of Text Name found
I implement the class MenuListCell in a xaml file with this code :
<?xml version="1.0" encoding="utf-8" ?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test.MenuListCell">
<ViewCell.View>
<StackLayout Padding="15, 5, 15, 5" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Image Source="{Binding IconSource}" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="{Binding Title}" VerticalOptions="Center" />
</StackLayout>
</ViewCell.View>
</ViewCell>
Do you have a solution ?
Do we need to create a c# file .cs in order to implement the properties or we can do it in xaml ?


If you bind the MenuListCell always to the same type of objects, you just have to change
<local:MenuListCell Title="{Binding Title}" IconSource="{Binding IconSource}" />
to
<local:MenuListCell />
The Datacontext of the cell is your item. So the Title in
<Label Text="{Binding Title}" VerticalOptions="Center" />
is a property of the list item.

Related

How to change the height of item in ListView?

I have a problem with visual displaying of my list view.The height of my items are too small.Firstly I thought that my list is empty.But when I click on the item the action works and information of selected item is transmitted.Then I wrote only 3 labels,and list display only 2 labels and then I understood that height of my item is too small/I tried to change height of my list,ViewCell.View,Labels,but it does not work.Please help me
<ContentView.Content>
<controls:CustomFrame CornerRadius="25,25,0,0" Margin="0" Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Padding="0">
<!-- <StackLayout.GestureRecognizers>
<SwipeGestureRecognizer Direction="Up" Command="{Binding RefreshCommand}" ></SwipeGestureRecognizer>
</StackLayout.GestureRecognizers>-->
<ListView ItemsSource="{Binding MyPins}" x:Name="ListPlaces" IsPullToRefreshEnabled="True" RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing}"
SelectionMode="None">
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Frame CornerRadius="10" BackgroundColor="LightBlue">
<StackLayout Orientation="Vertical" Padding="0">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer CommandParameter="{Binding .}" Command="{Binding BindingContext.CallPlace, Source={x:Reference ListPlaces}}" ></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
<Label x:Name="NameOfPlace" Text="{Binding MyPins.Name}" TextColor="#2D78FD" FontSize="14" FontFamily="Robobo"/>
<Label x:Name="AdressOfPlace" Text="{Binding MyPins.Address}" TextColor="#616161" FontSize="12" FontFamily="Robobo"/>
<StackLayout Orientation="Horizontal">
<Label x:Name="TimeWork" VerticalOptions="Center" Text="Open until - " TextColor="#616161" FontSize="12" FontFamily="Robobo"/>
<Label x:Name="TimeWork1" VerticalOptions="Center" Text="{Binding Opened}" TextColor="#616161" FontSize="12" FontFamily="Robobo"/>
<Image Source="openIcon" VerticalOptions="Center" />
<Button HeightRequest="24" VerticalOptions="Center" Padding="0,-3,0,0" WidthRequest="92" HorizontalOptions="EndAndExpand" FontSize="14" CornerRadius="45" BackgroundColor="#2D78FD" TextColor="White" Text="Call up"/>
</StackLayout>
</StackLayout>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</controls:CustomFrame>
</ContentView.Content>

There is a Row height property inside ListView:
C#:
RowHeightDemoListView.RowHeight = 100;
Xaml:
<ListView x:Name="RowHeightDemoListView" RowHeight="100" />

How can i use table view and picker as user input?

I would like to create a page like this: [1]: https://imgur.com/YreKQi3. But picker comes with underline and i also am not being able to display table separator line.
I tried to use tableview inside a frame but it didnt work. because frame's width is larger than table and seperator becomes invisible.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="KiaiDay.Views.PosLogin.ComoTeSentesPage"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Como te sentes?">
<ContentPage.Content>
<StackLayout Padding="30">
<StackLayout HorizontalOptions="Center">
<Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
</StackLayout>
<Frame CornerRadius="10" BackgroundColor="#ECECEC" BorderColor="LightGray" Padding="10" HeightRequest="200">
<TableView Intent="Form" HeightRequest="200">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal">
<Label Text="Energia" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="500" Opacity="1"/>
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Mindset" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Estratégia" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" TextColor="White" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Acção" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Conexão" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
´´´

I write a simple demo to achieve the requirement of the image in your answer, I use Frame and Grid:
<StackLayout Padding="30">
<StackLayout HorizontalOptions="Center">
<Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
</StackLayout>
<Frame CornerRadius="7" BackgroundColor="Gray" BorderColor="LightGray" Padding="3" HeightRequest="180" HasShadow="False">
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="CVC Code:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
<local:BorderlessPicker BackgroundColor="White" Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1321</x:String>
<x:String>3299</x:String>
</x:Array>
</Picker.ItemsSource>
</local:BorderlessPicker>
<Label Text="Card No:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
<local:BorderlessPicker BackgroundColor="White" Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1900</x:String>
<x:String>1233</x:String>
</x:Array>
</Picker.ItemsSource>
</local:BorderlessPicker>
<Label Text="Expiry:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
<local:BorderlessPicker BackgroundColor="White" Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>12/4</x:String>
<x:String>11/8</x:String>
</x:Array>
</Picker.ItemsSource>
</local:BorderlessPicker>
</Grid>
</Frame>
</StackLayout>
In code behind, I removed the border of picker by using custom renderer:
AndroDevil mentioned in the comment: xamarin-tip-borderless-picker :
public class BorderlessPicker : Picker
{
}
Here is the result:

Xamarin forms :Size of an image inside a carousel view

I have a carousel view inside a stasklayout which is also inside a scroll view, the carousel view contains an image which is displayed in miniature, I want that the image is displayed in actual size.How to do it please?
<ScrollView>
<StackLayout>
<StackLayout VerticalOptions="Fill">
<cv:CarouselView ItemsSource="{Binding MediaItems}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Image Aspect="AspectFit" HorizontalOptions="FillAndExpand" Source="{Binding Uri}" />
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Text="{Binding tappedItem.ShortDesc}" IsVisible="{Binding ShortText,Mode=OneWay}" FontAttributes="Italic" FontFamily="Sans-serif" />
<Label Text="{Binding tappedItem.LongDesc}" IsVisible="{Binding LongText,Mode=OneWay}" FontAttributes="Italic"/>
<local:BorderlessButton Text="{Binding BtnText}" FontSize="Medium" TextColor="DodgerBlue" FontAttributes="None" Clicked="Button_Clicked" />
</StackLayout>
</ScrollView>

See is there any property for caursoel view like HasUnEvenRows property in listview.

entry text Disappear by keyboard

I am creating a mobile app using Xamarin form using PCL. A text box always hides from the keyboard in iOS, but this part is working perfectly in Android. Below is my Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MYDriver.List"
WidthRequest="20" BackgroundColor="#ffffff" >
<ContentPage.Content >
<StackLayout x:Name="InBoundlayout">
<StackLayout x:Name="ToolBar" Style="{StaticResource ToolbarOuter}" Padding="0,20,0,0">
<StackLayout Style="{StaticResource ToolbarInner1}">
<Image Source="back3.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Back_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Style="{StaticResource ToolbarInner1} " >
<Image Source="home3.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Home_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Style="{StaticResource ToolbarInner1}" >
<Image x:Name="PicTorchLight" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TorchLight_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Style="{StaticResource ToolbarInner2}">
<Label x:Name="lblUserName" Style="{StaticResource ToolbarLabel}" />
<Image Source="logout.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Logout_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
<StackLayout x:Name="layoutHead" Style="{StaticResource HeadColour}" Margin="0,-5">
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="Start">
<Label Text=" #" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="Order No" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label Text=" Ref" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="Dropoff" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text=" Items" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="Status" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
</StackLayout>
<StackLayout x:Name="listViewOredr1">
<ListView x:Name="listViewOredr" ItemTapped="OnActivitySelected" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame HasShadow="True" OutlineColor="Silver" Padding="3">
<Grid BackgroundColor="{Binding RowColour}" ColumnSpacing="2" Padding="2" >
<StackLayout x:Name="rr" Orientation="Horizontal" HeightRequest="35" BackgroundColor="{Binding RowColour}" Padding="10">
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="Start">
<Label FontSize="10" TextColor="#707070" Text="{Binding DROPROUTEPOS_}" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding ORDERNUM}" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding REF}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding DROPOFF}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding ItemScanStatus}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Image Aspect="AspectFit" HorizontalOptions="StartAndExpand" VerticalOptions="Center" HeightRequest = "20" WidthRequest="20" Source = "{Binding ImageStatus}" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout x:Name="layoutouterFrame" BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Frame Padding = "5" BackgroundColor="#ffffff">
<StackLayout Orientation="Horizontal">
<Grid x:Name="grid">
</Grid>
</StackLayout>
</Frame>
</StackLayout>
<StackLayout x:Name="layoutForBluetooth" HeightRequest = "200" BackgroundColor="#5DCBEE" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Frame HorizontalOptions="FillAndExpand" OutlineColor="Black" HasShadow="True">-->
<Grid>
<Label Text="Scan Your Barcode" x:Name="lblDriverNumber" TextColor="Black" FontSize="Medium" HorizontalOptions="FillAndExpand" Margin="0,10" />
<Entry x:Name="txtentry" FontSize="Medium" TextColor="Black" WidthRequest="400" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Margin="0,10" />
</Grid>
</Frame>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Can you please tell me how to stop the keyboard to hide the text box that is <Entry x:Name="txtentry" in above XAML.

It's quite a typical problem on iOS and there's a ready nuget plugin which you just need to import to your app and initialize. It will check whether the keyboard is not hiding the edited textbox and move the whole page up if it's needed.
https://www.nuget.org/packages/Xam.Plugins.Forms.KeyboardOverlap/

Xamarin Forms Android Keyboard moves whole Page upwards

I was trying to write a Xamarin.Forms chat-app.
The problem is: On Android, as soon as the keyboard shows up the whole page (including the ActionBar) moves upwards. I could fix the problem on IOS by using a NuGet package that resizes the page.
I already tried to set WindowSoftInputMode = Android.Views.SoftInput.AdjustResize in the MainActivity.cs in the Android project but it didn't work.
I also tried to resize the page manually by recalculating the screen size, but I haven't found a solution to get the keyboard size for an exact calculation on different devices.
Has anyone had the same problem before?
Is there an official Xamarin.Forms solution for all supported platforms?
This is my chat layout so far:
<ContentPage.Content>
<StackLayout Padding="0">
<ScrollView>
<ListView HasUnevenRows="true" x:Name="lvChat" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">
<Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14" />
<Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
<Label Text="{Binding Time}" TextColor="Black" FontSize="14" />
<!-- Format for time.. , StringFormat='{0:HH:mm}' -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
<Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
<Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
</StackLayout>
</StackLayout>
Thanks in advance!

Hi try putting the stacklayout that contains your input and send button inside the scrollview, that way when you tap on the input it pushes the keyboard up shows you your input and the rest of your chat works fine on both iOS and Android. Try this:
<ContentPage.Content>
<StackLayout Padding="0">
<ScrollView>
<StackLayout>
<ListView HasUnevenRows="true" x:Name="lvChat" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">
<Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14" />
<Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
<Label Text="{Binding Time}" TextColor="Black" FontSize="14" />
<!-- Format for time.. , StringFormat='{0:HH:mm}' -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
<Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
<Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>

Try setting windowSoftInputMode in your Android Manifest for example:
<application ... >
<activity
android:windowSoftInputMode="adjustResize" ... >
...
</activity>
...
</application>

Categories

Resources