Author Archives: Arun Kumar

About Arun Kumar

Arun kumar Surya Prakash, is a  Developer  Consultant. He  is a Microsoft Certified Solution  Developer  for Store App Development, and a Azure Solution Developer. His core skills is on developing Windows Store App and Cross Platform App development. You can follow him @arunnov04

Customizing the InkToolbar in Universal Windows App

Windows Anniversary update has brought a lot of new changes to the developers one among them is Ink Canvas. This is a very good and quite easy control which allows the user to draw the inking in the apps. In our previous post we have seen how to create the InkCanvas and also we have seen how to add the InkToolbar. Now we will see how to customize the InkToolbar.

inktitle

First lets try to remove the default white background provided by the InkToolbar. We will set the application background color as the InkToolbar’s Background so that the toolbar will sync with the app. In order to do this, we need to set the following styles in the App.xaml.


<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.ThemeDictionaries>

<ResourceDictionary x:Key="Default">

<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="LightGray"/>

<SolidColorBrush x:Key="InkToolbarButtonBackgroundThemeBrush" Color="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

<SolidColorBrush x:Key="InkToolbarButtonSelectedBackgroundThemeBrush" Color="{Binding SystemBaseLowColor}"/>

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

</ResourceDictionary>

</Application.Resources>

Now Let’s customize the controls provided by the InkToolbar. We have a property called InitialControls which specified what all the controls that need to be added to the ink toolbar.

In this sample I tried removing all the pens provided by default by the ink toolbar. To achieve that we need to set the InitialControls=”AllExceptPens”.

InitialControls takes four values which specifies what controls need to be added.

ink5

Once the pens are removed from the InkToolbar the toolbar looks like the below.

ink2

Now we will try to add only one control to the toolbar like Pencil control. To achieve this, we need to add the InkToolbarPencilButton to the InkToolbar.


<InkToolbar TargetInkCanvas="{x:Bind inkcanvas}" VerticalAlignment="Top" InitialControls="AllExceptPens">
<InkToolbarPencilButton/>
</InkToolbar>

Thats it now only the pencil inking option is provided by the ink toolbar. The below screen shows how does the toolbar looks.

ink3

Finally Let’s see how to change the default color provided by the pencil button in the InkToolbar.

Create a style with the target type as InkToolbarPencilButton and set the required SelectedBrushIndex and SelectedStrokeWidth. Now this will be the default color and stroke width for the pencil ink.


<Style TargetType="InkToolbarPencilButton">

<Setter Property="SelectedBrushIndex" Value="7"/>

<Setter Property="SelectedStrokeWidth" Value="14"/>

</Style>

Thats it. we have now customized the default tools provided by the InkToolbar.

ink4

Hope this post might have helped in understanding how to customizing the InkToolbar.

Xamarin Android RecyclerView with GridLayoutManager.

RecyclerView is a new widget that has been introduced in the material design with Android 5.0 Lollipop. This widget is available for the previous versions of Android using the support libraries. RecyclerView is almost equal to the ListView but it differs in the layout that is used to display the data and also forcefully using the ViewHolder for recycling the view and increases the app performance.

There are three types of LayoutManager supported by the RecyclerView, they are

  1. LinearLayoutManager shows items in a vertical or horizontal scrolling list.
  2. GridLayoutManager shows items in a grid.
  3. StaggeredGridLayoutManager shows items in a staggered grid.

RecyclerView

In this post we will see how to create a simple RecyclerView using GridLayoutManager as the LayoutManager.

Lets create a RecyclerView in the main.axml page as shown below and provide the id as recyclerView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:scrollbars="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>

Now create a new layout which will get displayed in the RecyclerView as a list of items.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">
 <LinearLayout
 android:background="#22F51F8B"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="8dp">
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textAppearance="?android:attr/textAppearanceMedium"
 android:textColor="#ffffff"
 android:text="Caption"
 android:background="#22F51F8B"
 android:id="@+id/textView"
 android:textSize="40dp"
 android:layout_gravity="center_horizontal"
 android:layout_marginLeft="4dp" />
 </LinearLayout>
</FrameLayout>

Now create a ViewHolder for the RecyclerView which uses the specified view holder and recycles the view from the memory instead of creating new ones each time. This helps in improving the performance of the app.


 public class RecyclerHolder : RecyclerView.ViewHolder
 {
 public TextView Caption { get; private set; }
 public RecyclerHolder(View itemView) : base(itemView)
 {
 Caption = (TextView)itemView.FindViewById(Resource.Id.textView);
 }
 }

