Friday 19 July 2019

Collection View(Xamarin Forms 4.0 Pre)

Xamarin Forms 4.0 (Collection View)
In this article, I will be explaining a new feature of Xamarin.Forms 4.0 - a new control called Collection View. This is an awesome control that can be used with different types of views, like horizontal list view, listing with 2 span and others.
Collection View is an example of listview for listing items. It improves inventory design and reduces complexity. Collection View control is very flexible.



Implementation

First, we have to create a project with the name CollectionViewApp.
Open VS2017 >> select file >> Create Project >> give the name to the project "CollectionViewApp". Then, set the path and press Enter.



Now we check the xamarin forms version is updated or not if the package does not update so we are updating package, these are the step for update package. 
Firstly we select the solution and right click o the solution and then select the Nuget package like showing in this below screen.



Now here appear a new window this page contains the information whose package is used in this project. Now you can select update tab, In this list is shown all the older version packages, so you can search package name xamarin forms and then you select package then checks all the project(Core, Android, and ios) update your package.





Now if you want to use the collection view in our project so you will make sure to initialize the in (xamarin android) MainActivity.cs and (xamarin ios) AppDelegate.cs project.                      
                              Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

if you want to update an existing project to the Xamarin.Forms 4.0- NuGet (available via your favorite NuGet package manager).
A Basic Layout

In Xamarin Forms 4.0 review, One of the biggest changes between ListView and CollectionView is the removal of wrapping content in a ViewCell. This allows for significant gains to performance.

Below is an example layout. In this Example, we create a List of Store Items names in your binding context and then bind to it in XAML:

Now Coding time:

<Collectionview backgroundcolor="#F9F9F9"
     Emptyview="No items match your filter."
     Horizontaloptions="Center" Itemssource="{Binding Stores}" 
     Margin="10" Verticaloptions="Center">  
 <Collectionview .itemslayout="">  
 <Griditemslayout orientation="Vertical" span="2">  
         </Griditemslayout></collectionview>  
         <Collectionview.Itemtemplate>  
             <Datatemplate>  
                 <Stacklayout Padding="10">  
                     <Frame Bordercolor="LightGray" cornerradius="15" 
                               Hasshadow="True" Padding="5"></frame>  
                         <Grid Columnspacing="0" 
                                  Margin="2" padding="5" 
                                  Rowspacing="0">  
                            <Grid.RowDefinitions>  
                               <Rowdefinition Height="Auto">  
                               <Rowdefinition Height="130">  
                               <Rowdefinition Height="Auto">  
                               <Rowdefinition Height="Auto">  
                            </Grid.RowDefinition> 
                            <Image Aspect="AspectFit" Grid.Row="0" 
                                Horizontaloptions="End" 
                                Source="{StaticResource favorite}"> 
                                <Behaviors:viewtappedbuttonbehavior 
                                    Animationtype="Scale" Command="{Binding OnLoginCommand}">  
                                   </Behaviors:viewtappedbuttonbehavior></image>  
                                </Image>  
                            <Image Aspect="Fill" grid.row="1" 
                                Source="{Binding ImageUrl}">  
                            <Label Grid.row="2" 
                                Horizontaltextalignment="Center" 
                                Text="{Binding Title}" 
                                Textcolor="#14B7F8" 
                                Verticaloptions="CenterAndExpand"/>  
                            <Label Fontattributes="Bold" 
                                Grid.row="3" horizontaltextalignment="Center" 
                                Text="{Binding Price, StringFormat='${0:N}'}}" 
                                Verticaloptions="CenterAndExpand"/>  
                             </grid>  
                            </Stacklayout>  
                        </Datatemplate>  
                    </Collectionview>  
                </Collectionview>



