Xamarin.Forms UI Controls - Building the Logify Client App (Part 6) - ReportsDetailPage and templates

CardBaseReportDetailView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="Logify.Mobile.Views.ReportDetailTemplates.CardBaseReportDetailView"
             CompressedLayout.IsHeadless="True">
    <ContentView.Content>
        <AbsoluteLayout
            Padding="5,0"
            CompressedLayout.IsHeadless="True">
            <Frame
                AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="All"
                Style="{DynamicResource CardFrameStyle}">
                <Grid Margin="0,0,0,2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="45"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Label
                        Grid.Row="0"
                        Text="{Binding CardHeader}"
                        Style="{DynamicResource CardHeaderStyle}"/>
                    <ContentView                        
                        x:Name="cardContent"
                        Margin="16,0"
                        Grid.Row="1"
                        CompressedLayout.IsHeadless="True"/>
                </Grid>
           </Frame>
           <ContentView
               AbsoluteLayout.LayoutBounds="1, 0, -1, -1"
               AbsoluteLayout.LayoutFlags="PositionProportional"
               x:Name="addedContent"/>
       </AbsoluteLayout>
    </ContentView.Content>
</ContentView>

CardBaseReportDetailView.xaml.cs

using Xamarin.Forms;

namespace Logify.Mobile.Views.ReportDetailTemplates {
    public partial class CardBaseReportDetailView : ContentView {
        public View CardContent {
            get { return cardContent.Content; }
            set { cardContent.Content = value; }
        }
        public Thickness CardContentMargin {
            get { return cardContent.Margin; }
            set { cardContent.Margin = value; }
        }
        public View AddedContent {
            get { return addedContent.Content; }
            set { addedContent.Content = value; }
        }
        public CardBaseReportDetailView() {
            InitializeComponent();            
        }
    }
}

CommentsDetailView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<templates:CardBaseReportDetailView xmlns="http://xamarin.com/schemas/2014/forms"
                                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                                    xmlns:templates="clr-namespace:Logify.Mobile.Views.ReportDetailTemplates"
                                    xmlns:editors="clr-namespace:DevExpress.XamarinForms.Editors;assembly=DevExpress.XamarinForms.DemoEditors"
                                    xmlns:vm="clr-namespace:Logify.Mobile.ViewModels.ReportDetail"
                                    x:DataType="vm:CommentsDetailInfoContainer"
                                    x:Class="Logify.Mobile.Views.ReportDetailTemplates.CommentsDetailView">
    <templates:CardBaseReportDetailView.CardContentMargin>
        <OnPlatform x:TypeArguments="Thickness" Android="16,0" iOS="11,0" />
    </templates:CardBaseReportDetailView.CardContentMargin>
    <templates:CardBaseReportDetailView.AddedContent>
        <editors:ContentButton x:Name="saveButton"
                               Command="{Binding SaveCommentsCommand}"
                               CommandParameter="{Binding Text, Source={x:Reference textEdit}}"
                               Clicked="SaveButton_Clicked"
                               BackgroundColor="{DynamicResource CardHeaderColor}"
                               PressedBackgroundColor="{DynamicResource CardHeaderPressedColor}">
            <AbsoluteLayout CompressedLayout.IsHeadless="True">
                <editors:IconView x:Name="saveIcon"
                                  AbsoluteLayout.LayoutBounds="0,0,1,1"
                                  AbsoluteLayout.LayoutFlags="All"
                                  ImageSource="Save.svg"
                                  WidthRequest="20"
                                  HeightRequest="20"
                                  Margin="10"
                                  IsVisible="False"/>
                <editors:IconView x:Name="editIcon"
                                  AbsoluteLayout.LayoutBounds="0,0,1,1"
                                  AbsoluteLayout.LayoutFlags="All"
                                  ImageSource="Edit.svg"
                                  WidthRequest="20"
                                  HeightRequest="20"
                                  Margin="10"/>
            </AbsoluteLayout>
        </editors:ContentButton>
    </templates:CardBaseReportDetailView.AddedContent>
    <templates:CardBaseReportDetailView.CardContent>
        <Editor x:Name="textEdit"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                Style="{DynamicResource CardTextEditStyle}"
                TextChanged="TextEdit_TextChanged"
                Text="{Binding Comments}"/>
    </templates:CardBaseReportDetailView.CardContent>
