Xamarin 表单标签用户控件答案

【问题标题】：Xamarin Forms Label User ControlXamarin 表单标签用户控件
【发布时间】：2017-10-23 12:02:21
【问题描述】：

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

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

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

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

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

如果我将用户控件基于 Grid，则嵌套控件会出现在覆盖标签的第一列中。看起来 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>

这就是他们俩的样子

任何想法如何实现这一点？还有其他方法可以创建我的嵌套用户控件吗？

【问题讨论】：

基于这个stackoverflow.com/questions/44948004/…，看起来 ContentPresenter 应该在 ControlTemplate 中使用。
嗯，很有趣。会试一试，谢谢。

标签： xaml xamarin.forms user-controls

【解决方案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>

【讨论】：