and here is C# code adding the list items and show the list,

 public List storelist;  
 public StorePage()  
 {  
 InitializeComponent();  
 BindingContext = new MonkeysViewModel();  
 storelist = new List();  
 storelist.Add(new Store() { Id = 1,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 21.00, Title = "Title" });  
 storelist.Add(new Store() { Id = 2, 
 ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 88.12, Title = "Title" });  
 storelist.Add(new Store() { Id = 3, 
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 65.21, Title = "Title" });  
 storelist.Add(new Store() { Id = 4, 
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 39.95, Title = "Title" });  
 storelist.Add(new Store() { Id = 5, 
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 958.99, Title = "Title" });  
 storelist.Add(new Store() { Id = 6, 
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 64.85, Title = "Title" });  
 storelist.Add(new Store() { Id = 7, 
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 2050.55, Title = "Title" });  
 storelist.Add(new Store() { Id = 8, 
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", 
IsLike = true, Price = 120500.00, Title = "Title" });  
            CV.ItemsSource = storelist;  
        }  
 

and this is model code for add and set the property,


public class Store
{
    public int Id { get; set; }
    public bool IsLike { get; set; }
    public string ImageUrl { get; set; }
    public string Title { get; set; }
    public double Price { get; set; }
    public string Favorite { get; set; } = "favorite.png";
}


Now you have a simple list, this new CollectionView it is almost like the ListView you’ve used in the older xamarin forms. Let’s look now at what else it can we do.

It’s so Empty in Here
 Lastly, a common scenario many developers may face is what to display when the ItemsSource is empty. With the CollectionView you can now set any content to the EmptyView of your list for just this purpose. With the XAML below, the string “No items currently exist!” will be shown inside of the CollectionView when the list of people is empty,


 
 <CollectionView.EmptyView> 
                        <Label Text="No items match your filter."/>  
 </CollectionView.EmptyView>
 


OR use direct in




   <CollectionView  ItemsSource="{Binding Stores}"  
                                 VerticalOptions="Center"   
                                 HorizontalOptions="Center"   
                                 BackgroundColor="#F9F9F9"  
                                 EmptyView="No items match your filter."  
                                 Margin="10"> 


              You can customize this view you want to like, including interactive content and supporting bindings.
 and happy xamarin Coding.....


Wednesday 13 February 2019

Setup Flutter in Windows

Setup Flutter in Windows
Hello, Guys, this is sumit and today I come back with flutter.
So this time I explaining to flutter and how to set up the SDK in our window system so let's play flutter.

                    So simple way I would say the flutter is a new cross-platform framework in which we can implement material Design in Android and Ios app with flutter. this is also google product so don't worry about the future with flutter. we can very fast development with flutter b’coz its provide material design and also provide hot reload it helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. and also it provides native performance. Before setup flutter, you can verify your system configuration.

Operating Systems: Windows 7 SP1 or later (64-bit)
x

Tool:
Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
Git for Windows 2.x, with the Use Git from the Windows Command Prompt option. 

So we now Get the Flutter SDK
First, you can download the latest stable release of the Flutter SDK:
Now you can Extract the zip file and place the contained flutter in the desired installation location C:\src\flutter.

Before using flutter command you can configure the path.

Update your path
Take these steps to add PATH in the window environment. So Go to start window button and search env or environment and select Edit environment variables for your account. 



Now click on environment variables and then showing the new window. 

Here we can see the path variable so we can double tap or select path then click on edit. 
Now again window is open in front of you, so in this window, you can add “flutter\bin” or “C:\src\flutter\flutter\bin” then click okay. 




Here you half part is completed,
Now you can open command console so go to start button and search cmd then click okay now we can go to our flutter path then type flutter doctor.



This command checks your windows environment and displays a report of the status of your Flutter installation.



if it gives an error like this type
Android SDK is missing command line tools; download from https://goo.gl/XxQghQ

 You can download android studio 3.1 or later Or VS Code latest Version and install in your machine.

 Now you can add flutter plugin in the android studio Or VS Code.
In Android:
Go to file select setting here open a new window then select the plugin and the right side you can search flutter and install after installation click okay.

And if you are using VS code so you can go to plugin and search flutter then install.


after all, is done you can again open the command console and run the flutter command.

and this time it takes all permission and you can press y.

Setup is complete now you can connect your device and play with flutter.

Featured Post

Sliding Entry In Xamarin.Forms

  Today, I am going to show you how to create a Custom Slide entry in Xamarin.Forms with animation and also using gradient color. here is Y...