Skip to content

Commit c390b9f

Browse files
CopilotStuartFerguson
Copilot
and
StuartFerguson
committed
Convert all buttons to tiles across transaction flows, my account, reports and support screens
Co-authored-by: StuartFerguson <16325469+StuartFerguson@users.noreply.github.com>
1 parent d802f26 commit c390b9f

31 files changed

Lines changed: 624 additions & 586 deletions

‎TransactionProcessor.Mobile/Pages/AppHome/HomePage.xaml‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,14 @@
8888
</Grid>
8989

9090
<!-- Exit button -->
91-
<Button Text="Exit Application" AutomationId="BackButton"
92-
Style="{StaticResource StandardButton}"
93-
Command="{Binding BackButtonCommand}"
94-
Margin="0,20,0,0"/>
91+
<Frame Style="{StaticResource ActionTileStyle}"
92+
BackgroundColor="{StaticResource MidGray}"
93+
AutomationId="BackButton">
94+
<Frame.GestureRecognizers>
95+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
96+
</Frame.GestureRecognizers>
97+
<Label Text="Exit Application" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
98+
</Frame>
9599

96100
</VerticalStackLayout>
97101
</VerticalStackLayout>

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,25 @@
6161
</VerticalStackLayout>
6262
</Frame>
6363

64-
<Button Text="Edit Address" Style="{StaticResource MyAccountButtonStyle}"
65-
AutomationId="EditAddressButton"/>
66-
<Button Text="Back" AutomationId="BackButton"
67-
Style="{StaticResource MyAccountButtonStyle}"
68-
Command="{Binding BackButtonCommand}"/>
64+
<!-- Action tiles row -->
65+
<Grid ColumnDefinitions="*,*" ColumnSpacing="10">
66+
<Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
67+
BackgroundColor="{StaticResource profile}"
68+
AutomationId="EditAddressButton">
69+
<Frame.GestureRecognizers>
70+
<TapGestureRecognizer/>
71+
</Frame.GestureRecognizers>
72+
<Label Text="Edit Address" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
73+
</Frame>
74+
75+
<Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
76+
BackgroundColor="{StaticResource MidGray}">
77+
<Frame.GestureRecognizers>
78+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
79+
</Frame.GestureRecognizers>
80+
<Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
81+
</Frame>
82+
</Grid>
6983

7084
</VerticalStackLayout>
7185
</VerticalStackLayout>

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,25 @@
4444
</VerticalStackLayout>
4545
</Frame>
4646

47-
<Button Text="Edit Contact" Style="{StaticResource MyAccountButtonStyle}"
48-
AutomationId="EditContactButton"/>
49-
<Button Text="Back" AutomationId="BackButton"
50-
Style="{StaticResource MyAccountButtonStyle}"
51-
Command="{Binding BackButtonCommand}"/>
47+
<!-- Action tiles row -->
48+
<Grid ColumnDefinitions="*,*" ColumnSpacing="10">
49+
<Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
50+
BackgroundColor="{StaticResource profile}"
51+
AutomationId="EditContactButton">
52+
<Frame.GestureRecognizers>
53+
<TapGestureRecognizer/>
54+
</Frame.GestureRecognizers>
55+
<Label Text="Edit Contact" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
56+
</Frame>
57+
58+
<Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
59+
BackgroundColor="{StaticResource MidGray}">
60+
<Frame.GestureRecognizers>
61+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
62+
</Frame.GestureRecognizers>
63+
<Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
64+
</Frame>
65+
</Grid>
5266

5367
</VerticalStackLayout>
5468
</VerticalStackLayout>

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,14 @@
7272
</Grid>
7373
</Frame>
7474

75-
<Button Text="Back" AutomationId="BackButton"
76-
Style="{StaticResource MyAccountButtonStyle}"
77-
Command="{Binding BackButtonCommand}"/>
75+
<Frame Style="{StaticResource ActionTileStyle}"
76+
BackgroundColor="{StaticResource MidGray}"
77+
AutomationId="BackButton">
78+
<Frame.GestureRecognizers>
79+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
80+
</Frame.GestureRecognizers>
81+
<Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
82+
</Frame>
7883

7984
</VerticalStackLayout>
8085
</VerticalStackLayout>

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,14 @@
3535
<!-- Options list (dynamically populated) -->
3636
<VerticalStackLayout x:Name="MyAccountOptionsList" Spacing="10"/>
3737

