27 Dec 2016
Xamarin.Forms is a great way to abstract the local implementation. But, you know, sometimes you need to perform some small adjustments based on the underlying OS. Is this the case of the iOS Status Bar style.
Xamarin.Forms implements, in the NavigationRenderer, a way to automatically set the style (dark/default or light) by checking the Luminosity value of the BarTextColor property. Check the following code:
if (statusBarColorMode == StatusBarTextColorMode.DoNotAdjust || barTextColor.Luminosity <= 0.5)
{
// Use dark text color for status bar
UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.Default;
}
else
{
// Use light text color for status bar
UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.LightContent;
}
For full code, check the NavigationRenderer source on github Xamarin.Forms project.
Now, if in your code you set the BarTextColor to black, then the status bar style will be the Default (dark). Otherwise, the status bar style will be light (white).
So, if we want to set the BarTextColor, in a classic Xamarin.Forms App class constructor, we’ll have something like this:
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage())
{
BarBackgroundColor = Color.FromHex("#043596"),
BarTextColor = Color.White
};
}
But, this is not enough.
In iOS, we have two ways to set the StatusBarStyle:
- at application level
- at view controller level
The default behavior is at view controller level. Since Xamarin.Forms sets the StatusBarStyle at application level, we need to set the related property in the Info.plist. So, open the info.plist file, go in the Source tab and add a new entry with this values:
Name = UIViewControllerBasedStatusBarAppearance
Type – boolean
Value – No
And we have done! Now start the app and check the result:
Nice and simple!
07 Dec 2016
Windows Communication Foundation (WCF), the Microsoft framework for message exchange between systems, has come a long way since when it was called Indigo, about ten years ago.
In the last versions, all the efforts have gone in the direction to optimize and simplify development:
-
Simplified Generated Configuration Files
-
Contract-First Development
-
Add Service Reference From a Portable Subset Project
-
ASP.NET Compatibility Mode Default Changed
-
Streaming Improvements
-
New Transport Default Values
-
XmlDictionaryReaderQuotas
-
WCF Configuration Validation
-
XML Editor Tooltips
-
BasicHttpBinding Improvements
You can find all the details about this topics on the following page: WCF Simplification Features. If you are curious about what’s new in WCF 4.5, check this page.
In the next posts we’ll see some of the improvements and the impact in the everyday development.
06 Dec 2016
This is the third post of the A little and simple Bindable (Horizontal) Scroll View saga. In the first post we saw how to implement a horizontal view with data binding capability. Then, in the second post, we have seen how to add an event to handle the tap gesture on list items.
In this post, we’ll see how to add the Command pattern to the TLScrollView and get working one of the most used way to catch the user UI interaction directly into the ViewModel.
The first step is to add two bindable properties: SelectedCommand and SelectedCommandParameter.
public static readonly BindableProperty SelectedCommandProperty =
BindableProperty.Create("SelectedCommand", typeof(ICommand), typeof(TLScrollView), null);
public ICommand SelectedCommand
{
get { return (ICommand)GetValue(SelectedCommandProperty); }
set { SetValue(SelectedCommandProperty, value); }
}
public static readonly BindableProperty SelectedCommandParameterProperty =
BindableProperty.Create("SelectedCommandParameter", typeof(object), typeof(TLScrollView), null);
public object SelectedCommandParameter
{
get { return GetValue(SelectedCommandParameterProperty); }
set { SetValue(SelectedCommandParameterProperty, value); }
}
The first one will be used to reference the Command object instance, the event handler into the view model, while the second one is the instance parameter that will be passed to the event handler.
After that, we need to modify the TLScrollView Render method to use the new SelectedCommand and SelectedCommandParameter properties, if used:
var command = SelectedCommand ?? new Command((obj) =>
{
var args = new ItemTappedEventArgs(ItemsSource, item);
ItemSelected?.Invoke(this, args);
});
var commandParameter = SelectedCommandParameter ?? item;
var viewCell = ItemTemplate.CreateContent() as ViewCell;
viewCell.View.BindingContext = item;
viewCell.View.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = command,
CommandParameter = commandParameter,
NumberOfTapsRequired = 1
});
Use the Command pattern to get the selected item
To use the Command pattern in our solution, we need to add a property in our viewmodel that will be binded to the UI control:
public ICommand ItemSelected { get; set; }
and then initialize it with an event handler in the viewmodel’s constructor:
public MyViewModel()
{
ItemSelected = new Command(arg => DoSomething());
}
finally we can bind the SelectedCommand property to the ItemSelected property:
<controls:TLScrollView Orientation="Horizontal" ItemsSource="{Binding Items}" SelectedCommand="{Binding ItemSelected}" HeightRequest="100">
Use my ViewModelBase
One step further is to minimize coding by using my ViewModelBase implementation. After extending your custom ViewModel with my ViewModelBase, you can simply write a method with the name ItemSelected and the _ExecuteCommand suffix:
public void ItemSelected_ExecuteCommand(object args)
{
}
After that, you need to add square brackets around the ItemSelected name in your XAML SelectedCommand assignment definition:
SelectedCommand="{Binding [ItemSelected]}"
Nice and really simple. As usual, you can find full code with sample on my github repository.
04 Dec 2016
A long time ago, in the first post, I wrote about the TLScrollView, a way to create a simple, horizontal and bindable list of items in Xamarin.Forms. The final result is something like the horizontal views on Apple App Store app.
After receiving some feedback, users ask for a way to handle the tap gesture on the items. We have two possible approaches: the first one is by using the classic ItemSelected event handlers, and the second one by using the Command pattern, typical solution in MVVM.
In this post we’ll explore the first approach.
So, first of all, we need to add an ItemSelected event, a delegate of type EventHandler to the TLScrollView:
public event EventHandler<ItemTappedEventArgs> ItemSelected;
Now, in the Render method, we can add the following line in the for..each cycle, just after settings the BindingContext of the ViewCell:
viewCell.View.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command((obj) =>
{
var args = new ItemTappedEventArgs(ItemsSource, item);
ItemTapped?.Invoke(this, args);
}),
NumberOfTapsRequired = 1
});
Now, in your XAML, you can define the handler in this way:
<controls:XScrollView Orientation="Horizontal" ItemsSource="{Binding Items}" ItemSelected="Handle_ItemSelected" HeightRequest="100">
then you can implement your handle:
void Handle_ItemSelected(object sender, Xamarin.Forms.ItemTappedEventArgs e)
{
// your code
}
That’s really simple! But if you want build a code in line with the Separation of Concern, typical principles of MVVM, a SelectedCommand property should be the best way.
I’ll show the step neeeded to add the command pattern to the TLScrollView in the next post of this series.
Full code is available here
27 Nov 2016
Last Friday in Bari, DotNetSide has hosted one stop of the Xamarin Dev Days tour in Italy. It was really an amazing day spent with very passionate people talking about Xamarin and how is funny to develop with their tools.
During the day, we talked about Xamarin development with Xamarin.Forms combined with Cognitive Services, Mobile Apps, remote APIs and so on. In the afternoon, a great hands-on lab was made by around 40 people with the intention to share their knowledge (and win a Xamarin monkey! 😀 ).
After the announcements made by Microsoft at Connect(); conference last week, we decided to include an extra slot to talk about Visual Studio for Mac, Visual Studio Mobile Center and .NET Standard.
It was a really great day. I like to see how many people loves their job and try to improve with great passion.
Thanks to all and thanks to the DotNetSiders! You rocks!
15 Nov 2016
With Xcode 8.1 and the iOS 10.1 simulator you may encounter the following message:
Don’t worry. This happens because you are running a 32-bit app on a 64-bit architecture (the iPhone/iPad simulator). Change the Supported architecture to x86_64 for the Debug configuration and the iPhoneSimulator platform and the problem goes away.
That’s all!
26 Oct 2016
If you are a typical Visual Studio user, you’ll find easy use the menu Debug > Windows > Exception Settings and set your favorite option to break debug when a specific exeption was thrown:
But, in Xamarin Studio, that thing is just a little bit different. You need to set a new breakpoint from the menù Run > New Breakpoint:
Then you must select the “When an exception is thrown” options:
Finally, you can choose the exception that will cause the debugger’s break, eventually by including their subclasses:
That’s all!
20 Oct 2016
Some days ago I have published a sample Xamarin.Forms control to simply move focus on others controls of the page. I’ve presented just the iOS version but now it’s the time to see also the Android implementation.
TLEntryRenderer in Android
The control is so simple that in just few lines of codes we’ll be able to realize the Android version. Here the renderer code:
[assembly: ExportRenderer(typeof(TLEntry), typeof(TLEntryRenderer))]
namespace TitiusLabs.Forms.Droid.Controls
{
public class TLEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
var element = e.NewElement as TLEntry;
if (element.ReturnButton == ReturnButtonType.Next)
{
Control.ImeOptions = Android.Views.InputMethods.ImeAction.Next;
Control.EditorAction += (sender, args) =>
{
element.OnNext();
};
}
}
}
}
the code is available, as always, on github.
This is the final result:
Nice and simple!
16 Oct 2016
Spending some time with good friends is always a great way to start ideas. So, while talking with one of them, he asked me the best way to handle focus on entries in a Xamarin.Forms Page. I’ve handled the problem many times in iOS and Android native projects, so I decided to create a new control in my library on github.
Welcome TLEntry: the custom Entry control
First of all, we have to create a custom control because the user needs to set the type of return button on the keyboard:
public class TLEntry : Xamarin.Forms.Entry
{
public static readonly BindableProperty ReturnButtonProperty =
BindableProperty.Create("ReturnButton", typeof(ReturnButtonType), typeof(TLEntry), ReturnButtonType.None);
public ReturnButtonType ReturnButton
{
get { return (ReturnButtonType)GetValue(ReturnButtonProperty); }
set { SetValue(ReturnButtonProperty, value); }
}
}
After doing that, we need to handle the tap on the button and move the focus on the next control. One way to do that is by knowing the next control and set the focus to it after the next button was pressed. So now we need to know the next control by settings a specific property:
[assembly:ExportRenderer(typeof(TLEntry), typeof(TLEntryRenderer))]
...
public class TLEntry
{
public static readonly BindableProperty NextViewProperty =
BindableProperty.Create("NextView", typeof(View), typeof(TLEntry));
public View NextView
{
get { return (View)GetValue(NextViewProperty); }
set { SetValue(NextViewProperty, value); }
}
public void OnNext()
{
NextView?.Focus();
}
}
Now is the time to create the platform specific renderers.
TLEntryRenderer: the iOS platform-specific renderer
A renderer is a special class with the role of transform a Xamarin Forms control in a native control. So now we needs to transform the TLEntry in a UITextField for the iOS platform. Since we already have renderers for standard control, handle the new ReturnButton and NextView properties simply means to extend the base renderer and create a new one like this:
public class TLEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs&amp;amp;amp;amp;amp;amp;amp;lt;Entry&amp;amp;amp;amp;amp;amp;amp;gt; e)
{
base.OnElementChanged(e);
var element = e.NewElement as TLEntry;
if (element.ReturnButton == ReturnButtonType.Next)
{
Control.ReturnKeyType = UIKit.UIReturnKeyType.Next;
Control.ShouldReturn += (textField) =&amp;amp;amp;amp;amp;amp;amp;gt;
{
element.OnNext();
return false;
};
}
}
}
With this code, we set the ReturnKeyType on UITextView and add an handler that capture the pressure on the return button and go to the next item.
Now, in your Page, you can do something similar:
public partial class FormSamplesPage : ContentPage
{
TLEntry Entry1 = new TLEntry();
TLEntry Entry2 = new TLEntry();
TLEntry Entry3 = new TLEntry();
protected override void OnAppearing()
{
base.OnAppearing();
Entry1.NextView = Entry2;
Entry1.ReturnButton = ReturnButtonType.Next;
Entry2.NextView = Entry3;
Entry2.ReturnButton = ReturnButtonType.Next;
Entry3.NextView = Entry1;
Entry3.ReturnButton = ReturnButtonType.Next;
this.Body.Children.Add(Entry1);
this.Body.Children.Add(Entry2);
this.Body.Children.Add(Entry3);
}
}
this is the final result:
Nice!
You can find all code on my github space: https://github.com/fabiocozzolino/TitiusLabs.Xamarin
The Android version will be available soon!
19 Jun 2016
In my opinion, this is one of the most useful and hidden feature. In Xamarin Studio you are able to fold or unfold your code by simply enabling this feature in Preferences:
And this is the final result:
I really like it!