Xamarin.Forms UI Controls - Building the Logify Client App (Part 5) - DrawerReportsFilterView.xaml and ReportsFilterView.xaml

DrawerReportsFilterView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<dxn:DrawerPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:dxn="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
                xmlns:views="clr-namespace:Logify.Views"
                xmlns:editors="clr-namespace:DevExpress.XamarinForms.Editors;assembly=DevExpress.XamarinForms.Editors"
                BackgroundColor="{DynamicResource BackgroundThemeColor}"
                DrawerPosition="Right"
                DrawerBehavior="Push"
                DrawerWidth="0.9*"
                DrawerContentHeight="*"
                NavigationPage.HasNavigationBar="False"
                x:Class="Logify.Views.DrawerReportsFilterView">

    <dxn:DrawerPage.DrawerContent>
        <views:ReportsFilterView x:Name="reportsFilterView" />
    </dxn:DrawerPage.DrawerContent>

    <dxn:DrawerPage.MainContent>
        <NavigationPage>
            <x:Arguments>
                <views:ReportsView>
                    <NavigationPage.TitleView>
                        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <Label AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" Text="REPORTS" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" />
                            <StackLayout AbsoluteLayout.LayoutBounds="1,0.5,40,24" AbsoluteLayout.LayoutFlags="PositionProportional">
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Handle_FilterButtonClicked" />
                                </StackLayout.GestureRecognizers>
                                <editors:IconView ImageSource="Filter.svg" ForegroundColor="{DynamicResource TitleIconColor}" WidthRequest="24" HeightRequest="24" HorizontalOptions="End">
                                    <editors:IconView.Margin>
                                        <OnPlatform x:TypeArguments="Thickness" Android="0,0,16,0" iOS="0,0,4,0" />
                                    </editors:IconView.Margin>
                                </editors:IconView>
                            </StackLayout>
                        </AbsoluteLayout>
                    </NavigationPage.TitleView>
                </views:ReportsView>
            </x:Arguments>
        </NavigationPage>
    </dxn:DrawerPage.MainContent>

</dxn:DrawerPage>

