Xamarin形式的contentpresenter排错了电话 [英] Xamarin forms contentpresenter goes in wrong row and empty on phone

问题描述

我正在尝试Xamarin Forms来创建我的自定义"GroupBox"控件，该控件只是一个具有两行的网格.第一行应该只显示一个带有标题的框.标题具有带标签的背景矩形.第二行通过ContentPresenter显示内容，内容在第二行下方显示.

I'm having a go at Xamarin Forms trying to create my custom 'GroupBox' control which is a just a grid with two rows. The first row should just show a box with a header . The header has a background rectangle with a label. The second row shows the content via ContentPresenter the content goes below in the second row.

我相信我已经正确地完成了XAML，这就是我在WPF中所做的方式，它在GroupBox.xaml Forms Previewer中很好地显示了，但是当我将其添加到主页中时，出于某种原因，在预览器中，Groupbox进入第一行(标题)而不是第二行.

I believe I've done the XAML correctly, this is how I'd do it in WPF, it shows in the GroupBox.xaml Forms Previewer fine, but when I add it into the main page, the content of the Groupbox goes into the first row (the header) instead of the second for some reason within the Previewer.

此外，当我尝试在Android手机上运行时，它看起来像这样:

furthermore, when I attempt to run on an android phone, it just looks like this:

组框是没有背景颜色或文本的空白框

the group boxes are blank frames with no background colour or text

这是GroupBox用户控件"的代码

This is the code of the GroupBox 'user control'

<?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="XForms.GroupBox">

    <Grid.RowDefinitions>
        <RowDefinition Height="0.2*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>

    <Frame Grid.Row="0" Grid.RowSpan="2" Margin="1" OutlineColor="AliceBlue"/>

    <BoxView Grid.Row="0" BackgroundColor="Red" Margin="1"/>

    <Label Grid.Row="0" TextColor="White" Text="Label!" Margin="2" />

    <Grid Grid.Row="1">   
        <ContentPresenter/>
    </Grid>

</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:local="clr-namespace:XForms;assembly=XForms"
                 x:Class="XForms.MainPage">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>

                <local:GroupBox Grid.Row="0">
                    <Label Text="I'm some content 1"/>
                </local:GroupBox>

                <local:GroupBox Grid.Row="1">
                    <Label Text="I'm some content 2"/>
                </local:GroupBox>

                <local:GroupBox Grid.Row="2">
                    <Label Text="I'm some content 3"/>
                </local:GroupBox>
            </Grid>
        </Grid>
    </ContentPage>

在XAML主页中，即使内容中没有网格，我也可以在标签上添加网格行，并且可以在预览器中使用，但是在电话上仍然空白(这是最重要的)

in the main page XAML I can add a grid row to the label, even though there is no grid in the content, and it will work in the previewer -- but it's still blank on the phone (Which is most important).

  <local:GroupBox Grid.Row="0">
                    <Label Text="I'm some content 1" Grid.Row="1"/>
                </local:GroupBox>

推荐答案

我不知道Frame的用途是什么，但是它目前覆盖了BoxView和标签，因此使它们不可见.注释掉Frame，您将再次看到标签和BoxView.

I don't know what is the Frame for, but it is currently covering the BoxView and labels and thus made them invisible. Comment out the Frame and you will see the labels and BoxView again.

我相信我已经正确完成了XAML，这就是我在WPF中所做的方式，它在GroupBox.xaml Forms Previewer中很好地显示了，但是当我将其添加到主页中时，Groupbox的内容由于某种原因，在预览器中进入第一行(标题)而不是第二行.

I believe I've done the XAML correctly, this is how I'd do it in WPF, it shows in the GroupBox.xaml Forms Previewer fine, but when I add it into the main page, the content of the Groupbox goes into the first row (the header) instead of the second for some reason within the Previewer.

ContentPresenter不能那样工作，在Xamarin.Forms中通常在ControlTemplate中使用.有关ContentPresenter的用法，请参阅此博客.

ContentPresenter doesn't work like that.In Xamarin.Forms, it is generally used in ControlTemplate. For usage of ContentPresenter, please refer to this blog.

如果您要使用ContentPresenter，请使用.可以将ContentView用于GroupBox，而不是将Grid用于GroupBox，

In your case, if you want to ContentPresenter to work. Instead of using Grid for GroupBox, you can use ContentView for GroupBox like below:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class GroupBox : ContentView
{
    public GroupBox()
    {
        InitializeComponent();
    }
}

GroupBox.xaml:

GroupBox.xaml:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Demo.GroupBox">
<ContentView.ControlTemplate>
    <ControlTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.2*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <!--<Frame Grid.Row="0" Grid.RowSpan="2" Margin="1" OutlineColor="AliceBlue"></Frame>-->
            <BoxView Grid.Row="0" BackgroundColor="Red" Margin="1"  />
            <Label Grid.Row="0" TextColor="White" Text="Label!" Margin="2" />
            <Grid Grid.Row="1">
                <ContentPresenter/>
            </Grid>
        </Grid>
    </ControlTemplate>
</ContentView.ControlTemplate>

这篇关于Xamarin形式的contentpresenter排错了电话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！