</templates:CardBaseReportDetailView>

CommentsDetailView.xaml.cs

using System;
using Logify.Mobile.ViewModels.ReportDetail;
using Xamarin.Forms;

namespace Logify.Mobile.Views.ReportDetailTemplates {
    public partial class CommentsDetailView : CardBaseReportDetailView {
        public bool SaveMode { get; set; }
        public CommentsDetailView() {
            InitializeComponent();
            this.BindingContextChanged += CommentsDetailView_BindingContextChanged;
            
        }

        private void CommentsDetailView_BindingContextChanged(object sender, EventArgs e) {
            if (this.BindingContext is CommentsDetailInfoContainer container) {
                container.PropertyChanged += CommentsDetailView_PropertyChanged;
            }
        }

        private void CommentsDetailView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
            if(e.PropertyName == nameof(CommentsDetailInfoContainer.IsSelected)) {
                textEdit.Unfocus();
            }
        }

        private void SaveButton_Clicked(object sender, EventArgs e) {
            if (SaveMode) {
                textEdit.Unfocus();
            } else {
                textEdit.Focus();
            }
            ToggleSaveMode();
        }
        private void TextEdit_TextChanged(object sender, TextChangedEventArgs e) {
            if (editIcon.IsVisible && e.OldTextValue != null) {
                ToggleSaveMode();
            }
        }
        void ToggleSaveMode() {
            SaveMode = !SaveMode;
            editIcon.IsVisible = !SaveMode;
            saveIcon.IsVisible = SaveMode;
        }
    }
}

KeyValueReportDetailView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<templates:CardBaseReportDetailView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    xmlns:templates="clr-namespace:Logify.Mobile.Views.ReportDetailTemplates"
    xmlns:converters="clr-namespace:Logify.Mobile.Services.Converters"
    xmlns:vm="clr-namespace:Logify.Mobile.ViewModels.ReportDetail"
    x:Class="Logify.Mobile.Views.ReportDetailTemplates.KeyValueReportDetailView"
    x:DataType="vm:KeyValueReportDetailInfoContainer"
    CompressedLayout.IsHeadless="True">
    <ContentView.Resources>
        <converters:ValueToFormattedStringConverter x:Key="valuesConverter" DefaultStyle="{StaticResource SpanCardKVValueStyle}" HyperLinkStyle="{StaticResource CardHyperLinkStyle}" />
        <Style x:Key="ListViewStyle" TargetType="{x:Type ListView}">
            <Setter Property="HasUnevenRows" Value="True" />
            <Setter Property="SelectionMode" Value="None" />
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="SeparatorColor" Value="Transparent" />
            <Setter Property="SeparatorVisibility" Value="None" />
        </Style>
    </ContentView.Resources>
    <templates:CardBaseReportDetailView.CardContent>
        <ListView ItemsSource="{Binding Values}"
                  Style="{StaticResource ListViewStyle}"
                  ios:ListView.RowAnimationsEnabled="False">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="vm:KeyValueProperty">
                    <ViewCell ios:Cell.DefaultBackgroundColor="Transparent">
                        <Grid ColumnSpacing="15" Padding="0,5" CompressedLayout.IsHeadless="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.37*" />
                                <ColumnDefinition Width="0.63*" />
                            </Grid.ColumnDefinitions>
                            <Label
                                Grid.Column="0"
                                HorizontalTextAlignment="Start"
                                VerticalOptions="FillAndExpand"
                                VerticalTextAlignment="Start"
                                MinimumWidthRequest="85"
                                HorizontalOptions="StartAndExpand"
                                Style="{DynamicResource CardKVKeyStyle}"
                                Text="{Binding Key}"/>
                            <Label
                                Grid.Column="1"
                                VerticalTextAlignment="Start"
                                VerticalOptions="FillAndExpand"
                                MinimumWidthRequest="200"
                                HorizontalTextAlignment="Start"
                                HorizontalOptions="StartAndExpand"
                                Style="{DynamicResource CardKVValueStyle}"
                                FormattedText="{Binding Value, Converter={StaticResource valuesConverter}}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </templates:CardBaseReportDetailView.CardContent>
