Skip to content

Support Screens Revamp: Modern Tile-Based Layout #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
StuartFerguson merged 4 commits into from
Mar 6, 2026
Merged

Support Screens Revamp: Modern Tile-Based Layout #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84dcfeb
Initial plan
Copilot Mar 6, 2026
0a4fdeb
Revamp SupportPage with modern tile-based layout
Copilot Mar 6, 2026
0ce115a
Fix CS0246: add missing using System.Windows.Input for ICommand
Copilot Mar 6, 2026
4a9bde4
:|
StuartFerguson Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 52 additions & 35 deletions TransactionProcessor.Mobile/Pages/Support/SupportPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,66 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TransactionProcessor.Mobile.Pages.Support.SupportPage"
xmlns:common="clr-namespace:TransactionProcessor.Mobile.Pages.Common"
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Shell.NavBarIsVisible="False"
x:Name="Support">
Padding="0">
<ScrollView>
<VerticalStackLayout Style="{DynamicResource Layout}">

<controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>

<!--Main image-->
<Image Source="techsupport.jpg" VerticalOptions="Start" Aspect="AspectFit"/>
<VerticalStackLayout Spacing="0">

<!-- Header with gradient background -->
<Grid HeightRequest="160">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource support}" Offset="0.0"/>
<GradientStop Color="#e8819a" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
<Image Source="supportbutton.svg" HeightRequest="52" WidthRequest="52" HorizontalOptions="Center"/>
<Label Text="{Binding Title}"
AutomationId="{Binding Title}"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Grid>

<Frame Style="{DynamicResource MainFrame}">
<VerticalStackLayout x:Name="SubLayout" Spacing="5">
<!-- Device and app info card -->
<VerticalStackLayout Padding="20,20,20,0" Spacing="16">
<Frame Style="{StaticResource HomeCardFrame}">
<VerticalStackLayout Spacing="6">
<Label Text="{Binding ApplicationName, Mode=OneTime}"
FontSize="14"
FontAttributes="Bold"
TextColor="{StaticResource labelTextColor}"/>
<Label Text="{Binding Platform, Mode=OneTime}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
<Label Text="{Binding NumberTransactionsStored, Mode=OneTime}"
FontSize="13"
TextColor="{StaticResource labelTextColor}"/>
</VerticalStackLayout>
</Frame>
</VerticalStackLayout>

<Label Text="{Binding ApplicationName, Mode=OneTime}"
HorizontalTextAlignment="Center"
HorizontalOptions="Fill"/>
<!-- Support action tiles -->
<VerticalStackLayout Padding="20,16,20,16" Spacing="16">
<Label Text="Support Options"
FontSize="16"
FontAttributes="Bold"
TextColor="{StaticResource labelTextColor}"/>

<Label Text="{Binding Platform, Mode=OneTime}"
VerticalOptions="Center"/>
<FlexLayout x:Name="SupportOptionsList"
Wrap="Wrap"
JustifyContent="SpaceEvenly"
AlignItems="Start"/>

<Label Text="{Binding NumberTransactionsStored, Mode=OneTime}"
VerticalOptions="Center"/>
<Button Text="Back"
AutomationId="BackButton"
Style="{StaticResource StandardButton}"
Command="{Binding BackButtonCommand}"/>
</VerticalStackLayout>

<Button Text="Upload Logs" Style="{StaticResource StandardButton}" AutomationId="UploadLogsButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding UploadLogsCommand}" BindingContext="{Binding Source={x:Reference Support}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<Button Text="View Logs" Style="{StaticResource StandardButton}" AutomationId="ViewLogsButton">
<Button.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Clicked"
Command="{Binding ViewLogsCommand}" BindingContext="{Binding Source={x:Reference Support}, Path=BindingContext}" />
</Button.Behaviors>
</Button>
<Button Text="Back" Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}" AutomationId="BackButton"/>
</VerticalStackLayout>
</Frame>
</VerticalStackLayout>
</ScrollView>
</common:NoBackWithoutLogoutPage>
62 changes: 59 additions & 3 deletions TransactionProcessor.Mobile/Pages/Support/SupportPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
using System.Windows.Input;
using CommunityToolkit.Mvvm.Input;
using TransactionProcessor.Mobile.BusinessLogic.ViewModels.Support;
using TransactionProcessor.Mobile.Pages.Common;

Expand All @@ -12,8 +14,62 @@ public SupportPage(SupportPageViewModel vm) {
BindingContext = vm;
}

//protected override async void OnAppearing() {
//SupportPageViewModel vm = MauiProgram.Container.Services.GetRequiredService<SupportPageViewModel>();
//}
protected override void OnAppearing() {
base.OnAppearing();
this.LoadSupportOptions(this.viewModel);
}

private void LoadSupportOptions(SupportPageViewModel viewModel) {
this.SupportOptionsList.Children.Clear();

var options = new List<(String Title, String Icon, String AutomationId, IRelayCommand Command)>

{
("Upload Logs", "supportbutton.svg", "UploadLogsButton", viewModel.UploadLogsCommand),
("View Logs", "reportbutton.svg", "ViewLogsButton", viewModel.ViewLogsCommand),
};

foreach (var option in options) {
Frame tile = this.CreateSupportTile(option.Title, option.Icon, option.AutomationId, option.Command);
this.SupportOptionsList.Children.Add(tile);
}
}

private Frame CreateSupportTile(String title, String iconSource, String automationId, IRelayCommand command) {
Frame tile = new Frame();
tile.SetDynamicResource(VisualElement.StyleProperty, "SelectionTileFrame");
tile.AutomationId = automationId;

Image icon = new Image
{
Source = iconSource,
HeightRequest = 36,
WidthRequest = 36,
HorizontalOptions = LayoutOptions.Center
};

Label nameLabel = new Label
{
Text = title,
HorizontalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.Center,
FontAttributes = FontAttributes.Bold,
FontSize = 13
};
nameLabel.SetDynamicResource(Label.TextColorProperty, "support");

tile.Content = new VerticalStackLayout
{
Spacing = 8,
HorizontalOptions = LayoutOptions.Center,
Children = { icon, nameLabel }
};

TapGestureRecognizer tapGesture = new TapGestureRecognizer();
tapGesture.Command = command;
tile.GestureRecognizers.Add(tapGesture);

return tile;
}
}
}
Loading