Xamarin.Community.Toolkit 实用的控件！

AvatarView

一般来讲, 系统里面显示一个头像很合理吧, 但是头像如果不存在呢? 你不可能显示一个空白吧, 如果空白的时候显示成用户名称的缩写, 这也是非常合理吧。

所以, 我们可以使用AvatarView 控件, 他可以满足你。想要了解它的工作原理？ 那跟着我往下看吧！

下图展示了一个非常理想的情况, 有头像的显示头像, 没头像的显示名字的缩写。

对应的, ViewModel当中的定义:

public class AvatarViewViewModel : BaseViewModel
     {

          public object[] Items { get; } =
          {

               new { Initials = "AM",  Source = string.Empty,

                    Name = "Andrei Misiukevich" },

               new { Initials = "DO",

                    Source =

                      "https://picsum.photos/500/500?image=472",

                    Name = "David Ortinau" },

               new { Initials = "ST",

                    Source =

                      "https://picsum.photos/500/500?image=473",

                    Name = "Steven Thewissen" },

               new { Initials = "GV",  Source = string.Empty,

                      Name = "Glenn Versweyveld" },

               new { Initials = "JSR", Source = string.Empty,

                      Name = "Javier Suárez Ruiz" },

               new { Initials = "GV",

                    Source =

                      "https://picsum.photos/500/500?image=474",

                    Name = "Gerald Versluis" },

               new { Initials = "XM",

                    Source =

                      "https://picsum.photos/500/500?image=475",

                    Name = "Xamarin Monkey" },

               new { Initials = string.Empty, Source = string.Empty,

                    Name = "Unknown" }
          };

     }

当Source为空, 则会显示其名称, 否则就解析对应地址的图像

对应XAML 模板中 如下所示:

<xct:AvatarView ColorTheme="{x:Static xct:ColorTheme.Jungle}"

                  FontSize="Medium"

                  Size="{Binding Value,

                  Source={x:Reference Slider}}"

                  Text="{Binding Initials}">

    <xct:AvatarView.Source>

        <UriImageSource Uri="{Binding Source}" />

    </xct:AvatarView.Source>

</xct:AvatarView>

此代码中最相关的要点如下：

• Text 属性允许仅在图像不可用时才显示名称缩写。
• 属性 获取要显示的图像。在此特定示例中，由于传递了 URI，因此以 UriImageSource 对象的形式检索它。
• ColorTheme 属性允许分配在 Xamarin 社区工具包中实现的预定义颜色主题之一。

如果没有可用的图像和首字母缩写，则 AvatarView 将仅显示一个 X 字符，这是 Xamarin 的首字母。

MediaElement

该视图允许在应用程序中播放音频和视频。实际上，在其开发过程中，MediaElement 控件包含在 Xamarin.Forms 代码库中，但现在它已移至 Xamarin 社区工具包库。

MediaElement 可以从远程 URI、本地库、嵌入在应用资源中的媒体文件以及本地文件夹中播放媒体内容。

<xct:MediaElement

    x:Name="mediaElement"

    Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"

    ShowsPlaybackControls="True" MediaOpened="OnMediaOpened"

    MediaFailed="OnMediaFailed" MediaEnded="OnMediaEnded"

    HorizontalOptions="Fill" SeekCompleted="OnSeekCompleted" />

MediaElement 视图还公开了一目了然的方法，如“播放”、“停止”和“暂停”，你可以在 C# 代码中调用这些方法来手动控制媒体文件。此外，除其他内容外，此视图还会公开以下事件

• MediaOpened: 当媒体流已通过验证并准备好播放时引发。
• MediaEnded: 当媒体流到达其末尾时引发。
• MediaFailed: 当媒体源上发生错误时引发。
• SeekCompleted: 将复制移动到其他位置时升高。

MediaElement同时是一个非常通用的视图，其最简单的形式，以及一个完全可定制的视图，用于高质量的媒体播放设计。

Shield

Shield 是一种视图，允许以类似徽章的方式显示有关服务状态或号召性用语的信息。盾牌现在非常流行。例如，它们用于在 NuGet、GitHub 和 Azure Pipelines 等网站上显示有关软件状态的信息。

<xct:Shield  
            Subject="C#"
            Status=">=4.5"
            StatusBackgroundColor="DodgerBlue"
            StatusTextColor="White"
            Tapped="OnShieldTapped" />

更多控件

• SnackBar / Toast (显示 Toast 通知和提示栏)
• Popup (弹出窗口)
• TabView (选项卡视图)
• CameraView (允许从设备捕获视频和图像)
• Expander (收缩分组视图)
• RangeSlider (范围数值选择器)
• SideMenuView (侧边的菜单视图)
• ...