Xamarin Forms Editor Control – How to Change the Height Dynamically ?

Xamarin Forms Editor Control – How to Change the Height Dynamically ?

Editor

When I was trying to create a UI with a multi-line editor control in Xamarin Forms, I got an issue that It does not extend its height when I was adding multiple lines like in Android message app, Whatsapp etc..

His is my first XAML code which I tried before solve the issue.

Project Structure

Image 1 : Project Structure

Screenshot_20180224-214652

Image 2 : With Default Editor control

In this UI, you can see that is does not extend its height when enter multiple lines.

Here is the code before customizing the editor.

first code

Then I looked for a solution for how to do it..

Solution

The solution is Override Editor Controller. Inside the custom render, we have to call InvalidateMeasure() method inside the TextChanged event to invalidate the layout of this Xamarin.Forms.VisualElement.

invalidate mesasure

Image 3 : InvalidateMeasure method definition

Thanks @JulianPasquefor the solution.

How to add the custom render for the Editor in the app.

First I’ll create a class EditorXF inside the CustomRenderer folder. and inherit Xamarin.Forms.Editor class to the EditorXF.

Then create a constructor for  EditorXF and create an event for TextChanged and call InvalidateMeasure() inside the event.

dynamicEditor render

Image 4 : Editor Custom Render

Then what we have to do is, call the customized render in the XAML code of the View.

First we have to add the namespace of the EditorXF render in the XAML Vew.

renderer xaml

Image 5 : Add XML namespace  of the Custom Render

Then Change the replace the Editor control by EditorXF render control using local:EditorXF tag.

XFEditor

Image 6 : Call Customized Editor in Vew

Then run the app and we will be able to add multiple lines and extend the height of the editor control dynamically.

Screenshot_20180224-233221

Image 7 : Extended Editor

You can Have the full solution here @GitHub ..

https://github.com/kgbuddhima/DynamicEditorXF

Enjoy !!!!   

References

https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/editor/

https://forums.xamarin.com/discussion/36068/example-custom-renderer-for-editor-widget

https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms.Droid/Controls/ExtendedEditor/ExtendedEditorRenderer.cs

https://forums.xamarin.com/discussion/99124/how-to-show-multiple-lines-in-an-editor

Xamarin Forms : ListView Height Change Dynamically, using MVVM and also, Solve Empty Space issue

In my previous article, I have explained how to remove the empty space of a List view in Xamarin forms.

To Read the article, Please click the below link.. 🙂

https://xamarinsharp.com/2017/05/16/listview-height-issue-in-xamarin-forms-how-to-solve-it/

In this article, I’ll describe how to dynamically change the List view height using MVVM bindings.

Context..

As a example I have taken a List of “Friends” and when Click the “Add Friend” button, The List view height will change automatically according to the item count. 

Important…

When using Observable Collection, It automatically update the properties of the control that the Items has bind. So, when there are many items in a list, no need to change the height using MVVM and it automatically change the size. This method is useful when there are few items in a List View such as 1-5 items.

cover

Application structure

Here I have created a View (XAML UI and code behind), Model and a ViewModel.

a app

The Friend Model


public class FriendModel
{
public string Name { get; set; }
public string Email { get; set; }
public int ID { get; set; }
}

 

The ViewModel, “MainPageViewModel ” 

Here you can see a command “ChangeListViewSizeCommand” in the view Model and ChangeListViewSize() method has bind to the command.

I have bind it to The “Add New Friend” button in the MainPage view.  When user click the button, it will add a new record to the Friend collection wich is a Observable Collection and then, calculates the height according to the number of items in the collection and Set the value to the “Height” property.

In the setter of the “Height” property, I have called the OnPropertyChanged event. Then the changes of the values will apply to the UI automatically.

Don’t forget to add below namespaces to the View Model.

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;


public class MainPageViewModel : INotifyPropertyChanged
{

public MainPageViewModel()
{
ChangeListViewSizeCommand = new Command(ChangeListViewSize);
}

int count;
int height;
ObservableCollection<FriendModel> friends;

public int Height
{
get
{
return height;
}
set
{
height = value;
OnPropertyChanged();
}
}

public ObservableCollection<FriendModel> Friends
{
get
{
return friends;
}
set
{
friends = value;
Height = (friends.Count * 40) + (friends.Count * 10);
OnPropertyChanged();
}
}

public ICommand ChangeListViewSizeCommand { get; }

void ChangeListViewSize()
{
count = friends.Count + 1;
friends.Add(new FriendModel() { ID = count, Name = string.Format("Friend {0}", count), Email = string.Format("friend{0}@sample.com", count) });
Height = (friends.Count * 40) + (friends.Count * 10);
}

public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

The MainPage View XAML code

Here you can see HeightRequest property has bond by Height property of the View model. And the Height of the list view will adjust according to the value of the Height property in the view model.

2 height binding

And to the “Add New Friend” button…

I have Bond the command (“ChangeListViewSizeCommand“).

4 command


<?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:ListViewApp"              x:Class="ListViewApp.MainPage">

