Xamarin.Forms 用户界面——控件——DataPages——控件参考

Xamarin.Forms DataPages Nuget包括一些可以利用数据源绑定的控件。

要在XAML中使用这些控件，请确保已包括命名空间，例如请参见xmlns:pages下面的声明：

<ContentPage    xmlns="http://xamarin.com/schemas/2014/forms"    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    xmlns:pages="clr-namespace:Xamarin.Forms.Pages;assembly=Xamarin.Forms.Pages"    x:Class="DataPagesDemo.Detail">

下面的例子包括DynamicResource项目资源字典中需要存在的参考，以便工作。还有一个如何构建自定义控件的示例

内置控件

• HeroImage
• 列表项

HeroImage

该HeroImage控件有四个属性：

• 文本
• 详情
• 的ImageSource
• 方面

<pages:HeroImage    ImageSource="{ DynamicResource HeroImageImage }"    Text="Keith Ballinger"    Detail="Xamarin"/>

Android的

 

iOS版

 

列表项

该ListItem控件的布局类似于天然iOS和Android列表或表中的行，但它也可以作为一个普通视图。在下面的示例代码中，它显示为托管在一个内部StackLayout，但也可以在数据绑定的列表控件中使用。

有五个属性：

• 标题
• 详情
• 的ImageSource
• PlaceholdImageSource
• 方面

<StackLayout Spacing="0">    <pages:ListItemControl        Detail="Xamarin"        ImageSource="{ DynamicResource UserImage }"        Title="Miguel de Icaza"        PlaceholdImageSource="{ DynamicResource IconImage }"    />

这些屏幕截图显示了ListItem使用Light and Dark主题的iOS和Android平台：

Android的

 

iOS版

 

自定义控件示例

此自定义控件的目标CardView是类似于本机Android CardView。

它将包含三个属性：

• 文本
• 详情
• 的ImageSource

目标是一个自定义控件，看起来像下面的代码（请注意，需要定制 xmlns:local引用当前程序集）：

<local:CardView  ImageSource="{ DynamicResource CardViewImage }"  Text="CardView Text"  Detail="CardView Detail"/>

它应该看起来像下面的截图使用对应于内置的光和黑主题的颜色：

Android的

 

iOS版

 

构建自定义CardView

1. DataView子类
2. 定义字体，布局和边距
3. 创建控件的孩子的样式
4. 创建控制布局模板
5. 添加主题专用资源
6. 设置CardView类的ControlTemplate
7. 将控件添加到页面

DataView子类

C＃子类DataView定义了控件的可绑定属性。

public class CardView : DataView{    public static readonly BindableProperty TextProperty =        BindableProperty.Create ("Text", typeof (string), typeof (CardView), null, BindingMode.TwoWay);    public string Text    {        get { return (string)GetValue (TextProperty); }        set { SetValue (TextProperty, value); }    }    public static readonly BindableProperty DetailProperty =        BindableProperty.Create ("Detail", typeof (string), typeof (CardView), null, BindingMode.TwoWay);    public string Detail    {        get { return (string)GetValue (DetailProperty); }        set { SetValue (DetailProperty, value); }    }    public static readonly BindableProperty ImageSourceProperty =        BindableProperty.Create ("ImageSource", typeof (ImageSource), typeof (CardView), null, BindingMode.TwoWay);    public ImageSource ImageSource    {        get { return (ImageSource)GetValue (ImageSourceProperty); }        set { SetValue (ImageSourceProperty, value); }    }    public CardView()    {    }}

2.定义字体，布局和边距

控制设计人员将把这些值作为自定义控件的用户界面设计的一部分。在需要特定于平台的规格的情况下，使用该OnPlatform元素。

请注意，某些值指的是StaticResources - 这些将在步骤5中定义。

<!-- CARDVIEW FONT SIZES --><OnPlatform x:TypeArguments="x:Double"    Android="15"    iOS="15"    x:Key="CardViewTextFontSize"/><OnPlatform x:TypeArguments="x:Double"    Android="13"    iOS="13"    x:Key="CardViewDetailFontSize"/><OnPlatform    x:TypeArguments="Color"    x:Key="CardViewTextTextColor"    Android="{ StaticResource AndroidCardViewTextTextColor }"    iOS="{ StaticResource iOSCardViewTextTextColor }"/><OnPlatform    x:TypeArguments="Thickness"    x:Key="CardViewTextlMargin"    Android="20,0,20,5"    iOS="12,10,12,4"/><OnPlatform    x:TypeArguments="Color"    x:Key="CardViewDetailTextColor"    Android="{ StaticResource AndroidCardViewDetailTextColor }"    iOS="{ StaticResource iOSCardViewDetailTextColor }"/><OnPlatform    x:TypeArguments="Thickness"    x:Key="CardViewDetailMargin"    Android="20,0,20,20"    iOS="12,0,10,12"/><OnPlatform    x:TypeArguments="Color"    x:Key="CardViewBackgroundColor"    Android="{ StaticResource AndroidCardViewBackgroundColor }"    iOS="{ StaticResource iOSCardViewBackgroundColor }"/><OnPlatform    x:TypeArguments="x:Double"    x:Key="CardViewShadowSize"    Android="5"    iOS="2"/><OnPlatform    x:TypeArguments="x:Double"    x:Key="CardViewCornerRadius"    Android="4"    iOS="0"/><OnPlatform    x:TypeArguments="Color"    x:Key="CardViewShadowColor"    Android="#CDCDD1"    iOS="#CDCDD1"/>