</templates:CardBaseReportDetailView>

KeyValueReportDetailView.xaml.cs

namespace Logify.Mobile.Views.ReportDetailTemplates {
    public partial class KeyValueReportDetailView : CardBaseReportDetailView {
        public KeyValueReportDetailView() {
            InitializeComponent();
        }
    }
}

ReportDetailPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:navigation="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
             xmlns:templates="clr-namespace:Logify.Mobile.Views.ReportDetailTemplates"
             xmlns:controls="clr-namespace:Logify.Mobile.Controls"
             xmlns:converters="clr-namespace:Logify.Mobile.Services.Converters"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             xmlns:editors="clr-namespace:DevExpress.XamarinForms.Editors;assembly=DevExpress.XamarinForms.DemoEditors"
             xmlns:vm="clr-namespace:Logify.Mobile.ViewModels.ReportDetail"
             ios:Page.UseSafeArea="true"
             BackgroundColor="{DynamicResource BackgroundThemeColor}"
             x:DataType="vm:ReportDetailViewModel"
             NavigationPage.BackButtonTitle=""             
             x:Class="Logify.Mobile.Views.ReportDetailPage">
    <NavigationPage.TitleView>
        <Grid ColumnSpacing="0" RowSpacing="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition>
                    <ColumnDefinition.Width>
                        <OnPlatform x:TypeArguments="GridLength" Android="40" iOS="32"/>
                    </ColumnDefinition.Width>
                </ColumnDefinition>
            </Grid.ColumnDefinitions>
            <controls:PickerView Grid.Column="0"
                                 x:Name="picker"
                                 HorizontalOptions="FillAndExpand"
                                 VerticalOptions="Center"
                                 FontFamily="{StaticResource BoldFont}"
                                 FontAttributes="Bold"
                                 FontSize="{DynamicResource NormalFontSize}"
                                 BackgroundColor="{DynamicResource PickerBackgroudColor}"
                                 BorderColor="{DynamicResource PickerBorderColor}"
                                 Title="Report Status"
                                 PositiveButtonText="OK"
                                 PositiveButtonColor="{DynamicResource CardHeaderColor}"
                                 NegativeButtonText="Cancel"
                                 NegativeButtonColor="{DynamicResource CardExceptionMessageColor}"
                                 ItemsSource="{Binding Statuses}"
                                 SelectedItem="{Binding SelectedReportStatus, Mode=TwoWay}"
                                 Margin="0"
                                 IsVisible="false">

                <controls:PickerView.Margin>
                    <OnPlatform x:TypeArguments="Thickness" Android="0,5,6,8" iOS="0,4,4,4"/>
                </controls:PickerView.Margin>

            </controls:PickerView>

            <editors:IconView Grid.Column="1"
                              x:Name="rawButton"
                              Margin="0,0,15,0"
                              HorizontalOptions="End"
                              VerticalOptions="Center"
                              WidthRequest="24"
                              HeightRequest="24"
                              ForegroundColor="{DynamicResource TitleIconColor}"
                              ImageSource="RawReport.svg">

                <editors:IconView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OpenRawReportPage"/>
                </editors:IconView.GestureRecognizers>

            </editors:IconView>

            <editors:IconView Grid.Column="2"
                              x:Name="infoButton"
                              HorizontalOptions="Center"
                              VerticalOptions="Center"
                              WidthRequest="24"
                              HeightRequest="24"
                              ForegroundColor="{DynamicResource TitleIconColor}"
                              ImageSource="Info.svg">

                <editors:IconView.Margin>
                    <OnPlatform x:TypeArguments="Thickness" Android="0,0,16,0" iOS="0"/>
                </editors:IconView.Margin>

                <editors:IconView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OpenDetailInfoPage"/>
                </editors:IconView.GestureRecognizers>

            </editors:IconView>
        </Grid>
    </NavigationPage.TitleView>

    <ContentPage.Resources>
        <converters:BoolToObjectConverter x:Key="selectedIconConverter"
                                          FalseSource="Circle.svg"
                                          TrueSource="SelectedCircle.svg"/>

        <DataTemplate x:Key="headerItemTemplate">
            <editors:IconView WidthRequest="14" 
                              HeightRequest="14"
                              VerticalOptions="Center"
                              HorizontalOptions="Center"
                              ImageSource="{Binding IsSelected, Converter = {StaticResource selectedIconConverter}}"/>
        </DataTemplate>

        <templates:ReportDetailTemplateSelector x:Key="reportDetailTemplateSelector"
                                                KeyValueTemplate="{StaticResource keyValueTemplate}"
                                                StackedTemplate="{StaticResource stackedTemplate}"
                                                SimpleListTemplate="{StaticResource simpleListTemplate}"
                                                CommentsTemplate="{StaticResource commentsTemplate}"
                                                TabularTemplate="{StaticResource tabularTemplate}"/>

    </ContentPage.Resources>

    <AbsoluteLayout>

        <ActivityIndicator x:Name="activity"
                           AbsoluteLayout.LayoutBounds="0.5,0.5,0.15,0.15"
                           AbsoluteLayout.LayoutFlags="All"
                           IsRunning="True"
                           IsEnabled="True"
                           IsVisible="True"
                           Color="{DynamicResource CardHeaderColor}"
                           BackgroundColor="Transparent"/>

        <controls:FloatingButtonContainer AbsoluteLayout.LayoutBounds="0,0,1,1"
                                          AbsoluteLayout.LayoutFlags="All"
                                          x:Name="floatingButtonContainer"
                                          MakePublicLinkTapped="MakePublicLink"
                                          CopyLinkTapped="CopyLink"
                                          ScrollWrapTapped="ScrollWrapInnerContent"
                                          BeforeActionButtonsShow="BeforeShowButtonsMenu"
                                          IsVisible="False">

            <controls:FloatingButtonContainer.ContentLayer>
                <Grid BackgroundColor="{DynamicResource SecondaryBackgroundColor}"
                      AbsoluteLayout.LayoutBounds="0,0,1,1"
                      AbsoluteLayout.LayoutFlags="All"
                      VerticalOptions="FillAndExpand"
                      HorizontalOptions="FillAndExpand"
                      Padding="10,20,10,0">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <Label Grid.Row="0"
                           Text="{Binding AppName}"
                           FontSize="{DynamicResource  TitleFontSize}"
                           FontFamily="{StaticResource BoldFont}"
                           FontAttributes="Bold"
                           Margin="5,0"/>

                    <navigation:TabView Grid.Row="1"
                                        x:Name="tabControl"
                                        ItemsSource="{Binding Cards}"
                                        HeaderPanelHeight="32"
                                        HeaderPanelIndent="0"
                                        ItemHeaderWidth="*"
                                        ItemHeaderMinWidth="20"
                                        ItemHeaderMaxWidth="30"
                                        ItemHeaderTemplate="{StaticResource headerItemTemplate}"
                                        HeaderPanelContentAlignment="Start"
                                        ItemTemplate="{StaticResource reportDetailTemplateSelector}"
                                        IsHeaderPanelShadowVisible="False"
                                        IsSelectedItemIndicatorVisible="False"
                                        HeaderPanelBackgroundColor="Transparent"
                                        HeaderPanelPosition="Bottom"/>

                </Grid>
            </controls:FloatingButtonContainer.ContentLayer>
        </controls:FloatingButtonContainer>
    </AbsoluteLayout>
