Xamarin Forms 标签用户控件

Question

我正在尝试创建一个包含标签和占位符的 Xamarin Forms 用户控件，我可以在其中 "nest" 一个子控件。

我想要左边的标签和右边的嵌套控件。他们需要占可用资源的一定百分比 space 即标签应占三分之一，嵌套控件应占三分之二。

我正在尝试使用内容展示器作为占位符，这样我就可以像这样使用用户控件

<userControls:PanelControl HeadingText="FIRST HEADING">
    <DatePicker />
</userControls:PanelControl>

如果我将用户控件基于堆栈布局，则这两个控件会出现在正确的位置。使用堆栈布局的问题是我无法实现百分比宽度。

如果我将用户控件基于网格，则嵌套控件会出现在覆盖标签的第一列中。看起来 Content Presenter 在网格中无法正常工作。

这是基于堆栈布局的用户控件

<?xml version="1.0" encoding="UTF-8"?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BasicAppTemplate.UserControls.PanelControl"
             Orientation="Horizontal">

    <Label x:Name="HeadingLabel" VerticalOptions="Center"/>

    <ContentPresenter/>

</StackLayout>

这是基于网格的用户控件

<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BasicAppTemplate.UserControls.PanelGridControl">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>

    <Label x:Name="HeadingLabel" VerticalOptions="Center" Grid.Column="0"/>

    <StackLayout Grid.Column="1">
        <ContentPresenter/>
    </StackLayout>

</Grid>

这是页面

<?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:userControls="clr-namespace:BasicAppTemplate.UserControls;assembly=BasicAppTemplate"
             x:Class="BasicAppTemplate.Pages.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <userControls:PanelControl HeadingText="FIRST HEADING">
            <DatePicker />
        </userControls:PanelControl>

        <userControls:PanelGridControl HeadingText="SECOND HEADING" Grid.Row="1">
            <DatePicker />
        </userControls:PanelGridControl>
    </Grid>

</ContentPage>

这是他们俩的样子

有什么实现方法吗？还有其他方法可以创建我的嵌套用户控件吗？

Answer 1

感谢 DavidS 的指导，解决方案是在用户控件中嵌入一个 ControlTemplate

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BasicAppTemplate.UserControls.PanelGridControl">

    <ContentView.ControlTemplate>

        <ControlTemplate>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="2*" />
                </Grid.ColumnDefinitions>

                <Label VerticalOptions="Center" Grid.Column="0" Text="{TemplateBinding HeadingText}" />

                <ContentPresenter Grid.Column="1" />

            </Grid>

        </ControlTemplate>

    </ContentView.ControlTemplate>

</ContentView>

Xamarin Forms 标签用户控件

Xamarin Forms Label User Control

xaml

user-controls

xamarin.forms