Forum Xamarin.Forms

ControlTemplate for a custom control completely breaks the view

midixmidix LVMember ✭✭

I have a custom control called ValidationSummary extended from Xamarin.Forms.Frame. Xaml of the control looks like this:

    <?xml version="1.0" encoding="UTF-8"?>
    <Frame xmlns="http://xamarin.com/schemas/2014/forms" 
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
          x:Class="My.DemoControl"
          BackgroundColor="#FFEEEE"
          Padding="5.0"
          x:Name="root"
          OutlineColor="Red">

        <StackLayout Padding="5" x:Name="container">
          <Label TextColor="Red" Text="Hello red"></Label>
        </StackLayout>

    </Frame>

The control itself is empty for the purposes of this demo:

        using Xamarin.Forms;

        namespace My
        {
            public partial class DemoControl : Frame
            {
                public DemoControl()
                {
                    InitializeComponent();
                }
            }
        }

As a test, I have a simple content page:

        <?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:cntrls="clr-namespace:My"
                     x:Class="Views.SandboxPage"
                     Title="Sandbox" 
                     BackgroundColor="Teal">

          <StackLayout Padding="10.0">

            <cntrls:DemoControl>
            </cntrls:DemoControl>

            <Label Text="Something else"/>
          </StackLayout>
        </ContentPage>

Everything works as expected, I see Hello red and Something else texts on the page.

But then I want to set custom ControlTemplate like this in my App.xaml:

     <Application.Resources>
            <ResourceDictionary>
              <ControlTemplate x:Key="greenDemo">
                   <StackLayout Padding="5">
                       <Label TextColor="Green" Text="Hello green"></Label>
                    </StackLayout>
               </ControlTemplate>
            </ResourceDictionary>
       </Application.Resources>

I set it like this:

        <cntrls:DemoControl ControlTemplate="{StaticResource greenDemo}">
        </cntrls:DemoControl>

As the result, I would expect to see Hello green and Something else texts on the page. But I see nothing at all! The page gets completely empty as if the ContentPage had been completely broken.

Everything else - global styles etc. - works fine, so it's no App.xaml problem.

What's wrong? How to implement ControlTemplate for my custom control?

Tagged:

Answers

  • GPopsGPops USMember

    Hi Martin, Did you get an answer on this issue ?

  • midixmidix LVMember ✭✭

    No, unfortunately not yet. I had to put aside my controltemplates and implement UI in other, more messy ways with C# code. Let's hope Xamarin team will take a look at this issue some day.

  • AhmedAlejoAhmedAlejo USMember ✭✭
    edited November 2017

    @midix @GPops. It works, you only misunderstood ControlTemplate workings, you need a ContentPresenter in your ControlTemplate as a placeholder.

    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="greenDemo">
                <StackLayout Padding="5">
                    <Label TextColor="Green" Text="Hello green"></Label>
                    <ContentPresenter/>
                </StackLayout>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
    

    Then according to your snippet:

    <?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:cntrls="clr-namespace:My"
        x:Class="Views.SandboxPage"
        Title="Sandbox" 
        BackgroundColor="Teal">
        <StackLayout Padding="10.0">
            <cntrls:DemoControl ControlTemplate="{StaticResource greenDemo}">
            </cntrls:DemoControl ControlTemplate="{StaticResource greenDemo}">
    
            <Label Text="Something else"/>
        </StackLayout>
    </ContentPage>
    

    Would have the following structure:

    <?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:cntrls="clr-namespace:My"
        x:Class="Views.SandboxPage"
        Title="Sandbox" 
        BackgroundColor="Teal">
    
        <StackLayout Padding="10.0">
    
            <Frame  BackgroundColor="#FFEEEE"  Padding="5.0" OutlineColor="Red">
                <StackLayout Padding="5">
                    <Label TextColor="Green" Text="Hello green"/>                   
                    <StackLayout Padding="5">
                        <Label TextColor="Red" Text="Hello red"/>
                    </StackLayout>
                </StackLayout>
            </Frame>
    
            <Frame  BackgroundColor="#FFEEEE" Padding="5.0" OutlineColor="Red">
                <StackLayout Padding="5">
                    <Label TextColor="Green" Text="Hello green"/>   
                    <ContentPresenter/>                 
                    <StackLayout Padding="5">
                        <Label TextColor="Red" Text="Hello red"/>
                    </StackLayout>
                </StackLayout>
            </Frame>
    
            <Label Text="Something else"/>
        </StackLayout>
    </ContentPage>
    

    XAML/WPF could be tricky

Sign In or Register to comment.