</ContentPage>

ReportDetailPage.xaml.cs

using System;
using System.Threading.Tasks;
using DevExpress.XamarinForms.Navigation;
using Logify.Mobile.ViewModels;
using Logify.Mobile.ViewModels.ReportDetail;
using Xamarin.Forms;

namespace Logify.Mobile.Views {
    public partial class ReportDetailPage : ContentPage {
        ReportDetailViewModel model;
        
        public ReportDetailPage() {
            InitializeComponent();

            this.tabControl.PropertyChanging += TabControl_PropertyChanging;
            this.tabControl.PropertyChanged += TabControl_PropertyChanged;
        }
        
        public ReportDetailPage(ReportViewModel reportViewModel) : this() {
            Task.Run(async () => {
                var modelCreator = new ReportDetailViewModelCreator();
                this.model = await modelCreator.CreateModel(reportViewModel);
                Device.BeginInvokeOnMainThread(() => {
                    BindingContext = this.model;
                    ChangeSelectedIndexIfNeeded(nameof(TabView.SelectedItemIndex), true);
                    floatingButtonContainer.IsVisible = true;
                    picker.IsVisible = true;
                    activity.IsRunning = false;
                    activity.IsEnabled = false;
                    activity.IsVisible = false;
                });
            });
        }
        protected override void OnAppearing() {
            base.OnAppearing();
            rawButton.IsEnabled = true;
            infoButton.IsEnabled = true;
        }
        void TabControl_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
            ChangeSelectedIndexIfNeeded(e.PropertyName, true);
        }
        void TabControl_PropertyChanging(object sender, PropertyChangingEventArgs e) {
            ChangeSelectedIndexIfNeeded(e.PropertyName, false);
        }

