首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >自定义布局,Xamarin表单。最佳方法

自定义布局,Xamarin表单。最佳方法
EN

Stack Overflow用户
提问于 2018-01-27 19:25:47
回答 2查看 835关注 0票数 2

我是Xamarin.Forms和Xaml的新手。我已经制作了一个自定义控件,我想在整个应用程序中使用它作为自定义背景。该自定义控件是作为contentview创建的,如下所示。

代码语言:javascript
复制
 <ContentView.Content>
    <ScrollView>
        <StackLayout>
            <RelativeLayout Padding="0" BackgroundColor="Teal" VerticalOptions="Start">
                <Image Source="TopBG" BackgroundColor="Purple" Aspect="Fill" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}" />
            </RelativeLayout>
            <Frame Padding="0" Margin="0,-25,0,0" CornerRadius="25" BackgroundColor="{StaticResource Key=Charcoal}">
                <StackLayout Margin="0,0,0,0" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" x:Name="InnerStack">


                    <!--I can insert custom controls here, but htat would determine this custom contentView for one purpose only-->

                </StackLayout>
            </Frame>
        </StackLayout>
    </ScrollView>
</ContentView.Content>

然后在我的ContentPage上实现这个自定义控件:

代码语言:javascript
复制
<ContentPage.Content>

    <CustomLayouts:ContentBackground>

        <!-- I would instead like to be able to add content here, and have it go into the stacklayout of the custom view.
        This way i could utilize the same background but have different content go into it depending on my wishes -->

    </CustomLayouts:ContentBackground>

</ContentPage.Content>

如果我在后面示例中添加一个标签,它只会覆盖所有内容并放置一个标签,但并不是在ContentBackground的指定内部堆栈视图中。

我唯一能想到的就是想办法访问我的自定义contentBackground的InnerStackView,然后访问该堆栈布局的contentBackground属性,然后Children.add(查看)到该堆栈布局。虽然这意味着我将不得不从代码中完成,但我希望在XAML中实现这一行为,因为这对我来说更熟悉。

这是在XAML中实现目标的唯一方法,还是有替代方法?

EN

回答 2

Stack Overflow用户

发布于 2018-01-28 00:26:56

尝试使用ContentProperty.Simple示例:

代码语言:javascript
复制
 [ContentProperty("AddContent")]
 public class YourView: ContentView
 {
    protected ContentView ContentContainer;

    public View AddContent
    {
        get => ContentContainer.Content;
        set => ContentContainer.Content = value;
    } 
    ......
 }

 //in xaml
 <YourView>
   <Label Text="Hello world"/>
 </YourView>
票数 2
EN

Stack Overflow用户

发布于 2018-06-06 06:02:37

如果有人还在尝试这样做,你可以使用ControlTemplate在多个页面或整个应用程序中拥有一个视图。

代码语言:javascript
复制
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.App">
    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="TealTemplate">
                <Grid>
                    ...
                    <BoxView ... />
                    <Label Text="Control Template Demo App"
                           TextColor="White"
                           VerticalOptions="Center" ... />
                    <ContentPresenter ... />
                    <BoxView Color="Teal" ... />
                    <Label Text="(c) Xamarin 2016"
                           TextColor="White"
                           VerticalOptions="Center" ... />
                </Grid>
            </ControlTemplate>
            <ControlTemplate x:Key="AquaTemplate">
                ...
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

这里的神奇之处在于ContentPresenter,你可以将任何东西放在里面都会看起来很好。然后,要使用所需的模板,请将其设置为ContentView.ControlTemplate,如下所示:

代码语言:javascript
复制
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.HomePage">
    <ContentView x:Name="contentView" Padding="0,20,0,0"
                 ControlTemplate="{StaticResource TealTemplate}">
        <StackLayout VerticalOptions="CenterAndExpand">
            <Label Text="Welcome to the app!" HorizontalOptions="Center" />
            <Button Text="Change Theme" Clicked="OnButtonClicked" />
        </StackLayout>
    </ContentView>
</ContentPage>

查看官方文档here

如果您想创建一个可以插入到任何页面上自定义控件/布局,那么您可以使用ContentPresenter创建您自己的ContentView

代码语言:javascript
复制
<!-- Content -->
<ContentPresenter Content="{Binding SomeContent}"/>

其中,SomeContent可以是View类型的BindableProperty

您还可以看到自定义布局here的示例。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48475301

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档