Xamarin & .NET Developer Events in August
I’m sure you know of behaviours in Xamarin.Forms but have you heard of Attached Properties?
Have you ever wondered how you define properties for a Grid on a Label, eg <Label Grid.Row=”5″, and the Grid just seems to know about it. This is attaching a piece of data onto the Label so that the Grid can reference the data.
Let’s take a look at how it works in the Grids case. In our Xaml we’d normally have something like the code above, so somehow we tell the Grid that we want to be on Row number 5. In order for this to work the Grid needs to have a static ‘attached’ bindable property. Let’s take a look at what the Grid actually has.
C#
|
1
|
publicstaticreadonlyBindableProperty RowProperty=BindableProperty.CreateAttached(“Row”,typeof(int),...);
|
So yep the Grid has the attached property for Row, awesome, now how does the Grid get that data?
In order for the Grid to be able to access that data it needs a static method which will extract it as follows.
C#
|
1
2
3
4
|
publicstaticintGetRow(BindableObject bindable)
{
return(int)bindable.GetValue(Grid.RowProperty);
}
|
We can also see that the Grid calls this method to get the data from the child element.
C#
|
1
|
introw2=Grid.GetRow(child);
|
So that’s some pretty cool stuff.
Now for the Trick
Considering this is a bindable property we can actually attach anything to this static property, our own object or even a command. We can also get notifications when the property changes, during that notification we can obtain references to both the Element and the bindable property. This means we can link up custom behaviours without even using behaviours.
Say for instance we wanted to attached a TapGesture for a View to a Command? Normally this is fairly verbose to add in Xaml but setup correctly it can become just a property on the View.
C#
|
1
|
local:TappedGestureAttached.Command=“{Binding OpenNewPage}”
|
So what’s TappedGestureAttached? Let’s take a look.
Below we have a Static property called CommandProperty, that property name is Command, has a return type of ICommand and a declaring type of View. You can also see it’s linked to the OnItemTappedChanged command, which means when the property changes that event gets called.
Static Bindable Property
C#
|
1
2
3
4
5
6
7
8
9
10
11
|
publicclassTappedGestureAttached
{
publicstaticreadonlyBindableProperty CommandProperty=
BindableProperty.CreateAttached(
propertyName:“Command”,
returnType:typeof(ICommand),
declaringType:typeof(View),
defaultValue:null,
defaultBindingMode:BindingMode.OneWay,
validateValue:null,
propertyChanged:OnItemTappedChanged);
|
Below we have the OnItemTappedChanged command, as I mentioned before we have access to both the View and the Command hence we can wire up the TapGestureRecognizer.
C#
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
publicstaticvoidOnItemTappedChanged(BindableObject bindable,objectoldValue,objectnewValue)
{
varcontrol=bindable asView;
if(control!=null){
control.GestureRecognizers.Clear();
control.GestureRecognizers.Add(
newTapGestureRecognizer(){
Command=newCommand((o)=>{
varcommand=GetItemTapped(control);
if(command!=null&&command.CanExecute(null))
command.Execute(null);
})
}
);
}
}
|
There we have it wiring up a TapGestureRecognizer in less than a line.
Here’s the full code.
C#
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
publicclassTappedGestureAttached
{
publicstaticreadonlyBindableProperty CommandProperty=
BindableProperty.CreateAttached(
propertyName:“Command”,
returnType:typeof(ICommand),
declaringType:typeof(View),
defaultValue:null,
defaultBindingMode:BindingMode.OneWay,
validateValue:null,
propertyChanged:OnItemTappedChanged);
publicstaticICommand GetItemTapped(BindableObject bindable)
{
return(ICommand)bindable.GetValue(CommandProperty);
}
publicstaticvoidSetItemTapped(BindableObject bindable,ICommand value)
{
bindable.SetValue(CommandProperty,value);
}
publicstaticvoidOnItemTappedChanged(BindableObject bindable,objectoldValue,objectnewValue)
{
varcontrol=bindable asView;
if(control!=null){
control.GestureRecognizers.Clear();
control.GestureRecognizers.Add(
newTapGestureRecognizer(){
Command=newCommand((o)=>{
varcommand=GetItemTapped(control);
if(command!=null&&command.CanExecute(null))
command.Execute(null);
})
}
);
}
}
}
|
We can also use this to hook up events that are directly on the control without using the code behind of the Xaml. Below we link up the ListView.ItemTapped event to a Command, which will be inside our ViewModel rather than codebehind.
C#
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
publicclassItemTappedAttached
{
publicstaticreadonlyBindableProperty CommandProperty=
BindableProperty.CreateAttached(
propertyName:“Command”,
returnType:typeof(ICommand),
declaringType:typeof(ListView),
defaultValue:null,
defaultBindingMode:BindingMode.OneWay,
validateValue:null,
propertyChanged:OnItemTappedChanged);
publicstaticICommand GetItemTapped(BindableObject bindable)
{
return(ICommand)bindable.GetValue(CommandProperty);
}
publicstaticvoidSetItemTapped(BindableObject bindable,ICommand value)
{
bindable.SetValue(CommandProperty,value);
}
publicstaticvoidOnItemTappedChanged(BindableObject bindable,objectoldValue,objectnewValue)
{
varcontrol=bindable asListView;
if(control!=null)
control.ItemTapped+=OnItemTapped;
}
privatestaticvoidOnItemTapped(objectsender,ItemTappedEventArgse)
{
varcontrol=sender asListView;
varcommand=GetItemTapped(control);
if(command!=null&&command.CanExecute(e.Item))
command.Execute(e.Item);
}
}
|
Related posts