ReportsFilterView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Grid
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dxg="clr-namespace:DevExpress.XamarinForms.DataGrid;assembly=DevExpress.XamarinForms.Grid"
    xmlns:vm="clr-namespace:Logify.ViewModels"
    xmlns:locals="clr-namespace:Logify.Views"
    xmlns:controls="clr-namespace:Logify.Controls"
    xmlns:converters="clr-namespace:Logify.Services.Converters"
    xmlns:editors="clr-namespace:DevExpress.XamarinForms.Editors;assembly=DevExpress.XamarinForms.Editors"
    x:Name="reportsFilterView"    
    BackgroundColor="{DynamicResource FiltersBackgroundColor}"
    x:DataType="vm:ReportsFilterViewModel"
    x:Class="Logify.Views.ReportsFilterView"
    Padding="0,20">

    <Grid.BindingContext>
        <vm:ReportsFilterViewModel/>
    </Grid.BindingContext>
    
    <Grid.Resources>
        <converters:BoolToResourceConverter x:Key="selectedToLabelColorConverter"
            FalseSource="{DynamicResource FiltersTextSecondaryColor}"
            TrueSource="{DynamicResource FiltersTextMainColor}"/>

        <converters:BoolToResourceConverter x:Key="selectedToIconColorConverter"
            FalseSource="{DynamicResource FiltersBackgroundColor}"
            TrueSource="{DynamicResource FiltersTextSecondaryColor}"/>

        <Style x:Key="FilterLabelsStyle" TargetType="Label">
            <Setter Property="FontFamily" Value="{StaticResource NormalFont}"/>
            <Setter Property="TextColor" Value="{DynamicResource FiltersTextSecondaryColor}"/>
            <Setter Property="Margin" Value="0"/>
        </Style>
        <Style x:Key="FilterLabelsBoldStyle" TargetType="Label" BasedOn="{StaticResource FilterLabelsStyle}">
            <Setter Property="FontFamily" Value="{StaticResource BoldFont}"/>
        </Style>
        <Style TargetType="controls:PickerView">
            <Setter Property="PositiveButtonText" Value="OK"/>
            <Setter Property="PositiveButtonColor" Value="{DynamicResource CardHeaderColor}"/>
            <Setter Property="NegativeButtonText" Value="Cancel"/>
            <Setter Property="NegativeButtonColor" Value="{DynamicResource CardExceptionMessageColor}"/>
            <Setter Property="FontSize" Value="{DynamicResource NormalFontSize}"/>
            <Setter Property="PlaceholderColor" Value="{DynamicResource FiltersTextMainColor}"/>
            <Setter Property="FontAttributes" Value="Bold"/>
            <Setter Property="HeightRequest" Value="36"/>
            <Setter Property="TitleColor" Value="{DynamicResource FiltersTextMainColor}"/>
        </Style>

    </Grid.Resources>
   
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="1"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" HeightRequest="28" Margin="24,0" IsVisible="{Binding Source={x:Static vm:SubscriptionsViewModel.Instance}, Path=IsMultiItems}">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0" Style="{StaticResource FilterLabelsBoldStyle}" Text="SUBSCRIPTION" FontAttributes="Bold" VerticalOptions="Center"/>

        <controls:PickerView Grid.Column="1" Title="SUBSCRIPTION" x:Name="subscriptionsPicker"
            ItemsSource="{Binding Source={x:Static vm:SubscriptionsViewModel.Instance}, Path=Items}"
            SelectedItem="{Binding Source={x:Static vm:SubscriptionsViewModel.Instance}, Path=SelectedItem, Mode=TwoWay}"/>

    </Grid>

    <Grid Grid.Row="1" HeightRequest="28" Margin="24,0" IsVisible="{Binding Source={x:Static vm:TeamsViewModel.Instance}, Path=IsMultiItems}">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0" Style="{StaticResource FilterLabelsBoldStyle}" Text="TEAM" FontAttributes="Bold" VerticalOptions="Center"/>

        <controls:PickerView Grid.Column="1" Title="TEAM" x:Name="teamsPicker"
            ItemsSource="{Binding Source={x:Static vm:TeamsViewModel.Instance}, Path=Items}"
            SelectedItem="{Binding Source={x:Static vm:TeamsViewModel.Instance}, Path=SelectedItem, Mode=TwoWay}" />

    </Grid>
    <BoxView Grid.Row="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Color="{DynamicResource FiltersStatusItemBorderColor}"/>
    <StackLayout x:Name="appsStatusStack" Grid.Row="3" Spacing="15">
        <Grid Margin="24,10,24,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="28"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Style="{StaticResource FilterLabelsBoldStyle}" FontAttributes="Bold" Text="APPLICATIONS"/>
            <dxg:DataGridView
                Grid.Row="1"
                x:Name="grid"
                RowTapCommand="{Binding ApplicationTapCommand}"
                ItemsSource="{Binding Applications}"
                BackgroundColor="Transparent"
                HorizontalOptions="Fill"
                VerticalOptions="FillAndExpand"
                IsVerticalScrollBarVisible="False"
                AllowSort="false"
                IsColumnHeaderVisible="false"
                SelectionMode="None"
                x:DataType="{x:Null}">
                <dxg:DataGridView.CellStyle>
                    <dxg:CellStyle BackgroundColor="Transparent" HorizontalLineThickness="0" Padding="0" BorderColor="Transparent" />
                </dxg:DataGridView.CellStyle>
                <dxg:DataGridView.Columns>
                    <dxg:TemplateColumn>
                        <dxg:TemplateColumn.DisplayTemplate>
                            <DataTemplate>
                                <Grid HeightRequest="30" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto"/>
                                        <ColumnDefinition Width="24"/>
                                    </Grid.ColumnDefinitions>
                                    <Label
                                        Grid.Column="0"
                                        Style="{StaticResource FilterLabelsStyle}"
                                        VerticalOptions="Center"
                                        Text="{Binding Item.Name}"
                                        TextColor="{Binding Item.Selected, Converter={StaticResource selectedToLabelColorConverter}}"/>
                                    <editors:IconView
                                        Grid.Column="1"
                                        ImageSource="cross.svg"
                                        ForegroundColor="{Binding Item.Selected, Converter={StaticResource selectedToIconColorConverter}}"
                                        WidthRequest="10"
                                        HeightRequest="10"
                                        HorizontalOptions="Center"
                                        VerticalOptions="Center"/>
                                </Grid>
                            </DataTemplate>
                        </dxg:TemplateColumn.DisplayTemplate>
                    </dxg:TemplateColumn>
                </dxg:DataGridView.Columns>
            </dxg:DataGridView>
        </Grid>
        <Grid x:Name="statusGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="1"/>
                <RowDefinition Height="38"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <BoxView Grid.Row="0" x:Name="statusDivider" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Color="{DynamicResource FiltersStatusItemBorderColor}"/>
            <Label WidthRequest="350" Margin="24,10" Grid.Row="1" Style="{StaticResource FilterLabelsBoldStyle}" Text="STATUS FILTER" FontAttributes="Bold"/>
            <ScrollView
                Grid.Row="2"
                Margin="8,0,6,0"
                VerticalOptions="FillAndExpand"
                HorizontalScrollBarVisibility="Never"
                VerticalScrollBarVisibility="Never">
                <FlexLayout
                    x:Name="statusSelector"
                    Direction="Row"
                    Wrap="Wrap"
                    FlowDirection="LeftToRight"
                    AlignContent="Start"
                    JustifyContent="Start"
                    AlignItems="Start"
                    BindableLayout.ItemsSource="{Binding Statuses}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="vm:StatusInfo">
                            <locals:ReportFilterStatus Status="{Binding Status}" IsSelected="{Binding Selected}" Margin="4,4"
                                SelectedChangedCommand="{Binding BindingContext.SelectedChangedCommand, Source={x:Reference reportsFilterView}}"/>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>
            </ScrollView>
        </Grid>
    </StackLayout>
</Grid>