Searching Page 页面组成范例

---

该文章以 WorkOrdersPage.xaml 为例。

整体预览图

结构

页面继承于 SearchingPage

<c:SearchingPage ...
                 xmlns:c="clr-namespace:Fleet.Mobile.Containers"
                 xmlns:wo="clr-namespace:Fleet.Mobile.WorkOrder"
                 x:TypeArguments="wo:WorkOrderListItem"
                 Style="{StaticResource LightGrayVisualElement}"
                 ...>
    <!-- 列表元素类型为 wo:WorkOrderListItem -->
    ...
</c:SearchingPage>

BackgroundColor 为统一样式，如无特殊情况均使用该背景色。

搜索框采用统一控件 SearchView

<c:SearchView SearchText="{Binding SearchText}" IsBorderVisible="False"
              SearchedCommand="{Binding SearchedCommand}"
              TextChangedCommand="{Binding SearchTextChangedCommand}"/>

SearchText、SearchedCommand、SearchTextChangedCommand 均为父类提供的绑定属性，不需要自行添加。

该页面列表支持下拉刷新，外层包裹 RefreshView 元素

<RefreshView IsRefreshing="{Binding IsLoading}" Command="{Binding RefreshCommand}">
    ...
</RefreshView>

IsLoading 和 RefreshCommand 均为父类提供属性，无需自行添加。

列表使用 CollectionView 元素来呈现

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Data}"
                RemainingItemsThreshold="6"
                RemainingItemsThresholdReachedCommand="{Binding ItemsReachedComand}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="wo:WorkOrderListItem">
            <Border Style="{StaticResource SettingsGroup}" Margin="10,10,10,0">
                ...
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

protected override CollectionView MainCollectionView => collectionView;

x:Name 用于实现 MainCollectionView 接口，以实现点击页面头部时自动滚动至首行，提升用户使用体验。

Data 为父类提供的显示数据对象。

ItemsReachedComand 为父类提供的列表数据懒加载指令，以提升列表性能。

注：RemainingItemsThreshold、RemainingItemsThresholdReachedCommand 非必须，数据量不大时可以不启用以获得完整列表体验。

SettingsGroup 样式为圆角 Border 的统一风格样式，除单行内容列表以外都该应用该样式。

    <SwipeView>
        <SwipeView.RightItems>
            <SwipeItem Text="..."/>
        </SwipeView.RightItems>
        <Grid Padding="10" Style="{StaticResource LightGrid}">
            ...
        </Grid>
    </SwipeView>

由于该列表项允许附加指令，所以使用 SwipeView 实现左划显示。

Grid 为列表项正文显示部分，背景应采用 LightGrid 样式。

使用 ElementNetworkFailed 元素来显示网络异常标识

<c:ElementNetworkFailed IsVisible="{Binding IsNetworkFailed}"/>

IsNetworkFailed 为父类实现的接口属性，无需自行添加。

过滤/功能面板的实现

<c:ElementMask x:Name="gridMask" Opacity="0" IsVisible="False" Clicked="Filter_Clicked"/>
<Grid x:Name="gridFilter" ScaleY="1" Opacity="1" IsVisible="False"
      Style="{StaticResource LightGrayVisualElement}">
    ...
    <c:ElementBorder/>
</Grid>

x:Name 用于实现 FilterMask 和 FilterPanel 接口。

c:ElementMask 用于显示遮罩层，Clicked 事件用于点击关闭面板。

Grid 背景颜色请使用统一样式。

c:ElementBorder 用于显示底部分隔线。

protected override double FilterHeight => 610;
protected override VisualElement FilterPanel => gridFilter;
protected override VisualElement FilterMask => gridMask;

void Filter_Clicked(object sender, EventArgs e)
{
    // 面板的打开和关闭均调用该函数
    UpdateFilter();
}

数据相关

实现 DoGetDataAsync 抽象方法来获取数据。

protected override async Task<IEnumerable<WorkOrderListItem>> DoGetDataAsync(bool force, CancellationToken token)
{
    ...
}

页面有搜索及排序的需求时，可分别实现 DoSearch 和 DoSort 虚函数。

protected override IEnumerable<WorkOrderListItem> DoSearch(IEnumerable<WorkOrderListItem> data, string searchKey)
{
    ...
}

protected override IEnumerable<WorkOrderListItem> DoSort(IEnumerable<WorkOrderListItem> data)
{
    ...
}