Hands-On Mobile Development with .NET Core

上QQ阅读APP看书，第一时间看更新

Xamarin.Forms view elements

The main view elements used in our application up until now have been Label and Image (while creating the list and details views). Additionally, on the login screen, we used the Entry and Button views. The main difference between these two sets of controls is the fact that, whilst Label and Image are used to display (generally) read-only content, Entry and Button are elements used for user input.

If we take a closer look at Label, there are various properties used to create a customized display of text content to accentuate the calligraphy/typography (referring to the platform imperatives of iOS and UWP) in our design. Developers can not only customize the look and feel of text content, but also create rich text content using Span elements. Spans are analogous to Run elements in WPF and web elements that share the same name (that is, Span). In later versions of Xamarin.Forms, Span are able to recognize gestures, enabling developers to create interactive regions within a single block of text content. In order to utilize Spans, the FormattedText attribute of the label can be used.

In order to further customize (and perhaps apply branding to) an application, custom fonts can also be introduced. In order to include a custom font, each platform requires a different step to be executed.

As a first step, the developer needs to have access to the TFF file for the font, and this file needs to be copied to the platform-specific projects. On iOS, the file(s) need to be set as BundleResource, and on Android as AndroidAsset. On iOS only, custom fonts should be declared as part of the fonts provided by the application entry in the Info.plist file:

At this point, the custom font already used can be added with the FontFamily attribute to the target label; however, the declarations for the font family differ for Android and iOS:

 <Label Text="{Binding Description}">
  <Label.FontFamily>
  <OnPlatform x:TypeArguments="x:String">
  <On Platform="iOS" Value="Ubuntu-Light" />
  <On Platform="Android" Value="Ubuntu-Light.ttf#Ubuntu-
 Light" />
  <On Platform="UWP" Value="Assets/Fonts/Ubuntu-
 Light.ttf#Ubuntu-Light" />
  </OnPlatform>
  </Label.FontFamily>
 </Label>

In order to make it easier to use the font or even apply it to all the labels in the application, the App.xaml file can be used to add it to the application's resources:

 <Application.Resources>
  <ResourceDictionary>
         <!-- Removed for brevity -->
  <OnPlatform x:Key="UbuntuBold" x:TypeArguments="x:String">
  <On Platform="iOS">Ubuntu-Bold</On>
  <On Platform="Android">Ubuntu-Bold.ttf#Ubuntu-Bold</On>
  </OnPlatform>
  <OnPlatform x:Key="UbuntuItalic" x:TypeArguments="x:String">
  <On Platform="iOS">Ubuntu-Italic</On>
  <On Platform="Android">Ubuntu-Italic.ttf#Ubuntu-
 Italic</On>
  </OnPlatform>
  
         <!-- Additional Fonts and Styles -->
  </ResourceDictionary>
 </Application.Resources>

Now we can define either implicit or explicit styles for certain targets:

<Style x:Key="BoldLabelStyle" TargetType="Label">
 <Setter Property="FontFamily" Value="{StaticResource UbuntuBold}" />
</Style>
<!-- Or an implicit style for all labels -->
<!-- 
<Style TargetType="Label">
  <Setter Property="FontFamily" Value="{StaticResource UbuntuRegular}" />
 </Style>
-->

This can be taken one step further to include a font that includes glyphs (for example, FontAwesome) to use labels as menu icons. A simple implementation would be to create a custom control that derives from Label and set up a global implicit style that targets this custom control.

The interactive counterparts of Label are Entry and Editor, which both derive from the InputView abstraction. These controls can be placed in user forms to handle single-line or multi-line text input, respectively. In order to improve the user experience, both of these controls expose the Keyboard property, which can be used to set the appropriate type of software keyboard for user entries (for example, Chat, Default, Email, Numeric, Telephone, and so on).

The rest of the user input controls are more scenario-specific, such as BoxView, Slider, Map, and WebView.

It is also important to mention that there are three additional user input controls, namely, Picker, DatePicker, and TimePicker. The pickers represent the combination of the data field that is displayed on the form and the picker dialog used once the data field comes into focus.

If the customization of these controls does not satisfy the UX requirements, Xamarin.Forms allows developers to reference and use native controls.