如何在contentpage的contentview的堆棧布局中添加控件？

Question

我正在使用xamarin.forms。 有兩個項目Android和IOS。

我有一個ContentView頁面，其中包含以下代碼

<ContentView.Content>
    <StackLayout x:Name="slMain" Padding="1" BackgroundColor="#7ABA45">
        <StackLayout VerticalOptions="FillAndExpand" Padding="0,0,20,0" HeightRequest="50" HorizontalOptions="FillAndExpand">
            <Label x:Name="lblTitle" VerticalOptions="CenterAndExpand"  />
        </StackLayout>
        <StackLayout x:Name="sl" IsVisible="False" BackgroundColor="White">
        </StackLayout>
    </StackLayout>
</ContentView.Content>


// In Behind code(.cs file)

    public ExpandCollapseStackLayout()
    {
        InitializeComponent(); 
        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.Tapped += (s, e) =>
        {
            sl.IsVisible = !sl.IsVisible;
        };
        lblTitle.GestureRecognizers.Add(tapGestureRecognizer);
        slMain.GestureRecognizers.Add(tapGestureRecognizer);
    }

    public string Title
    {
        get
        {
            return lblTitle.Text;
        }
        set
        {
            lblTitle.Text = value;
        }
    }

我想在設計時在ContentPage中名為ContentView的“ sl”的StackLayout中添加控件。 我不想在運行時添加

請建議我如何在Contentview堆棧布局中添加控件？

Answer 1

如果要在設計時添加控件，只需在XAML中聲明它們，例如：

<StackLayout x:Name="sl" IsVisible="False" BackgroundColor="White">
  <!-- Add here your controls -->
  <Label ... />
  <Button .. />
</StackLayout>

如果要在運行時添加控件，則需要使用C＃頁面后面的代碼來完成。 例：

void AddControl()
{
  var btn = new Button();
  sl.Children.Add(btn);
}

Answer 2

ContentView的代碼：

<ContentView.Content>
    <StackLayout x:Name="slMain" Padding="1" BackgroundColor="#7ABA45" >
        <StackLayout VerticalOptions="FillAndExpand" Padding="0,0,10,0" HeightRequest="50" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
            <Label x:Name="lblTitle" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="10,0,0,0" TextColor="White" FontAttributes="Bold"  />
            <Label Text="{ x:Static local:GrialShapesFont.ArrowDown }" HorizontalOptions="End" VerticalOptions="CenterAndExpand" TextColor="White" Style="{ StaticResource FontIconBase }" FontSize="26" />
        </StackLayout>
        <Frame Padding="10" IsVisible="False" BackgroundColor="White" x:Name="ContentFrame" OutlineColor="Black" HasShadow="False">
        </Frame>
    </StackLayout>
</ContentView.Content>

ContentView的CS代碼：

[ContentProperty("ContainerContent")]
public partial class ExpandCollapseStackLayout : ContentView
{
    public ExpandCollapseStackLayout()
    {
        InitializeComponent();
        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.Tapped += (s, e) =>
        {
            ContentFrame.IsVisible = !ContentFrame.IsVisible;
        };
        lblTitle.GestureRecognizers.Add(tapGestureRecognizer);
        slMain.GestureRecognizers.Add(tapGestureRecognizer);
    }

    public View ContainerContent
    {
        get { return ContentFrame.Content; }
        set { ContentFrame.Content = value; }
    }
    public string Title
    {
        get
        {
            return lblTitle.Text;
        }
        set
        {
            lblTitle.Text = value;
        }
    }
}

在ContentPage中添加控件：

<control:ExpandCollapseStackLayout Title="Demo" Padding="0,10,0,0">
                <control:ExpandCollapseStackLayout.ContainerContent >
                    <StackLayout>
                        <Label Text="Add Content Here"></Label>
                    </StackLayout>
                </control:ExpandCollapseStackLayout.ContainerContent>
 </control:ExpandCollapseStackLayout>