    <ScrollView>
        <StackLayout>
            <BoxView HeightRequest="10" HorizontalOptions="FillAndExpand"/>
            <Image Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" 		        	 HeightRequest="100" WidthRequest="100" Source = "User.png">
            </Image>
            <Label Text="  Friends " HorizontalOptions="FillAndExpand" BackgroundColor="#C7FCE1" FontSize="Large"/>
            <ListView x:Name="listViewFriends" ItemsSource="{Binding Friends}"  HasUnevenRows="true" SeparatorVisibility="Default"                        VerticalOptions="Fill" MinimumHeightRequest="50" HeightRequest="{Binding Height}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="20"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"                                        WidthRequest="40" HeightRequest="40" Source = "Friend.png">
                                    </Image>
                                    <Label Grid.Row="0" Grid.Column="2" Text="{Binding Name}" FontSize="Medium" TextColor="#065C2B"/>
                                    <Label Grid.Row="1" Grid.Column="2" Text="{Binding Email}" FontSize="Small" TextColor="#6FCF97"/>
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Button Text="Add New Friend" Command="{Binding ChangeListViewSizeCommand}" TextColor="White" BackgroundColor="#01148E" FontAttributes="Bold" HorizontalOptions="FillAndExpand"/>
            <Button Text="Delete Friend" TextColor="White" BackgroundColor="#B61515" FontAttributes="Bold" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

 

Code behind of the View “MainPage “

Here I have bond two friends to the Friends Collection as default values in the GetFriends() method.

In the MainPage constructor, I have bond the MainPageViewModel to the BindingContext of the MainPage and The Friends collection has assigned to the Friends property  of the view model.

3 data binding


using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ListViewApp
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
MainPageViewModel vm = new MainPageViewModel();
public MainPage()
{
InitializeComponent();
vm.Friends = GetFriends();
BindingContext = vm;
}

/// <summary>
/// Get Messages to Message List
/// </summary>
/// <returns></returns>
private ObservableCollection<FriendModel> GetFriends()
{
ObservableCollection<FriendModel> collection = new ObservableCollection<FriendModel>();
try
{
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
}
catch (Exception)
{
throw;
}
return collection;
}
}

🙂 Then Try it !

Thanks !

ListView Height Issue in Xamarin Forms – How to Solve it ?

Objective

When I was trying to add few items(1-2) to a List View in Xamarin forms inside of a Stack Layout, Its height does not automatically set according to the number of rows and there will be a empty space.

cover2

So I tried different things to solve the issue and finally I found a solution.

Solution

The solution is we have to set the Height of the list view according to the height of number of rows manually in code behind.

And also we can solve it using MVVM dynamically. Please click here to go to the article…

Here are steps to Solve the issue..

  1. Create a new Xamarin forms project with a PCL.
  2. Add a List View in a Stack layout i the MainPage.(But you can do this in your view page)

3 list view unregular code


&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              xmlns:local="clr-namespace:ListViewApp"              x:Class="ListViewApp.MainPage"&gt;

    &lt;ScrollView&gt;
        &lt;StackLayout&gt;
            &lt;BoxView HeightRequest="10" HorizontalOptions="FillAndExpand"/&gt;
            &lt;Image Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" 		        	 HeightRequest="100" WidthRequest="100" Source = "User.png"&gt;
            &lt;/Image&gt;
            &lt;Label Text="  Friends " HorizontalOptions="FillAndExpand" BackgroundColor="#C7FCE1" FontSize="Large"/&gt;
            &lt;ListView x:Name="listViewFriends"  HasUnevenRows="true" SeparatorVisibility="Default" VerticalOptions="Fill"&gt;
                &lt;ListView.ItemTemplate&gt;
                    &lt;DataTemplate&gt;
                        &lt;ViewCell&gt;
                            &lt;ViewCell.View&gt;
                                &lt;Grid&gt;
                                    &lt;Grid.RowDefinitions&gt;
                                        &lt;RowDefinition Height="Auto"/&gt;
                                        &lt;RowDefinition Height="Auto"/&gt;
                                    &lt;/Grid.RowDefinitions&gt;
                                    &lt;Grid.ColumnDefinitions&gt;
                                        &lt;ColumnDefinition Width="20"/&gt;
                                        &lt;ColumnDefinition Width="Auto"/&gt;
                                        &lt;ColumnDefinition Width="*"/&gt;
                                        &lt;ColumnDefinition Width="20"/&gt;
                                    &lt;/Grid.ColumnDefinitions&gt;
                                    &lt;Image Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"                                        WidthRequest="40" HeightRequest="40" Source = "Friend.png"&gt;
                                    &lt;/Image&gt;
                                    &lt;Label Grid.Row="0" Grid.Column="2" Text="{Binding Name}" FontSize="Medium" TextColor="#065C2B"/&gt;
                                    &lt;Label Grid.Row="1" Grid.Column="2" Text="{Binding Email}" FontSize="Small" TextColor="#6FCF97"/&gt;
                                &lt;/Grid&gt;
                            &lt;/ViewCell.View&gt;
                        &lt;/ViewCell&gt;
                    &lt;/DataTemplate&gt;
                &lt;/ListView.ItemTemplate&gt;
            &lt;/ListView&gt;
            &lt;Button Text="Add New Friend" TextColor="White" BackgroundColor="#01148E" FontAttributes="Bold" HorizontalOptions="FillAndExpand"/&gt;
            &lt;Button Text="Delete Friend" TextColor="White" BackgroundColor="#B61515" FontAttributes="Bold" HorizontalOptions="FillAndExpand"/&gt;
        &lt;/StackLayout&gt;
    &lt;/ScrollView&gt;