Now create a Adapter for the RecyclerView, as this adapter populates the data to the RecyclerView.


 public class RecyclerAdapter : RecyclerView.Adapter
 {
string[] items;

public RecyclerAdapter(string[] data)
 {
 items = data;
 }
 public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
 {
 View itemView = LayoutInflater.From(parent.Context).
 Inflate(Resource.Layout.layout, parent, false);

 RecyclerHolder vh = new RecyclerHolder(itemView);
 return vh;
 }

public override void OnBindViewHolder(RecyclerView.ViewHolder viewHolder, int position)
 {
 var item = items[position];

var holder = viewHolder as RecyclerHolder;
 holder.Caption.Text = items[position];
 }

public override int ItemCount
 {
 get
 {
 return items.Length;
 }
 }
 }

In MainActivity under OnCreate method set the adapter for the RecyclerView. As this adapter populates the data in the User Interface and also set the type of  LayoutManager used for this RecyclerView, we use GridLayoutManager as the LayoutManager. This LayoutManager displays data as per the columns specified in the GridLayoutManager. Even the orientation of the control can be changed in to horizontal.


protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);

// Get our button from the layout resource,
// and attach an event to it
RecyclerView recyclerView = FindViewById<RecyclerView>(Resource.Id.recyclerView);

var gridLayoutManager = new GridLayoutManager(this, 3);

recyclerView.SetLayoutManager(gridLayoutManager);

recyclerView.HasFixedSize = true;

recyclerView.SetAdapter(new RecyclerAdapter(new string[] { "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips", "Daily", " .Net ", " Tips" }));

}

Now the RecyclerView is created with the GridLayoutManager.
Hope this post might have helped in understanding the GridLayoutManager for RecyclerView.

Understanding the Navigation Pattern for iOS Mobile App Development

Navigation patterns are more important to an application which defines the way the application will works and also how does it provides the information to the user. Every application that’s been created till now should have navigation in them. Understanding the types of navigation helps the developer to choose the right one for their app and also provide the information in a very presentable manner in the application.

Continue reading

Accessing platform specific code using IOC in MVVM Cross

Sometimes we need to write code specific to platform which cannot be written in View Model and needs to be accessed by the View Model. For example, you want to display a message using MessageDialog but its not possible to write the code in the View Model. In this case we can create an interface in the View Model and implement the platform specific code in the Windows 10 project.

Lets see how to do this in detail.

Continue reading

Applying Styles for Xamarin Forms control in Android from XML File.

Styles are one of the most important things that makes the apps more beautiful. Xamarin Forms support styles in build, but when the user needs to apply different styles to different platform then he can either apply them using platform specific code in common styles or by using the renderer for each platform and applying styles separately. In This post we will see how to style an Android button using Renderer which applies native android XML styles.

Continue reading

Creating Custom Controls in Xamarin.Forms on IOS.

In our previous post we have seen how to create a custom control like RadioButton in Xamarin forms on Android. In this post we will see how to create the Radio button for iOS. By default iOS don’t support RadioButton, so what can we do is to create a simple UIButton and set an image to it on Selected and Normal state. Lets see how to do this in detail.

Continue reading

Creating Custom Controls in Xamarin.Forms on Android.

Xamarin.Forms library contains lots of build in controls but not all the time we end up using build in controls. Some time we need to create our own custom controls. For Eg. Radio button is a common control in android but it is not available in Xamarin Forms. If the developer wants to use this control then he has to create a custom control and write a renderer to use the control in Xamarin Android.
Continue reading

Customizing Controls for different platforms (Android, iOS, and Windows Phone) using Renderer for Xamarin Forms

Xamarin Forms is a cross-platform UI toolkit that allows developers to easily create native user interface that can be shared across Android, iOS, and Windows Phone. The developer can write once and run the app in three different platforms.  Xaml and C# are  used for the development. Xamarin provides most of the basic controls for all the three platforms that are needed for an app development. In this post we will see how to customize a control using CustomRenderer.
Continue reading

Improving App’s performance using compile time binding in Universal Windows App.

Windows 10 Universal Apps has come up with a new binding approach called compile time binding (x:Bind) where the property gets bind to the UIElement during compile time. In previous versions of windows Apps, the binding occurs during the runtime and its completely based on the reflections. This caused the reduction in apps performance.

bind0

lets see in detail about the compile time binding.

Create a simple page with just a TextBlock binding to a property called Title (which don’t exist).

<TextBlock Text="{x:Bind Title}" />

and now try to compile the app and the app displays a compile time error as shown below.

Bind1

 

But if the same property is used with Binding, the build gets successes and the during run time the app tries to find the property which is binded and try to get the value which leads to reduce apps performance.