        void ChangeSelectedIndexIfNeeded(string propertyName, bool select) {
            if (propertyName == nameof(TabView.SelectedItemIndex)) {
                this.model?.ChangeSelectedIndex(this.tabControl.SelectedItemIndex, select);
            }
        }
        void OpenRawReportPage(object sender, EventArgs e) {
            if (this.model == null)
                return;
            (sender as VisualElement).IsEnabled = false;
            infoButton.IsEnabled = false;
            if (this.model != null) {
                Device.BeginInvokeOnMainThread(async () => {
                    await Navigation.PushAsync(new RawReportPage(model.ApiKey, model.ReportId));
                });
            }
        }
        void OpenDetailInfoPage(object sender, EventArgs e) {
            if (this.model == null)
                return;
            (sender as VisualElement).IsEnabled = false;
            rawButton.IsEnabled = false;
            Device.BeginInvokeOnMainThread(async () => {
                await Navigation.PushAsync(new DetailInfoPage(new DetailInfoModel(this.model.ApiKey)));
            });
        }
        void MakePublicLink(object sender, EventArgs e) {
            this.model?.MakePublicLink();
            DisplayAlert(String.Empty, "Public Link copied!", "Ok");
        }
        void CopyLink(object sender, EventArgs e) {
            this.model?.CopyLink();
            DisplayAlert(String.Empty, "Link copied!", "Ok");
        }
        void ScrollWrapInnerContent(object sender, EventArgs e) {
            this.model?.ChangeScrollWrapContentStatus();
            floatingButtonContainer.SetScrollWrapButtonText(this.model?.ScrollWrapButtonText);
        }
        void BeforeShowButtonsMenu(object sender, EventArgs e) {
            if (model != null) {
                floatingButtonContainer.ToggleScrollWrapButton(this.model.HasScrollWrapContent());
            }
        }
    }
}

ReportDetailTemplateSelector.cs

using Logify.Mobile.Models;
using Logify.Mobile.ViewModels.ReportDetail;
using Xamarin.Forms;

namespace Logify.Mobile.Views.ReportDetailTemplates {
    public class ReportDetailTemplateSelector: DataTemplateSelector {
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container) {
            if (!(item is ReportDetailInfoContainerBase infoContainer))
                return null;

            switch (infoContainer.CardType) {
                case CardType.KeyValue: return KeyValueTemplate;
                case CardType.Stacked: return StackedTemplate;
                case CardType.SimpleList: return SimpleListTemplate;
                case CardType.Comments: return CommentsTemplate;
                case CardType.Tabular: return TabularTemplate;
                default: return KeyValueTemplate;
            }
        }
        public DataTemplate KeyValueTemplate { get; set; }
        public DataTemplate StackedTemplate { get; set; }
        public DataTemplate SimpleListTemplate { get; set; }
        public DataTemplate CommentsTemplate { get; set; }
        public DataTemplate TabularTemplate { get; set; }
    }
}