&lt;/ContentPage&gt;

3.Then Bind data to the List View in the code behind.

(You can Bind data using MVVM. But Here I’ll bind a collection in a simple way).

Here I have created a Model called “Friend” to create the collection of Friends.


using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ListViewApp
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
listViewFriends.ItemsSource = GetFriends();
}

/// &lt;summary&gt;
/// Get Messages to Message List
/// &lt;/summary&gt;
/// &lt;returns&gt;&lt;/returns&gt;
private ObservableCollection&lt;FriendModel&gt; GetFriends()
{
ObservableCollection&lt;FriendModel&gt; collection = new ObservableCollection&lt;FriendModel&gt;();
try
{
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
listViewFriends.HeightRequest = (40 * collection.Count)+(10* collection.Count);
}
catch (Exception)
{
throw;
}
return collection;
}
}

public class FriendModel
{
public string Name { get; set; }
public string Email { get; set; }
public int ID { get; set; }
}
}

 

4. Then Run the code and you can see a list view with a empty area..

Screenshot_20170516-230919

5. So we have to reduce the Height of the List view.

Lets see the XAML structure of the list view. The List view contains a grid view as the template. And the grid view has 2 rows. It consists of a image with has the row-span=2. That means  normally the height of one item of the List view is equal to the height of the image.

So then I’ll set the

Height(HeightRequest property of ListView) = Number of items * Height of one Item

I have added the code inside of the GetFriends() Method.

4 add a height


private ObservableCollection&lt;FriendModel&gt; GetFriends()
{
ObservableCollection&lt;FriendModel&gt; collection = new ObservableCollection&lt;FriendModel&gt;();
try
{
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
listViewFriends.HeightRequest = (40 * collection.Count);
}
catch (Exception)
{
throw;
}
return collection;
}

6. Then Run the app again.. And you may see the allocated size is now enough for the list view.

Screenshot_20170516-232247

7. So What Should we do ?

According to that a Item(row) in a List view acquire extra space other than the height of the controls inside it. Normally it may be 10px.

So we have to add it  to the height of the ListView.

HeightRequest = (No.of items * Height of one Item) +(Default space + No.of items)

5 add a height plus padding


/// &lt;summary&gt;
/// Get Messages to Message List
/// &lt;/summary&gt;
/// &lt;returns&gt;&lt;/returns&gt;
private ObservableCollection&lt;FriendModel&gt; GetFriends()
{
ObservableCollection&lt;FriendModel&gt; collection = new ObservableCollection&lt;FriendModel&gt;();
try
{
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
collection.Add(new FriendModel() { ID = 1, Name = "Friend 1", Email = "friend1@sample.com" });
listViewFriends.HeightRequest = (40 * collection.Count)+(10* collection.Count);
}
catch (Exception)
{
throw;
}
return collection;
}

8. Then Run the code and It will be provide the expected result.

Screenshot_20170516-232610

Thanks !

Xamarin Lesson 2 : Create a Cross-Platform Mobile Project in Visual Studio 2017

Video

This video demonstrates, How to create cross-platform mobile app Including Android/iOS/Windows Phone Native apps and a Portable Class Library(PCL) in Visual Studio 2017

Thanks !

Xamarin Lesson 1 – Install Xamarin with VS 2017

Video

This Video show you how to download and install Visual Studio for the development of Cross-platform mobile apps.

Please Follow the video.. To Download and Install Visual Studio 2017…