ControlTemplate覆盖代码动态添加控件问题及动态创建页面模板需求

首先，你的动态控件不显示的核心原因是ControlTemplate里的Grid布局问题——所有元素都默认放在Grid的同一单元格，ContentPresenter被上面的Label、BoxView和下面的Label完全覆盖了，所以你动态添加的内容根本没机会显示出来。

第一步：修复ControlTemplate的布局 #

先修改App.xaml里的ControlTemplate，给Grid添加行定义，把各个元素分配到不同行，让ContentPresenter占据中间的可用空间：

<ControlTemplate x:Key="Template">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <!-- 顶部标题 -->
        <Label Text="Control Template Demo App" TextColor="White" Grid.Row="0"/>
        <!-- 内容区域，这里会显示你的动态控件 -->
        <ContentPresenter Grid.Row="1"/>
        <!-- 底部版权 -->
        <Label Text="(c) WTF 2018" TextColor="White" VerticalOptions="Center" Grid.Row="2"/>
        <!-- 把BoxView设为背景，放在最底层 -->
        <BoxView Color="Teal" Grid.RowSpan="3"/>
    </Grid>
</ControlTemplate>

这样调整后，你的动态按钮应该就能正常显示了。

第二步：后台动态创建页面并应用ControlTemplate #

当然可以完全通过后台代码实现页面创建+ControlTemplate应用，这里给你两种常见场景的实现方式：

场景1：动态创建ContentView并应用全局的ControlTemplate #

假设你已经在App资源里定义了Template这个ControlTemplate，后台代码可以这样写：

public MainPage()
{
    InitializeComponent();

    // 动态创建ContentView并应用ControlTemplate
    var dynamicContentView = new ContentView
    {
        ControlTemplate = Application.Current.Resources["Template"] as ControlTemplate
    };

    // 创建滚动视图和栈布局
    var scrollView = new ScrollView();
    var menuLayout = new StackLayout { Orientation = StackOrientation.Vertical };

    // 添加动态按钮
    var testButton = new Button { Text = "This is a Test Button", BackgroundColor = Color.White };
    menuLayout.Children.Add(testButton);

    scrollView.Content = menuLayout;
    dynamicContentView.Content = scrollView;

    // 把ContentView设为页面内容
    this.Content = dynamicContentView;
}

场景2：完全从零开始动态创建ControlTemplate #

如果不想依赖XAML里的资源，也可以直接在后台代码创建ControlTemplate：

public MainPage()
{
    InitializeComponent();

    // 动态构建ControlTemplate的内容
    var grid = new Grid();
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });

    // 顶部Label
    var headerLabel = new Label { Text = "Control Template Demo App", TextColor = Color.White };
    Grid.SetRow(headerLabel, 0);

    // ContentPresenter（必须存在才能承载ContentView的内容）
    var contentPresenter = new ContentPresenter();
    Grid.SetRow(contentPresenter, 1);

    // 底部Label
    var footerLabel = new Label { Text = "(c) WTF 2018", TextColor = Color.White, VerticalOptions = LayoutOptions.Center };
    Grid.SetRow(footerLabel, 2);

    // 背景BoxView
    var backgroundBox = new BoxView { Color = Color.Teal };
    Grid.SetRowSpan(backgroundBox, 3);

    // 把所有元素添加到Grid
    grid.Children.Add(backgroundBox);
    grid.Children.Add(headerLabel);
    grid.Children.Add(contentPresenter);
    grid.Children.Add(footerLabel);

    // 创建ControlTemplate
    var controlTemplate = new ControlTemplate(() => grid);

    // 创建ContentView并应用模板
    var contentView = new ContentView
    {
        ControlTemplate = controlTemplate,
        Content = new ScrollView
        {
            Content = new StackLayout
            {
                Children = { new Button { Text = "Dynamic Button", BackgroundColor = Color.White } }
            }
        }
    };

    this.Content = contentView;
}

关键注意点 #

• 不管是XAML还是后台创建ControlTemplate，ContentPresenter都是核心，它是连接ContentView的Content和模板的桥梁，必须存在。
• 布局时一定要注意Grid的行/列分配，避免元素重叠覆盖，这是最容易踩的坑。

内容的提问来源于stack exchange，提问作者Vox121