By default the mode of x:Bind is OneTime, so the developer has to specify the mode of the property to Either OneWay or TwoWay based on the requirement. But in Binding the default mode is OneWay. Not all the Bindings in the App can be replaced with the x:Bind, there are some limitations with this.

The are two other scenarios that are good to take a note, when the x:Bind is used in a DataTemplate then the developer should specify the data type for the DataTemplate with x:DataType in the in order to make the App compile successfully, if not a compile time error is displayed.

bind2

One more thing  to be noted, if the x:Bind is used in the ResourceDictionary then the developer has to specify the Class file for the ResourceDictionary. Normally a ResourceDictionary doesn’t have a code behind file associated with it and also it doesn’t have a class name. In order for x:Bind expressions to be compiled, the ResourceDictionary must be given a class name and have a corresponding code behind file.

Hope this might Help.

How to create a Calendar View in Universal Windows App.

CalendarView is a new control that has been introduced in the Universal Windows Apps. This View provides a visual calendar display that the user can use to select a date. This view can be customized by the developers by setting the max and min days to be displayed and black out the days that are not to be rendered.  The calendar view  lets the developers to change the language to be displayed. Let see how to create a simple CalendarView in detail.

calender8

Add a CalendarView to the xaml Page as shown below.


<CalendarView SelectionMode="Single" CalendarViewDayItemChanging="CalendarView_CalendarViewDayItemChanging" IsGroupLabelVisible="True" HorizontalAlignment="Center" VerticalAlignment="Center" IsOutOfScopeEnabled="True" Language="en-US" CalendarIdentifier="GregorianCalendar"/>

The Language property is use to display the calendar in the specified language, set it to en-US and also the CalendarIdentifier property is used to set the type of calendar that to be displayed. the possible CalendarIdentifier are given below.

calender1

The IsTodayHighlighted property is used to highlight today in the calendar view. SelectionMode property is used to set the the single or multiple selection mode or even set the selection mode to nothing.

The FlowDirection property is used to set the direction in which the days are shown. If it is set to RightToLeft then the days are shown form right to left and if it set to LeftToRight then the days are shown form left to right.

calender6

The MaxDate and MinDate properties are used to set the max and min days to be displayed in the CalendarView. If some of the days in a weeks has to be black out then the on CalendarViewDayItemChanging Event check the date and set the IsBlackout to true to set the  date as black out.

calender4calender5


private void CalendarView_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
{

if (args.Item.Date.DayOfWeek == DayOfWeek.Saturday ||
args.Item.Date.DayOfWeek == DayOfWeek.Sunday)
{
args.Item.IsBlackout = true;
}
}

calender8

And there are so many other properties which makes the control more rich and better.

Hope this post might have helped.

Understanding SplitView and its features in Universal Windows App.

SplitView is a new control that has been introduced in the Windows 10 Universal Apps. Where it helps the user to have a better user experience. As the name suggest that the Split View is of splitting the user interface in to two parts and displaying the navigational and other display related information in a separate panel and bringing up in the user interface when needed. Lets See how to create the split view in and what are its properties.

splitview

The Split View has a property called Pane which takes the content to be shown inside the split pane and which gets displayed when needed.

The IsPaneOpen Property is used to set the Pane either to open and to close it. Setting True to this property displays the pane and False collapse the pane.

The OpenPaneLength property defines the space occupied by the pane when it is opened.

The DisplayMode property is used to set how the Split pane and content area to be displayed. The possible values that can be applied to the DisplayMode are

Overlay  – The pane overlays the content area when opened and closes when the user clicks anywhere in the content area and takes no user space when closed.


<SplitView x:Name="splitView" DisplayMode="Overlay" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" >

...

</SplitView>

Inline – The Pane and the content area share the user space side by side and this remains in the screen always even when the user clicks anywhere in the  content area.


<SplitView x:Name="splitView" DisplayMode="Inline" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" >

...

</SplitView>

CompactOverlay – This pane overlays on the content area when opened and get dismissed when the user clicks on the content area. The CompactPaneLength property defines how much area the Pane occupies when the IsPaneOpen is set to false.


<SplitView x:Name="splitView" DisplayMode="CompactOverlay" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" CompactPaneLength="48">

...

</SplitView>

CompactInline – The pane and the content area share the user space side by side and this remains in the screen always even when the user clicks anywhere in the  content area when the  IsPaneOpen is set to true and when the IsPaneOpen is set to false then the Pane occupies the length specified by the CompactPaneLength.


<SplitView x:Name="splitView" DisplayMode="CompactInline" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" CompactPaneLength="48">

...

</SplitView>

splitview

Hope this might have helped.