xamarin.formsfreshmvvm

Binding to a property in ControlTemplate does not work


I have a mobile app with Xamarin.Forms and FreshMvvm. Every page uses a control template defined in App.xaml:

          <ControlTemplate x:Key="MainPageTemplate">
            <Grid BindingContext="{Binding Source={RelativeSource TemplatedParent}}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="9*" />
                </Grid.RowDefinitions>
                <Image Source="{local:ImageResource MyApp.Images.My_logo.jpg}" Margin="0, 0, 0, 5" Grid.Row="0" />
                <Label Text="{Binding ScreenName}" FontSize="Subtitle" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="1" />
                <Label Text="{Binding ErrorMessage}" TextColor="Red" Grid.Row="2" />
                <ContentPresenter Margin="10, 0, 10, 10" Grid.Row="3" />
            </Grid>
        </ControlTemplate>

The ScreenName property is defined in the PageModel like this:

        protected string _screenName;

        public string ScreenName => _screenName;

For some reason, the ScreenName is not showing up on the page that uses the control template. It does if I replace the Binding with a hard-coded text:

<Label Text="Something" ...

Solution

  • When setting your BindingContext to your {RelativeSource TemplatedParent}, your binding context is the page.

    To access your ViewModel, you must change your xaml to access your property through the "BindingContext" of your page.

    <Label Text="{Binding BindingContext.ScreenName}" FontSize="Subtitle" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="1" />