question

$$ANON_USER$$ avatar image
0 Votes"
$$ANON_USER$$ asked ·

How to bind ControlTemplate's child property to other element with xaml?

Here i have a control template which has label as its child.
Now i want to get properties of that label like text or width.
How to achieve this with xaml?


 <ControlTemplate>
  <Label
  x:Name="MyLabel"
  Text="This Is a Button"
  />
  </ControlTemplate>
     

   
  <Button
  Text="{Binding Source={x:Reference MyLabel}, Path=Text}" />


dotnet-xamarinformswindows-wpfwindows-uwp-xamldotnet-xamarinforms-xamldotnet-wpf-xaml
· 1
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, VipulTyagi-1819. Do you use the ControlTemplate in Xamarin.Forms? The document about the ControlTemplate doesn't provide a way to access the element of the template directly. How do you consume the control template in xaml? If you use the template for a custom control, try set data binding for the template and you could reference to the custom control as below:

<ContentPage.Resources>
    <ControlTemplate x:Key="template">
        <Grid>
            ...
            <Label Text="{Binding CardTitle}" .../>
        </Grid>
    </ControlTemplate>
</ContentPage.Resources>
<StackLayout Margin="30">
    <controls:CardView 
        BorderColor="DarkGray"
        CardTitle="John Doe"
        ControlTemplate="{StaticResource template}"/>
</StackLayout>

Tutorial: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-template#consume-a-controltemplate

0 Votes 0 ·

1 Answer

mouadcherkaoui avatar image
0 Votes"
mouadcherkaoui answered ·

Hi,

you can use the ControlTemplate as resource and make it specific for a certain type, and referencing it as template for your Buttons, Grids, or any UIElement, lets take a look to your example refactored:

 <Page.Resources>
     <ControlTemplate x:Key="controlTemplate" TargetType="Button">
         <Border Background="{TemplateBinding Background}">
             <Label
               x:Name="MyLabel"
               Content="{TemplateBinding Content}"/>
                
         </Border>
     </ControlTemplate>
 </Page.Resources>
 <Grid>
     <Button
         Template="{StaticResource controlTemplate}" Content="Click!" Background="Gray"/>
 </Grid>

here we are using the control template as template for the Button through its Template property, and in the other hand the ControlTemplate have its property Content bound to its consumer control which means that the Content of the button is bound to the Content property of label in the control template, which is done using the TemplateBinding expression, also the background of the property is bound to the background of the border in the control template.

Hope it helps!

·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.