Rotating Label with DataBinding Xamarin Forms

Question

I am trying to duplicate the following example to understand binding in Xamarin.

Once I run the following script, my first label is not rotating along with slider. enter image description here

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DataBinding.MyPage" Title="Slider Bindings Page">
 <StackLayout>
    <Label Text="ROTATION"
           BindingContext="{x:Reference Name=slider}"
           Rotation="{Binding Path=Value}"
           Font="Bold, Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

    <Slider x:Name="slider"
            Maximum="360"
            VerticalOptions="CenterAndExpand" />

    <Label BindingContext="{x:Reference slider}"
           Text="{Binding Value, 
                          StringFormat='The angle is {0:F0} degrees'}"
           Font="Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
  </StackLayout>


</ContentPage>

I've just run the example on all 3 platforms at it works fine, even on iOS. Are you trying to replicate this in your own new project perhaps?, or are you just running it as part of the existing examples solution? — Pete
I think you may be using and older version as it used to be a requirement that any referenced controls had to appear in the markup prior to the reference being used. It looks like on the latest version 1.2.3.6257 they have now fixed xaml pages so controls can reference any where now. I will write this up as an answer. — Pete
Thats strange as it should work then the same as my examples version, especially as we are using the same markup? Can you send the project on email and I will take a look? The experience you had would indicate a previous version as it always used to work that way. — Pete

Pete Pete · Accepted Answer · 2014-10-09T21:43:58

It used to be a requirement in XAML pages that any use of {x:Reference} had to have the control that was being referenced appear in the markup prior to it being referenced.

i.e.

In the Xamarin.Forms SliderBindings example we had the following markup originally that works with Xamarin.Forms 1.22x:-

<StackLayout>
    <Slider x:Name="slider"
            Maximum="360"
            VerticalOptions="CenterAndExpand" />

    <Label Text="ROTATION"
           BindingContext="{x:Reference Name=slider}"
           Rotation="{Binding Path=Value}"
           Font="Bold, Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

    <Label BindingContext="{x:Reference slider}"
           Text="{Binding Value, 
                          StringFormat='The angle is {0:F0} degrees'}"
           Font="Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
</StackLayout>

However, now in the latest version of Xamarin.Forms v1.2.3.6257 you no longer have to place controls prior to them being {x:Referenced} in a document, as can be seen by their updated example:-

<StackLayout>
    <Label Text="ROTATION"
           BindingContext="{x:Reference Name=slider}"
           Rotation="{Binding Path=Value}"
           Font="Bold, Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

    <Slider x:Name="slider"
            Maximum="360"
            VerticalOptions="CenterAndExpand" />

    <Label BindingContext="{x:Reference slider}"
           Text="{Binding Value, 
                          StringFormat='The angle is {0:F0} degrees'}"
           Font="Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
  </StackLayout>

So if you update your project to the latest Xamarin.Forms v1.2.3.6257, you will then be able to {x:Reference} controls without ordering of controls being important. There may be certain restrtictions still, however it seems much more flexible than in previous versions.

Rotating Label with DataBinding Xamarin Forms

1 Answers