3.为控件的孩子创建样式

引用所有定义的要创建要在自定义控件中使用的子项的元素：

<!-- EXPLICIT STYLES (will be Classes) --><Style TargetType="Label" x:Key="CardViewTextStyle">    <Setter Property="FontSize" Value="{ StaticResource CardViewTextFontSize }" />    <Setter Property="TextColor" Value="{ StaticResource CardViewTextTextColor }" />    <Setter Property="HorizontalOptions" Value="Start" />    <Setter Property="Margin" Value="{ StaticResource CardViewTextlMargin }" />    <Setter Property="HorizontalTextAlignment" Value="Start" /></Style><Style TargetType="Label" x:Key="CardViewDetailStyle">    <Setter Property="HorizontalTextAlignment" Value="Start" />    <Setter Property="TextColor" Value="{ StaticResource CardViewDetailTextColor }" />    <Setter Property="FontSize" Value="{ StaticResource CardViewDetailFontSize }" />    <Setter Property="HorizontalOptions" Value="Start" />    <Setter Property="Margin" Value="{ StaticResource CardViewDetailMargin }" /></Style><Style TargetType="Image" x:Key="CardViewImageImageStyle">    <Setter Property="HorizontalOptions" Value="Center" />    <Setter Property="VerticalOptions" Value="Center" />    <Setter Property="WidthRequest" Value="220"/>    <Setter Property="HeightRequest" Value="165"/></Style>

4.创建控制布局模板

使用上面定义的资源在控件模板中显式声明了自定义控件的可视化设计：

<!--- CARDVIEW --><ControlTemplate x:Key="CardViewControlControlTemplate">  <StackLayout    Spacing="0"    BackgroundColor="{ TemplateBinding BackgroundColor }"  >    <!-- CARDVIEW IMAGE -->    <Image      Source="{ TemplateBinding ImageSource }"      HorizontalOptions="FillAndExpand"      VerticalOptions="StartAndExpand"      Aspect="AspectFill"      Style="{ StaticResource CardViewImageImageStyle }"    />    <!-- CARDVIEW TEXT -->    <Label      Text="{ TemplateBinding Text }"      LineBreakMode="WordWrap"      VerticalOptions="End"      Style="{ StaticResource CardViewTextStyle }"    />    <!-- CARDVIEW DETAIL -->    <Label      Text="{ TemplateBinding Detail }"      LineBreakMode="WordWrap"      VerticalOptions="End"      Style="{ StaticResource CardViewDetailStyle }" />  </StackLayout></ControlTemplate>

5.添加主题专用资源

因为这是一个自定义控件，请添加与您正在使用资源字典的主题相匹配的资源：

光主题颜色

<Color x:Key="iOSCardViewBackgroundColor">#FFFFFF</Color><Color x:Key="AndroidCardViewBackgroundColor">#FFFFFF</Color><Color x:Key="AndroidCardViewTextTextColor">#030303</Color><Color x:Key="iOSCardViewTextTextColor">#030303</Color><Color x:Key="AndroidCardViewDetailTextColor">#8F8E94</Color><Color x:Key="iOSCardViewDetailTextColor">#8F8E94</Color>

黑色主题颜色

<!-- CARD VIEW COLORS -->            <Color x:Key="iOSCardViewBackgroundColor">#404040</Color>            <Color x:Key="AndroidCardViewBackgroundColor">#404040</Color>            <Color x:Key="AndroidCardViewTextTextColor">#FFFFFF</Color>            <Color x:Key="iOSCardViewTextTextColor">#FFFFFF</Color>            <Color x:Key="AndroidCardViewDetailTextColor">#B5B4B9</Color>            <Color x:Key="iOSCardViewDetailTextColor">#B5B4B9</Color>

6.设置CardView类的ControlTemplate

最后，确保在步骤1中创建的C＃类使用步骤4中使用Style Setter元素定义的控件模板

<Style TargetType="local:CardView">    <Setter Property="ControlTemplate" Value="{ StaticResource CardViewControlControlTemplate }" />  ... some custom styling omitted  <Setter Property="BackgroundColor" Value="{ StaticResource CardViewBackgroundColor }" /></Style>

7.将控件添加到页面

CardView现在可以将控件添加到页面。下面的示例显示它主持StackLayout：

<StackLayout Spacing="0">  <local:CardView    Margin="12,6"    ImageSource="{ DynamicResource CardViewImage }"    Text="CardView Text"    Detail="CardView Detail"  /></StackLayout>