5

I have a Frame with a StackLayout inside of it:

<Frame CornerRadius="1" HasShadow="false" Margin="10" 
 BackgroundColor="White" BorderColor="Silver" Padding="0" >
   <StackLayout Orientation="Vertical" Spacing="0" Padding="0" >
      <xaml:PtiXaml />
      <template:LineTemplate />
      <xaml:AtiXaml />
      <template:LineTemplate />
      <xaml:StiXaml />
   </StackLayout>
</Frame>

Can I create a new object called NewFrame that is the same as the Frame with the StackLayout inside?

<template:NewFrame>
   <xaml:PtiXaml />
   <template:LineTemplate />
   <xaml:AtiXaml />
   <template:LineTemplate />
   <xaml:StiXaml />
</template:NewFrame>

or

<template:NewFrame>
   <xaml:ABCXaml />
</template:NewFrame>

or

<template:NewFrame>
   <Label Text="X" />
</template:NewFrame>

It was suggested I use a Custom View but I have looked and can not find an example of this where it contains other elements inside.


2 답변


0

Right-Click at the desired position in your Shared Project (or PCL) in your Solution Explorer (I would recommend adding a folder named "Views" or "CustomViews" and creating the item inside that folder), select "Add new item" and choose "Content View" (without (C#) behind it. The filename should be something like "View1.xaml", you can change that due to your liking, however the important thing is that the xaml extension is there.

This will create a new ContentView with a xaml and xaml.cs file. Inside the xaml file you can declare your xaml code posted above and write any code necessary into the xaml.cs file.

Now you can add a namespace declaration to the page you want to put your view into:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        ...
        xmlns:customs="clr-namespace:YourNamespace.Views;assembly=YourNamespace"

and declare the element in that Page's or any layout's content:

<customs:CustomViewName ... />

If you want to be able to control the element's behaviour you can add BindableProperties in the codebehind.

For more in-depth information on that, you might want to take a look into this article: https://visualstudiomagazine.com/articles/2017/10/01/add-custom-controls.aspx


  • The problem for me is that it's just a Frame and there are different XAML codes inside the frame. Not just one same set of XAML. Do you know how I can deal with that? - Alan2
  • No, I don't see any good way to do that. You could create multiple classes, each for every variation - Markus Michel

0

Use a ContentView along with a ControlTemplate to create a Custom Control. This way you can create a new control called NewFrame, write the XAML for your control and then use the <ContentPresenter> tag inside your <ControlTemplate> to assign where you'd like your content to be.

Like so:

.
└── NewFrame
    ├── NewFrame.cs
    └── NewFrame.xaml  -> Is a ResourceDictionary

NewFrame.cs:

namespace TestApp.Controls
{
    public partial class NewFrame : ContentView
    {
    }
}

NewFrame.xaml:

<ResourceDictionary 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:newFrame="clr-namespace:TestApp.Controls"
    x:Class="Namespace.For.A.ResourceDictionary">


    <Style TargetType="newFrame:NewFrame">
        <Setter Property="ControlTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <ContentView BackgroundColor="Transparent">
                        <Frame CornerRadius="1" HasShadow="false" Margin="10" BackgroundColor="White" BorderColor="Silver" Padding="0" >
                            <StackLayout Orientation="Vertical" Spacing="0" Padding="0">
                                <ContentPresenter/>
                            </StackLayout>
                        </Frame>
                    </ContentView>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

ConsumingYourControl.xaml:

 <template:NewFrame>
    <template:NewFrame.Content>
        <xaml:PtiXaml />
        <template:LineTemplate />
        <xaml:AtiXaml />
        <template:LineTemplate />
        <xaml:StiXaml />
    </template:NewFrame.Content>
</template:NewFrame>

<template:NewFrame>
    <template:NewFrame.Content>
        <xaml:ABCXaml />
    </template:NewFrame.Content>
</template:NewFrame>

<template:NewFrame>
    <template:NewFrame.Content>
        <Label Text=""/>
    </template:NewFrame.Content>
</template:NewFrame>

Related

Latest