Prettying things up with Styles
Using styles you can define a consistent UI for your app and is a great way to make your XAML files more readable and maintainable in the long term. Some neat characteristics of styles: They are very easy to define. Can be inherited to minimize code reuse. Can be defined in XAML or in C#. You can implement multiple Style Classes so the same control without the need for inheritance. To define a Style you need to add it as a Resource. You can define them inside specific Pages or within Application class. Here is an example: Let’s focus on this part: See how we add the Styles definitions inside the ContentPage’s Resource Dictionary, we can do this too at an application level. The Style definition cannot be more explicit,
Checking the new Checkbox in Xamarin.Forms 4.1 and overviewing InputKit control
Pun very much intended… With the release of Xamarin.Forms 4.1 arrives a new Checkbox control. Here is what it looks like: Here are the two ways to instantiate it in XAML and C# The Checkbox has a bindable property for the checked status (IsChecked) and you can handle the CheckedChanged event too. A little thing The control has a rounded shape on iOS if you want it to have a square shape you can use the Visual API. For now, the CheckBox control doesn’t include a Text property and it doesn’t render a Label next to it, to achieve this you would need to explicitly include a Label control and align it next to it. The result looks like this: Other options If you’re working on a legacy project or,
The CodecampSDQ experience
Last Saturday, June 1st I had the privilege of participating as both staff and speaker for a little-known tech event called CodecampSDQ. It was held in the premises of INTEC University here in Santo Domingo. This event has been going on for many years and it has become a sort of tradition for INTEC and I cannot imagine it happening anywhere else anymore, the event is almost part of INTEC’s identity at this point. That is a great thing since it is important to keep these kinds of events accessible to the next generations of professionals. Before I continue, full disclosure: I currently work for Megsoft Consulting, Inc. who are the main organizers of the event so, anything I say or mention in this article should be taken with a
Changing that Back button label on iOS with Xamarin Forms
Some context I’ve been working on the app for CodecampSDQ (iOS | Android) to be celebrated on the premises of Intec this June 1st. The code is based on this repo and we have made some adequations that I will probably talk about in greater detail later. I found myself at an impasse for a few minutes doing the localization for the app when trying to change the Back button label on iOS and that’s what I’m going to talk about next. The meat and potatoes To change the label content all you have to do is set this property NavigationPage.BackButtonTitle. You can set it up using XAML or C# Here is the thing though, you need to set the property from within the ContentPage you’re navigating from, instead of
Layout safe areas for iOS in Xamarin Forms
Since the launch of the iPhone X there is a notch at the top of the screen on iOS devices that tend to be annoying to work around. You would have to add some sort of margin to avoid your controls to be overlapped by it. The problem with this approach is that you would have to take into consideration wether or not the phone was in landscape or portrait mode. To avoid these frustrations Xamarin Forms introduces a SafeArea flag that you can set on your Page Layout to ensure it’s content will automatically adjust the margin depending on the orientation of the device. You can set it with C# Or using XAML, see the ios namespace declared bellow and then how we set the flag right after And
Image caching in Xamarin Forms
Someone asked me about an issue they were having when showing a ListView that had an image for each cell. When the user would scroll the images would flicker and the UI would turn a bit slow. The images were being loaded from the internet. The problem the person was having was that they were not using a correct caching strategy for the images and now I’m going to explain how you can fix this problem in case it happens to you. Enough context, let’s do the caching If you want to add cache to your image you should use something like this: Some explanations ensue When you want to show an image you know you specify the Source of the Image. Probably as a URL or a route to
