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 !

Fix Error : “Could not find a part of the path” While Publishing ASP.NET Core MVC Application To the Target Platform of Windows 7 x64/x86

Reason :

I’m working on a ASP.Net Core MVC application and I Published one of my ASP.Net Core MVC app into a Server which is running Windows Server 2008 R2.

But when I released the application live, it didn’t work on the server but it works fine on my local machine. My Local machine has Windows 10.

Then I looked for a solution and I got the reason. The reason Is I have published the app for the target platform of Windows 10. But the Server that the site has hosted has Windows Server 2008 R2 (Windows 7 Configurations)

Then what I had to do I was : Publish the app for the target platform of windows 7 (Windows Server 2008 R2).

Then I added target platforms to to the project.json file in my .Net Core MVC app. I published it again.

But I wasn’t published and it gave me an error..

Could not find a part of the path ‘F:\Projects\TestWebCore\src\TestWebCore\bin\Release\netcoreapp1.0\win7-x64\TestWebCore.dll’.

Then I looked for a solution and I found it is an error in tooling.

http://stackoverflow.com/questions/39023224/error-could-not-find-a-part-of-the-path-while-publishing-net-core-application

Solution :

The Solution is we have to publish the .Net Core applicaion using command prompt. 

I did it and my app was published successfully.

 

Here I’ll show you how the error occurred and How I did fix it.

First I’ll create a sample .Net Core MVC app with a .Net Core Portable Class Library(PCL).

You can See by Clicking..

How to Create a ASP.Net Core MVC app

Here is the project I have created..

The solution consists of one ASP.Net Core MVC project and a .Net Core PCL project.

1-project-flow

Image 1 : Solution Structure

Then I have changed the Index.cshtml file and added a simple html content to show you ..

2-change-index-page

Image 2 : Sample HTML content in Index.html file

Lets run the app to see how it looks like.

The app will run with the localhost and you could see the content I have added to the html body. I have used a Bootstrap template to the project. So you can see it is responsive.

3-index-page

Image 3 : Run The app in localhost

So Its running well and and the next step is Publish the app.

Publish The app

Then you try to publish an app for the first time, you will see a window like below..

5-publish-without-target-framework

Image 4 : Default Publish Window

Here you can see only one menu which is “Profile”. You can’t publish the app without selecting a profile. So we have to create a publish profile.

for that click on “Custom” button and you will see a dialague box to enter the publish profile name.

6-create-a-publish-profile

Image 5 : Create a Publish Profile

I’ll create it as “MyPublishProfile”. And click “OK”. Then the profile will be created and you will see new menus in the left hand side now.

7-selet-profile-menu

Image 6 : New menus will appear when Publish Profile created.

Then go to connection menu and select a folder to publish the web application. And Select the publish method as “File system”.

9-select-a-publish-location

Image 7 : Connection menu(Select Target Publish Folder)

Then go to the settings menu and you can select the target frameworks to publish the app.

8-target-runtme-any-settings

Image 8 : Default Settings Menu.

But according to above image, you can’t see a Target Runtime. 

By default it has set to “Any“. 

So I’m adding some target runtimes to project to show how the error is happening.

We have to add those settings to the project.json file in the web application project.

To see How to add Target Runtimes to project.json  Click Here…

If you have already added target  Runtimes, Now we are ready to publish the app.

So Right Click and Select Publish in the context menu and the publish window will open.

Publish to the Target Runtime of Windows 10

Then Click “Settings” and Select “Win10-x64” from the drop down list.

5-select-target-platform-10

Image 9 : Select Windows 10 as Target Runtime

Then Click Preview menu and verify is the details correct before publish your app.

6-conform-details-before-publish

Image 10 : Verify Publish information before publish the app

Then Click “Publish” and the application will publish to the selected folder. You will see publish details output window.

7-success-win-10

Image 11 : App has publish successfully for the Target Runtime of  Windows 10 x64

Then check the selected publish folder and you will see compiled files has published to the folder.

The “TestWebCore” app has publish to the target runtime of “Windows 10 64bit” successfully.

How The Error Occurred…

Publish to the Target Runtime of Windows 7

This is same as we published the app for Windows 10. But the only difference is we have to change the target runtime to “Win7-x64

11-publishing-to-win-764

Image 12 : Select Windows 7 x64 as Target Runtime

Then Click “Publish”.

When I did it, I got below error.

Could not find a part of the path ‘F:\Projects\TestWebCore\src\TestWebCore\bin\Release\netcoreapp1.0\win7-x64\TestWebCore.dll’.

12-error

Image 13 : Error Publishing app to Windows 7

How to Fix the Error

To publish without an error, what I did is ..

Run the Publish command in Command Prompt.

So Here is the way I did ..

13-publish-command

Image 14 : Run Publish command in Command Line

When you press “Enter” when type the publish command, you will see the application publish successfully.

14-published-to-win7-64

Image 15 : Successfully Published to Windows 7 x64

You can see the published files in the publish folder.

