Как добавить дочерний вид в общий вид Xamarin Froms

Question

Я пытаюсь встроить дочернее представление в мое общее родительское представление следующим образом

мое родительское представление

<Frame CornerRadius="8"
       Padding="0,5,0,5"
       BackgroundColor="Blue">

        <Grid x:Name="SheetGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Text="Test Title"
                     Grid.Row="0"
                     HeightRequest="5"
                     WidthRequest="50"
                     BackgroundColor="Red"
                     HorizontalOptions="Center"
                     VerticalOptions="Center" />     
        </Grid>
    </Frame>

Мне нужно использовать это как общее представление, что заголовок не изменится, но тело получает изменения.

мое использование на главной странице, как показано ниже

<samplepopup:CommonPopUpView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red" >

            <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" HeightRequest="200" BackgroundColor="Aqua"
                     x:Name="TestView">
                <Label Text="testing"/>
            </StackLayout>

        </samplepopup:CommonPopUpView>

Так что мне нужно добавить «TestView» как дочерний элемент моего «общего представления»

Как я могу это сделать? Любая помощь очень ценю.

Answer 1

Для того, чтобы он заработал, вам нужно внести пару изменений в ваш код.

В вашем parentView (CommonPopUpView.xaml) добавить контейнер, который будет содержать ваше тело, это может быть что-то вроде этого:

<ContentView x:Name="BodyContentView"
             Grid.Row="1" />    
</ContentView>

С существующим кодом он должен выглядеть следующим образом:

<Frame CornerRadius="8"
    Padding="0,5,0,5"
    BackgroundColor="Blue">

    <Grid x:Name="SheetGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Text="Test Title"
                    Grid.Row="0"
                    HeightRequest="5"
                    WidthRequest="50"
                    BackgroundColor="Red"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />

        <ContentView x:Name="BodyContentView"
                        Grid.Row="1">
        </ContentView>                    
    </Grid>
</Frame>

В коде этого файла (CommonPopUpView.xaml.cs) вам понадобится BindableProperty:

public static readonly BindableProperty BodyContentProperty = BindableProperty.Create(
    nameof(BodyContent),
    typeof(View),
    typeof(CommonPopUpView),
    null,
    BindingMode.OneWay,
    null,
    OnBodyContentChanged);

public View BodyContent
{
    get => (View)GetValue(BodyContentProperty);
    set => SetValue(BodyContentProperty, value);
}

private static void OnBodyContentChanged(BindableObject bindable, object oldValue, object newValue)
{
    if (bindable is CommonPopUpView myCommonPopUpView)
    {
        myCommonPopUpView.BodyContentView.Content = (View) newValue;
    }
}

Если вы хотите получить больше информации о BindableProperties, вы можете прочитать здесь

В этом же файле вам также необходимо добавить аннотацию ContentProperty в уровень класса. Это должно выглядеть следующим образом:

[ContentProperty("BodyContent")]
public partial class CommonPopUpView : ContentView

Эта последняя часть важна для предотвращения переопределения вашего CommonPopUpView контента, чтобы убедиться, что любой новый контент будет установлен в подготовленный вами контейнер (BodyContentView).

Теперь вам просто нужно его использовать:

<controls:CommonPopUpView Margin="6,25">
    <Grid Padding="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Label Text="Stack Overflow"
                FontSize="18"
                TextColor="White"
                FontAttributes="Bold" />
        <Label Text="stack.overflow@internet.com"
                FontSize="12"
                TextColor="WhiteSmoke"
                Grid.Row="1" />
    </Grid>
</controls:CommonPopUpView>

<controls:CommonPopUpView Margin="6,15">
    <Grid Padding="15">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image Source="xamarin_small"
                WidthRequest="100"
                HeightRequest="100"
                HorizontalOptions="Center" />

        <Image Source="microsoft.jpg"
                WidthRequest="100"
                HeightRequest="100"
                Grid.Column="1"
                HorizontalOptions="Center" />
    </Grid>            
</controls:CommonPopUpView>

Любой контент, который вы устанавливаете в своем CommonPopUpView CustomView, будет установлен только в контейнере тела, сохраняя другие элементы управления / представления, которые у вас есть. определены.

Надеюсь, это поможет .-

Answer 2

Вы можете прочитать документ о Создание пользовательского элемента управления .

Сначала вы должны добавить новый ContentView, назовем его MyCustomView в ваш проект:

public partial class MyCustomView : ContentView
{
    public MyCustomView()
    {
        InitializeComponent();
    }
}

В xaml добавьте туда свой код:

  <ContentView.Content>
        <samplepopup:CommonPopUpView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red"
                                 >

            <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" HeightRequest="200" BackgroundColor="Aqua"
                     x:Name="TestView">
                <Label Text="testing"/>
            </StackLayout>

        </samplepopup:CommonPopUpView>
    </ContentView.Content>

Если вы хотите использовать это представление в родительском представлении, объявите ссылку на пространство имен настраиваемого представления на родительской странице, а затем используйте его в XAML:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:CustomPopUp="clr-namespace:App222"
             mc:Ignorable="d"
             x:Class="App222.MainPage">



    <Frame CornerRadius="8"
       Padding="0,5,0,5"
       BackgroundColor="Blue">

        <Grid x:Name="SheetGrid">

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

            <Label Text="Test Title"
                     Grid.Row="0"
                     HeightRequest="5"
                     WidthRequest="50"
                     BackgroundColor="Red"
                     HorizontalOptions="Center"
                     VerticalOptions="Center"
                     />

            <CustomPopUp:MyCustomView Grid.Row="1"/>

        </Grid>
    </Frame>

</ContentPage>