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
控件有四个属性:
- 文本
- 详情
- 的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
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
元素。
请注意,某些值指的是StaticResource
s - 这些将在步骤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>