Attached Properties – What Are They Good For?

Attached Properties – What Are They Good For?

For the longest time I knew what Attached Properties in Xamarin.Forms were – the most famous example being setting a control’s position within a Grid … <Label Text="I'm attached!" Grid.Row="1" Grid.Column="2" /> 123  <Label Text="I'm attached!" Grid.Row="1" Grid.Column="2" />  … but to be honest, I just didn’t care how the Grid.Row and Grid.Column or any attached properties worked behind the scenes. They were one of those things that as long as they worked – I didn’t care if I knew anything else about them. I even knew I could use them to bind Commands to events that don’t work with Commands. And I heard rumors I could do cool things with Effects with them. But still, I didn’t care. But I finally took the time to sit down and understand them … and wow am I glad I did! Attached properties are extremely powerful and they let you do some seriously cool stuff from XAML (or C# if you’re still into that). What Are They? Attached Properties allow properties from one object to be “attached” and set from another object. So in the ubiquitous Grid example – a Label can set the Grid’s properties – within the Label’s XAML declaration. Or as the official Xamarin documentation refers to it: An attached property is a special type of bindable property, defined in one class but attached to other objects… There’s a key word in that definition above that gives Attached Properties all of their power … “bindable”. Because they are bindable – they essentially provide a means to let one view to communicate with something else. Like another a view,...
Making It Snow! Xamarin.Forms and CocosSharp and Particles

Making It Snow! Xamarin.Forms and CocosSharp and Particles

It goes without saying that I’m a big fan of Xamarin.Forms. It’s the first framework I evaluate when taking on a new project. I love all of the out of the box goodness it provides – easy MVVM (especially the binding), layout engine, and now it’s very easy to get down to the platform – without necessarily having to resort to renderers. But … I also like the look of full screen apps that are, how should I say … a little more pizazz-y. You know the ones – they’re full screen, lots of cool graphics, maybe some “things” animating about the screen. Something that looks a bit like the apps below. Those apps are cool … but surely one couldn’t do that with Xamarin.Forms … right? Right? Wrong! Those apps are both done with Forms – and both are running pretty much with the normal Forms elements – Button, Grid, some data binding. But to give it a bit of pizazz – there’s some CocosSharp running in it as well. And it’s pretty easy to get setup and running. So let’s take a look at how to do so! (Full source can be found on GitHub here.) Hello CocosSharp The key to getting that cool background and those animations is CocosSharp. My inspiration for all of this was the weather app Carrot. If it’s snowing, it shows some snow falling – if it’s raining, it shows some rain… etc. I wanted to see if I could reproduce that with Xamarin.Forms. CocosSharp is a game development framework. It’s fully featured (I’m talking physics engine and everything). If you desire,...
Bindable Native Views in XAML – With Commands!?!

Bindable Native Views in XAML – With Commands!?!

Back when I wrote the post on the awesomeness that is binding platform specific, aka native, views directly in Xamarin.Forms XAML one of the things missing were Commands. For example, no tying button clicks to a Command in a view model. Using the UpdateSourceEventName attribute, you can introduce two way binding by having Forms listen for the event specified and then update the bindings when said event is fired. However, that doesn’t help us when our app needs to react and take an action when an event occurs on the native view embedded within the XAML. So what’s a developer to do? One way around this is to embed the native control in the code behind file and then all the events will be available for use. Handle that event, then invoke whatever command you want in your view-model. That works – but it isn’t optimal. You have to mix code-behind with XAML … AND … either use Shared Projects or make creative use of partial classes. There has to be a better way … and there is … Commanding From the Native View! Or Subclassing to the Rescue! The solution to the problem really is rather simple and it evolves subclassing. All the demo code and a working solution can be found on GitHub here. In the previous post on native XAML embedding with data binding, I mentioned there was a new extension method called SetBinding on UIView and Android.View objects. It’s this method the Xamarin.Forms XAML parser calls when it comes across a native property definition specified in the XAML to provide data binding. So … what...
Xamarin Forms – Bindable Picker(!!)

Xamarin Forms – Bindable Picker(!!)

I’m rather starting to like doing these look aheads to features coming out in future versions of Xamarin.Forms. It’s really cool tracing through the source code to see how a new feature is being implemented and coming together. And today we’re going to talk about a feature that I keep trying to use, thinking it’s already implemented in Forms… but every time I try, I slap my forehead and remember it’s not there yet … binding a data source to a Picker !! Everything I talk about in this article is dependent upon Xamarin.Forms 2.3.4 – which at the time of this writing (November 29, 2016) is not on NuGet yet. You will need to build from source in order to use it right now. When it does show up on NuGet if there are any changes, I will keep this blog updated. tl;dr; All the code from this post can be found on GitHub here. If you’re only here for the goodness of how to data bind to a Picker … first bind an IList collection to the ItemsSource property. Then bind whatever you want receiving updates to the SelectedItem. Finally, ItemDisplayBinding can receive another binding (from a property within the class’s that make up the IList bound to the ItemsSource), that will determine what gets displayed. Read on to get the full run down of the new data binding! New Properties There are 3 new properties introduced to the Picker as part of the new data binding functionality (more if you count the backing static BindableProperty properties, but we don’t need to directly address those). ItemsSource, SelectedItem,...
Bindable Native Views – Xamarin.Forms 2.3.3 Look Ahead

Bindable Native Views – Xamarin.Forms 2.3.3 Look Ahead

In the last post on the new features of Xamarin Forms 2.3.3 we took a look at Platform Specifics – both how to create one and how to consume one. This time around we’re going to turn our attention to bindable native views in XAML! Again this feature seems to be taking away the need to create custom renderers by giving developers the ability to directly place native (as in 100% iOS or Android or UWP controls) into a Xamarin.Forms core project – and we’re talking putting them into XAML here! Not only that, they are bindable! (As we’ll see, they have to be bindable, because they are not accessible from the code behind file at all.) So let’s dive right in! Adding Native Bindable Views Before we get started with how to add a native view/control – there is a quick gotcha (and isn’t it great when I have to start out with a warning first? This isn’t so bad.) You cannot have XAML compilation turned on for the XAML pages that contain the native views. That’s not ideal. I would recommend you turn it on for every XAML page that does not contain a native view, but leave it off for the ones that do. So in other words – class level, not assembly level. OK – adding one of these native views. A page that has a native iOS UILabel would look like the following: <?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:XAMLb" xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS" x:Class="XAMLb.XAMLbPage"> <ContentPage.Content> <ios:UILabel Text="Hello from an iOS label" View.VerticalOptions="Center" View.HorizontalOptions="Center" /> </ContentPage.Content> </ContentPage> 123456789101112  <?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:XAMLb"         xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"        x:Class="XAMLb.XAMLbPage">    <ContentPage.Content>        <ios:UILabel Text="Hello from...