38-
<Button Text="Back" AutomationId="BackButton"
39-
Style="{StaticResource MyAccountButtonStyle}"
40-
Command="{Binding BackButtonCommand}"
41-
Margin="0,8,0,0"/>
38+
<Frame Style="{StaticResource ActionTileStyle}"
39+
BackgroundColor="{StaticResource MidGray}"
40+
AutomationId="BackButton" Margin="0,8,0,0">
41+
<Frame.GestureRecognizers>
42+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
43+
</Frame.GestureRecognizers>
44+
<Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
45+
</Frame>
4246

4347
</VerticalStackLayout>
4448
</VerticalStackLayout>

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ public partial class MyAccountPage : NoBackWithoutLogoutPage
1313
public MyAccountPage(MyAccountPageViewModel vm)
1414
{
1515
this.InitializeComponent();
16-
1716
BindingContext = vm;
18-
1917
}
2018

2119
protected override async void OnAppearing()
@@ -32,43 +30,39 @@ private void LoadOptions(MyAccountPageViewModel viewModel)
3230
Int32 rowCount = 0;
3331
foreach (ListViewItem modelOption in viewModel.MyAccountOptions)
3432
{
35-
Button button = new Button
33+
Frame tile = this.CreateTile(modelOption.Title, (Color)Application.Current.Resources["profile"], $"{modelOption.Title.Replace(" ", "")}Button");
34+
TapGestureRecognizer tap = new TapGestureRecognizer
3635
{
37-
Text = modelOption.Title,
38-
HorizontalOptions = LayoutOptions.FillAndExpand,
39-
AutomationId = $"{modelOption.Title.Replace(" ", "")}Button",
36+
Command = new Command(() => viewModel.OptionSelectedCommand.Execute(
37+
new ItemSelected<ListViewItem> { SelectedItem = modelOption, SelectedItemIndex = rowCount }))
4038
};
41-
button.SetDynamicResource(VisualElement.StyleProperty, "MyAccountButtonStyle");
42-
43-
Binding commandParameter = new Binding
44-
{
45-
Source = new ItemSelected<ListViewItem>
46-
{
47-
SelectedItem = modelOption,
48-
SelectedItemIndex = rowCount
49-
}
50-
};
51-
52-
Binding command = new Binding
53-
{
54-
Source = viewModel.OptionSelectedCommand
55-
};
56-
57-
// Create the behavior and bind it to the command
58-
EventToCommandBehavior behavior = new EventToCommandBehavior
59-
{
60-
EventName = "Clicked"
61-
};
62-
behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
63-
behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
64-
65-
// Attach the behavior to the button
66-
button.Behaviors.Add(behavior);
67-
68-
this.MyAccountOptionsList.Add(button);
69-
39+
tile.GestureRecognizers.Add(tap);
40+
this.MyAccountOptionsList.Add(tile);
7041
rowCount++;
7142
}
7243
}
7344

74-
}
45+
private Frame CreateTile(string text, Color backgroundColor, string automationId)
46+
{
47+
return new Frame
48+
{
49+
CornerRadius = 14,
50+
HasShadow = true,
51+
Padding = new Thickness(14),
52+
HeightRequest = 56,
53+
BackgroundColor = backgroundColor,
54+
BorderColor = Colors.Transparent,
55+
HorizontalOptions = LayoutOptions.FillAndExpand,
56+
AutomationId = automationId,
57+
Content = new Label
58+
{
59+
Text = text,
60+
TextColor = Colors.White,
61+
FontAttributes = FontAttributes.Bold,
62+
FontSize = 16,
63+
HorizontalTextAlignment = TextAlignment.Center,
64+
VerticalTextAlignment = TextAlignment.Center
65+
}
66+
};
67+
}
68+
}

‎TransactionProcessor.Mobile/Pages/Reports/ReportsBalanceAnalysisPage.xaml‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,15 @@
2929
</VerticalStackLayout>
3030
</ScrollView>
3131

32-
<!-- Back button -->
33-
<Button Grid.Row="2" Text="Back" AutomationId="BackButton"
34-
Style="{StaticResource ReportsButtonStyle}"
35-
Command="{Binding BackButtonCommand}"
36-
Margin="16,8"/>
32+
<!-- Back tile -->
33+
<Frame Grid.Row="2" Style="{StaticResource ActionTileStyle}"
34+
BackgroundColor="{StaticResource MidGray}"
35+
AutomationId="BackButton" Margin="16,8">
36+
<Frame.GestureRecognizers>
37+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
38+
</Frame.GestureRecognizers>
39+
<Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
40+
</Frame>
3741

3842
</Grid>
3943
</ContentPage>

‎TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml.cs‎

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ public partial class ReportsPage : NoBackWithoutLogoutPage
1111
private ReportsPageViewModel viewModel => BindingContext as ReportsPageViewModel;
1212