This Error is not happening

References…

To Learn More about Target Runtimes/Frameworks Click…

Publish Commands for .Net Core in Command Line Click…

How to Publish Self Contained Application…

Thanks !

Convert from Multilingual App Toolkit v3.0 to v4.0 and Fix Error “The Multilingual App Toolkit v4.0 is not compatible with previous versions of the toolkit”

Reason

I used Multilingual App Toolkit 3.0 for my Xamarin application in Visual Studio 2013 in Windows 8.1. Then I moved to a new machine with windows 10 and I installed Visual Studio 2015. Then I opened that Xamarin project in VS 2015 and when I was building the project it gave me an error.

mla error 1

Image 1 : Error

Error

The imported project “C:\Program Files (x86)\MSBuild\Microsoft\Multilingual App Toolkit\Microsoft.Multilingual.ResxResources.targets” was not found.

Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.

Mobility_App.Android

F:\ProjectsBuddhima\mobile\Mobility\Mobility App\Mobility_App.csproj

Reason

Then I searched solutions for the error and according to the error, my new machine has not installed Multilingual App Toolkit.

Solution and Next steps

So I installed Multilingual App Toolkit v.4.0 which is compatible with Visual Studio 2015.

You can download from

https://visualstudiogallery.msdn.microsoft.com/6dab9154-a7e1-46e4-bbfa-18b5e81df520

mla error 2

Image 2 : Download Multilingual App Toolkit v4.0

Then the installer will download to your machine and you have to install it manually.

After I installed Multilingual App toolkit 4.0 I built the project again and I got another error.

Multilingual App Toolkit v4.0 upgrade blocked

The Multilingual App Toolkit v4.0 is not compatible with previous versions of the toolkit

mla error 7

Image 3 : Multilingual app Toolkit is blocked

According to above error message, I browsed the link in the http://aka.ms/mat4faq

According to their technical references I will describe steps to convert from v3 to v4.

  1. First take a backup of existing project.
  2. Then we have to open the project which has Multilingual App toolkit v3.
  3. Then we have to disable app toolkit for projects. Go to tools and click “Disable Multilingual App Toolkit”.

    1 disable MLA tool kit

    Image 4 : Disable MLA Toolkit

  4. Then Copy current .xlf files to another location as a backup and delete all .xlf files in the project.

    2 remove xlf files

    Image 5 : Remove current XLF files

  5. Then rebuild the project.

 

Sometimes these steps are not enough to fully disable toe Multilingual App toolkit. So we have to disable it using config file manually.

Here are steps to remove them manually.

1.Right click the config file in the project and open it.
2.Search the label “MultilingualAppToolkit” in the config file.

12 multi languala app label

Image 6 : Delete property group from config file

3.Then delete above <PropertyGroup> which contains <MultilingualAppToolkitVirsion> tag.
4.Then we have to search again “MultilingualAppToolkit” label. And you will see <import> element.

13 delete multi languala import label

Image 7 : Delete <import> tag which contains MLA label

And also we have to delete the <Import> tag which contains “MultilingualAppToolkit”.

 

5.Then rebuild the project.

Now we have removed configurations of Multilingual App Toolkit from our project and we are ready to add v4.0 configurations.

Then we have to enable Multilingual App Toolkit from Toolbox.

1 Enable mltk

Image 8 : Enable MLA Toolkit

When we enable the Multilingual App Toolkit v4.0, we are ready to recycle Transitions from v3.0 project’s .xlf files.

Below I have added steps for that.

1.  Please check that the Multilingual App Toolkit v4.0 is enabled.

2. Then click on the project and select Multilingual App Toolkit=> Add transition languages

3 add multilangual languages

Image 9 : Multilingual App Toolkit ->  Add Transition languages

3. We can see language list in a window like below. Select languages that previously we have added to the project.

4 select languages

Image 10 : Select Languages

When click “OK”. New xlf files will be added to our project in a folder called “MultilingualResources”.  Below image shows it.

5 added xlf files

Image 11 : Added XLF files for selected languages

4. Then click on “MultilingualAppResources” folder and click .. Multilingual App Toolkit=> Import / recycling translations

6 import recycling transactions

Image 12 : Multilingual App Toolkit -> Import/Recycle Transitions

Then you will see below window.

7 import recycling transactions

Image 13 : Import Transition window

5. Click “Add button” and then select v3 xlf files from the location that we have copied from previous project.

8 select old v3 files

Image 14 : Select and Add  XML files in v3 project.

6. Then Select xlf files that we copied from the temporary location and Click “Open”. Then selected xlf files will be added to import resources form.

9 seletec xlf v3 files

Image 15 : Added XLF files

7. And an Important thing is we have to check the “Enable resource recycling” check box. And then click the import button.

10 enable recycling and import

Image 16 : Enable resource recycling and Import

8. Then rebuild the project.

11 success

Image 17 : Successfully Built project

Then we can see those .xlf files has been added to project and the project has built successfully.

Thank you !