Xamarin.Forms - 创建主布局模板的方法？

Question

在 Xamarin.Forms（C# 代码，不是 XAML）中，有没有办法创建可以在多个页面上重复使用的布局模板？例如，我希望在我的移动应用程序中使用持久的页眉和页脚，但我不想在每个页面上都包含它们。许多软件技术（例如 Jade、.NET MVC _Layout.cshtml 文件等）允许创建可以重复使用的布局模板，并且可以将内容“注入”到其中。 Xamarin.Forms 有这样的东西吗？

注意：与this one 相同的问题，但有没有办法在 C# 代码中做到这一点？

Answer 1

Xamarin Forms 2.1 引入了 ControlTemplate 和 TemplatedPage：

http://xamarinhelp.com/xamarin-forms-page-templates/

Xamarin.Forms 控制模板提供了在运行时轻松设置和重新设置应用程序页面主题的能力。

要在应用程序级别定义 ControlTemplate，必须创建一个表示 ControlTemplate 的类。该类应派生自用于模板的布局，如以下代码示例所示：

class TealTemplate : Grid
{
  public TealTemplate ()
  {
    ...
    var contentPresenter = new ContentPresenter ();
    Children.Add (contentPresenter, 0, 1);
    Grid.SetColumnSpan (contentPresenter, 2);
    ...
  }
}

class AquaTemplate : Grid
{
  ...
}

以下代码示例显示了将 TealTemplate 应用于 ContentView 的 ContentPage：

public class HomePageCS : ContentPage
{
  ...
  ControlTemplate tealTemplate = new ControlTemplate (typeof(TealTemplate));
  ControlTemplate aquaTemplate = new ControlTemplate (typeof(AquaTemplate));

 public HomePageCS ()
  {
    var button = new Button { Text = "Change Theme" };
    var contentView = new ContentView {
      Padding = new Thickness (0, 20, 0, 0),
      Content = new StackLayout {
        VerticalOptions = LayoutOptions.CenterAndExpand,
        Children = {
          new Label { Text = "Welcome to the app!", HorizontalOptions = LayoutOptions.Center },
          button
        }
      },
      ControlTemplate = tealTemplate
    };
    ...
    Content = contentView;
  }
}

Answer 2

就你而言，我个人会选择a templated view。

我将与您分享一个示例，因为该示例在发布到 nuget 时没有得到很好的记录，而且您可以找到的大多数文档都在博客上。

PCL：

public class ApplicationHeader : TemplatedView
{
    protected override void OnChildAdded(Element child)
    {
        base.OnChildAdded(child);
        SetInheritedBindingContext(child, BindingContext);
    }

    #region HomeButtonStyle

    public static BindableProperty HomeButtonStyleProperty = BindableProperty.Create<ApplicationHeader, Style>(d => d.HomeButtonStyle, default(Style));

    public Style HomeButtonStyle
    {
        get { return (Style) GetValue(HomeButtonStyleProperty); }
        set { SetValue(HomeButtonStyleProperty, value); }
    }

    #endregion HomeButtonStyle

    #region HomeButtonCommand

    public static BindableProperty HomeButtonCommandProperty = BindableProperty.Create<ApplicationHeader, ICommand>(d => d.HomeButtonCommand, default(ICommand), defaultBindingMode: BindingMode.OneWay);

    public ICommand HomeButtonCommand
    {
        get { return (ICommand) GetValue(HomeButtonCommandProperty); }
        set { SetValue(HomeButtonCommandProperty, value); }
    }

    #endregion HomeButtonCommand

    #region CommandAreaContent


    public static BindableProperty CommandAreaContentProperty = BindableProperty.Create<ApplicationHeader, View>(d => d.CommandAreaContent, default(View), defaultBindingMode: BindingMode.OneWay);

    public View CommandAreaContent
    {
        get { return (View) GetValue(CommandAreaContentProperty); }
        set { SetValue(CommandAreaContentProperty, value); }
    }

    #endregion CommandAreaContent

    #region HeaderTextLine1

    public static BindableProperty HeaderTextLine1Property = BindableProperty.Create<ApplicationHeader, string>(d => d.HeaderTextLine1, default(string), defaultBindingMode: BindingMode.OneWay);

    public string HeaderTextLine1
    {
        get { return (string) GetValue(HeaderTextLine1Property); }
        set { SetValue(HeaderTextLine1Property, value); }
    }

    #endregion HeaderTextLine1

    #region HeaderTextLine2

    public static BindableProperty HeaderTextLine2Property = BindableProperty.Create<ApplicationHeader, string>(d => d.HeaderTextLine2, default(string), defaultBindingMode: BindingMode.OneWay);

    public string HeaderTextLine2
    {
        get { return (string) GetValue(HeaderTextLine2Property); }
        set { SetValue(HeaderTextLine2Property, value); }
    }

    #endregion HeaderTextLine2

    #region HeaderTapCommand

    public static BindableProperty HeaderTapCommandProperty = BindableProperty.Create<ApplicationHeader, ICommand>(d => d.HeaderTapCommand, default(ICommand), defaultBindingMode: BindingMode.OneWay);

    public ICommand HeaderTapCommand
    {
        get { return (ICommand) GetValue(HeaderTapCommandProperty); }
        set { SetValue(HeaderTapCommandProperty, value); }
    }

    #endregion HeaderTapCommand
}

App.xaml

请记住，当前的资源声明必须是为了避免 app.xaml 异常。

                            <controls:EnhancedButton Padding="24,0,24,0" IsVisible="{TemplateBinding HomeButtonCommand, Converter={StaticResource NullToBoolConverter}, ConverterParameter={x:Static x:Boolean.TrueString}}" Style="{StaticResource ButtonThemedDark}" Grid.Column="0" Text="=" Command="{TemplateBinding HomeButtonCommand}"></controls:EnhancedButton>
                            <Grid Grid.Column="1" extensions:GestureExtensions.TapCommand="{TemplateBinding HeaderTapCommand}" BackgroundColor="{StaticResource ColorThemeAccent}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Label Grid.Row="1" Text="{TemplateBinding HeaderTextLine1}" Style="{StaticResource LabelShellHeaderLine1}" IsVisible="{TemplateBinding HeaderTextLine1, Converter={StaticResource NullToBoolConverter}, ConverterParameter={x:Static x:Boolean.TrueString}}"></Label>
                                <Label Grid.Row="2" Text="{TemplateBinding HeaderTextLine2}" Style="{StaticResource LabelShellHeaderLine2}" IsVisible="{TemplateBinding HeaderTextLine2, Converter={StaticResource NullToBoolConverter}, ConverterParameter={x:Static x:Boolean.TrueString}}"></Label>
                            </Grid>
                            <controls:EnhancedContentPresenter Grid.Column="2" Content="{TemplateBinding CommandAreaContent}"></controls:EnhancedContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>