1313
public ReportsPage(ReportsPageViewModel vm)
14-
{
15-
this.InitializeComponent();
14+
{
15+
this.InitializeComponent();
1616
BindingContext = vm;
1717
}
1818

@@ -30,62 +30,48 @@ private void LoadProducts(ReportsPageViewModel viewModel)
3030
Int32 rowCount = 0;
3131
foreach (ListViewItem modelOption in viewModel.ReportsMenuOptions)
3232
{
33-
Button button = new Button
34-
{
35-
Text = modelOption.Title,
36-
HorizontalOptions = LayoutOptions.FillAndExpand,
37-
AutomationId = $"{modelOption.Title.Replace(" ", "")}Button",
38-
};
39-
button.SetDynamicResource(VisualElement.StyleProperty, "ReportsButtonStyle");
40-
41-
Binding commandParameter = new Binding
33+
Frame tile = this.CreateTile(modelOption.Title, (Color)Application.Current.Resources["reports"], $"{modelOption.Title.Replace(" ", "")}Button");
34+
TapGestureRecognizer tap = new TapGestureRecognizer
4235
{
43-
Source = new ItemSelected<ListViewItem>
44-
{
45-
SelectedItem = modelOption,
46-
SelectedItemIndex = rowCount
47-
}
36+
Command = new Command(() => viewModel.OptionSelectedCommand.Execute(
37+
new ItemSelected<ListViewItem> { SelectedItem = modelOption, SelectedItemIndex = rowCount }))
4838
};
49-
50-
Binding command = new Binding("OptionSelectedCommand", source: this.viewModel);
51-
52-
// Create the behavior and bind it to the command
53-
EventToCommandBehavior behavior = new EventToCommandBehavior
54-
{
55-
EventName = "Clicked"
56-
};
57-
behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
58-
behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
59-
60-
// Attach the behavior to the button
61-
button.Behaviors.Add(behavior);
62-
39+
tile.GestureRecognizers.Add(tap);
40+
this.ReportsList.Add(tile);
6341
rowCount++;
64-
this.ReportsList.Add(button);
65-
6642
}
6743

68-
this.ReportsList.Add(this.AddBackButton());
44+
this.ReportsList.Add(this.CreateBackTile(viewModel.BackButtonCommand));
6945
}
7046

71-
private Button AddBackButton()
47+
private Frame CreateTile(string text, Color backgroundColor, string automationId)
7248
{
73-
Button button = new Button
49+
return new Frame
7450
{
75-
Text = "Back",
51+
CornerRadius = 14,
52+
HasShadow = true,
53+
Padding = new Thickness(14),
54+
HeightRequest = 56,
55+
BackgroundColor = backgroundColor,
56+
BorderColor = Colors.Transparent,
7657
HorizontalOptions = LayoutOptions.FillAndExpand,
77-
AutomationId = "BackButton",
78-
};
79-
button.SetDynamicResource(VisualElement.StyleProperty, "ReportsButtonStyle");
80-
81-
Binding backButtonCommand = new Binding
82-
{
83-
Source = this.viewModel.BackButtonCommand
58+
AutomationId = automationId,
59+
Content = new Label
60+
{
61+
Text = text,
62+
TextColor = Colors.White,
63+
FontAttributes = FontAttributes.Bold,
64+
FontSize = 16,
65+
HorizontalTextAlignment = TextAlignment.Center,
66+
VerticalTextAlignment = TextAlignment.Center
67+
}
8468
};
85-
86-
button.SetBinding(Button.CommandProperty, backButtonCommand);
87-
88-
return button;
8969
}
9070

91-
}
71+
private Frame CreateBackTile(System.Windows.Input.ICommand command)
72+
{
73+
Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
74+
frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
75+
return frame;
76+
}
77+
}

‎TransactionProcessor.Mobile/Pages/Reports/ReportsSalesAnalysisPage.xaml‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,15 @@
9898
</CollectionView.ItemsLayout>
9999
</CollectionView>
100100

101-
<!-- Back button -->
102-
<Button Grid.Row="3" Text="Back" AutomationId="BackButton"
103-
Style="{StaticResource ReportsButtonStyle}"
104-
Command="{Binding BackButtonCommand}"
105-
Margin="16,8"/>
101+
<!-- Back tile -->
102+
<Frame Grid.Row="3" Style="{StaticResource ActionTileStyle}"
103+
BackgroundColor="{StaticResource MidGray}"
104+
AutomationId="BackButton" Margin="16,8">
105+
<Frame.GestureRecognizers>
106+
<TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
107+
</Frame.GestureRecognizers>
108+
<Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
109+
</Frame>
106110

107111
</Grid>
108112
</ContentPage>

0 commit comments

Comments
 (0)