SimpleListReportDetailView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<templates:CardBaseReportDetailView xmlns="http://xamarin.com/schemas/2014/forms" 
                                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                                    xmlns:templates="clr-namespace:Logify.Mobile.Views.ReportDetailTemplates"
                                    xmlns:controls="clr-namespace:Logify.Mobile.Controls"
                                    xmlns:vm="clr-namespace:Logify.Mobile.ViewModels.ReportDetail"
                                    x:DataType="vm:SimpleListReportDetailInfoContainer"
                                    x:Class="Logify.Mobile.Views.ReportDetailTemplates.SimpleListReportDetailView">
    <templates:CardBaseReportDetailView.CardContent>
        <controls:StackedScrollView Orientation="{Binding ScrollOrientation}"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalScrollBarVisibility="Never"
                                    VerticalScrollBarVisibility="Never"
                                    PropertyChanged="Handle_PropertyChanged">
            <Label Style="{DynamicResource CardTextListStyle}"
                   LineBreakMode="WordWrap"
                   Margin="0,10"
                   Text="{Binding Values}"/>
        </controls:StackedScrollView>
    </templates:CardBaseReportDetailView.CardContent>
</templates:CardBaseReportDetailView>

SimpleListReportDetailView.xaml.cs

using Xamarin.Forms;

namespace Logify.Mobile.Views.ReportDetailTemplates {
    public partial class SimpleListReportDetailView : CardBaseReportDetailView {
        public SimpleListReportDetailView() {
            InitializeComponent();
        }

        void Handle_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {
            if (e.PropertyName == nameof(ScrollView.Orientation)) {
                ScrollView scrollView = sender as ScrollView;
                if (scrollView != null) {
                    scrollView.ForceLayout();
                }
            }
        }
    }
}

StackedReportDetailView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<templates:CardBaseReportDetailView
    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:templates="clr-namespace:Logify.Mobile.Views.ReportDetailTemplates"
    xmlns:controls="clr-namespace:Logify.Mobile.Controls"
    xmlns:vm="clr-namespace:Logify.Mobile.ViewModels.ReportDetail"
    x:DataType="vm:StackedReportDetailInfoContainer"
    x:Class="Logify.Mobile.Views.ReportDetailTemplates.StackedReportDetailView">
    <templates:CardBaseReportDetailView.CardContent>
        <dxg:DataGridView
            x:Name="dxGrid"
            ItemsSource="{Binding Values}"
            IsColumnHeaderVisible="False"
            SelectionMode="None"
            IndicatorColor="#FFFFFF"
            Margin="0"
            AllowCascadeTreeCreation="True"
            x:DataType="{x:Null}">
            <dxg:DataGridView.CellStyle>
                <dxg:CellStyle BorderColor="Transparent" HorizontalLineThickness="0"/>
            </dxg:DataGridView.CellStyle>
            <dxg:DataGridView.Columns>
                <dxg:TemplateColumn IsReadOnly="true" AllowSort="False" MinWidth="200">
                    <dxg:TemplateColumn.DisplayTemplate>
                        <DataTemplate>
                            <StackLayout Margin="0" CompressedLayout.IsHeadless="True">
                                <Label
                                    Margin="0,10,0,0"
                                    Style="{DynamicResource CardExceptionHeaderStyle}">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Item.Header}"/>
                                            <Span Text="{Binding Item.Type}" />
                                            <Span Text="{Binding Item.Message}" 
                                                  Style="{DynamicResource CardSpanTextStyle}" 
                                                  TextColor="{DynamicResource CardExceptionMessageColor}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <controls:StackedScrollView
                                    Orientation="{Binding BindingContext.ScrollOrientation, Source={x:Reference Name='dxGrid'}}"
                                    Margin="10,10,0,0"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalScrollBarVisibility="Never"
                                    VerticalScrollBarVisibility="Never">
                                    <Label
                                        Margin="0"
                                        LineBreakMode="WordWrap"
                                        Style="{DynamicResource CardTextListStyle}"
                                        VerticalOptions="FillAndExpand"
                                        Text="{Binding Item.StackText}"/>
                                </controls:StackedScrollView>
                            </StackLayout>
                        </DataTemplate>
                        </dxg:TemplateColumn.DisplayTemplate>
                    </dxg:TemplateColumn>
                </dxg:DataGridView.Columns>
            </dxg:DataGridView>
    </templates:CardBaseReportDetailView.CardContent>
</templates:CardBaseReportDetailView>

StackedReportDetailView.xaml.cs

namespace Logify.Mobile.Views.ReportDetailTemplates {
    public partial class StackedReportDetailView : CardBaseReportDetailView {
        public StackedReportDetailView() {
            InitializeComponent();
        }
    }
}