Question

我正在尝试创建一个包含标签和占位符的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>

这看起来像什么

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

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表单标签用户控件

1 个答案: