Skip to content

Commit 2eb0935

Browse files
szvszv
committed
Added ScrollView to peg listview and improved responsive layout for mobile and desktop scenarios
1 parent d6de8ac commit 2eb0935

1 file changed

Lines changed: 77 additions & 72 deletions

File tree

‎src/Codebreaker.MAUI/Views/Pages/GamePage.xaml‎

Lines changed: 77 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -14,81 +14,86 @@
1414
<ContentPage.Resources>
1515
<conv:GameStatusToIsVisibleConverter x:Key="GameStatusVisibleConverter" />
1616
</ContentPage.Resources>
17-
<Grid RowDefinitions="auto, *, auto">
18-
<components:GameResultDisplay
19-
Grid.Row="0" />
20-
<ScrollView Grid.Row="1">
21-
<VerticalStackLayout
22-
Spacing="25"
23-
Padding="30,0"
24-
VerticalOptions="FillAndExpand">
25-
<ActivityIndicator
26-
IsRunning="{Binding InProgress, Mode=OneWay}"
27-
HorizontalOptions="Center"
17+
<Grid RowDefinitions="auto, auto, *" Padding="15">
18+
<components:GameResultDisplay Grid.Row="0" />
19+
20+
<FlexLayout
21+
Grid.Row="1"
22+
MaximumWidthRequest="1500"
23+
Wrap="Wrap"
24+
JustifyContent="Start"
25+
AlignItems="End"
26+
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start}">
27+
<VerticalStackLayout
28+
FlexLayout.Basis="500"
29+
FlexLayout.Grow="2">
30+
<Label
31+
VerticalTextAlignment="Center"
32+
Text="Enter your Gamername:"
33+
FontSize="18" />
34+
<Entry
35+
IsEnabled="{Binding IsNameEnterable, Mode=OneWay}"
36+
Text="{Binding Name, Mode=TwoWay }"
37+
Placeholder="Enter your name"/>
38+
</VerticalStackLayout>
39+
<Grid
40+
FlexLayout.Basis="300"
41+
FlexLayout.Grow="1"
42+
Margin="0,5,0,0"
43+
ColumnDefinitions="*, auto"
44+
MinimumWidthRequest="250">
45+
<Button
46+
Grid.Column="0"
47+
Text="Start the game"
48+
MinimumWidthRequest="150"
49+
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start}"
50+
Command="{Binding StartGameCommand, Mode=OneTime}" />
51+
<ActivityIndicator
52+
Grid.Column="1"
53+
Margin="15,0,0,0"
54+
IsVisible="{Binding InProgress, Mode=OneWay}"
55+
IsRunning="True"
2856
VerticalOptions="Center" />
57+
</Grid>
58+
</FlexLayout>
2959

30-
<Grid
31-
RowDefinitions="Auto, Auto"
32-
ColumnDefinitions="*, Auto"
33-
ColumnSpacing="8"
34-
RowSpacing="8"
35-
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start}">
36-
<Label
37-
Grid.Column="0"
38-
Grid.Row="0"
39-
VerticalTextAlignment="Center"
40-
Text="Enter your Gamername:"
41-
FontSize="18" />
42-
<Entry
43-
Grid.Column="0"
44-
Grid.Row="1"
45-
IsEnabled="{Binding IsNameEnterable, Mode=OneWay}"
46-
Text="{Binding Name, Mode=TwoWay }"
47-
Placeholder="Enter your name"/>
48-
<Button
49-
Grid.Column="1"
50-
Grid.Row="1"
51-
Padding="40,8"
52-
HorizontalOptions="Fill"
53-
VerticalOptions="EndAndExpand"
54-
Text="Start the game"
55-
IsVisible="{OnIdiom
56-
Default={Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start},
57-
Phone=False,
58-
Watch=False
59-
}"
60-
Command="{Binding StartGameCommand, Mode=OneTime}" />
61-
</Grid>
62-
63-
<components:PegSelectionView IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}" />
64-
65-
<ListView
66-
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Running}"
67-
ItemsSource="{Binding GameMoves, Mode=OneWay}"
68-
ItemTemplate="{StaticResource PegsTemplate}"/>
69-
70-
</VerticalStackLayout>
60+
<FlexLayout
61+
Grid.Row="1"
62+
MaximumWidthRequest="700"
63+
Padding="15,0"
64+
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}"
65+
Wrap="Wrap"
66+
JustifyContent="Center"
67+
AlignItems="Center">
68+
<components:PegSelectionView />
69+
<Grid
70+
FlexLayout.Basis="200"
71+
FlexLayout.Grow="1"
72+
ColumnDefinitions="*, auto"
73+
Padding="0,10"
74+
MinimumWidthRequest="250">
75+
<Button
76+
Grid.Column="0"
77+
Text="Move"
78+
MinimumWidthRequest="150"
79+
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}"
80+
Command="{Binding SetMoveCommand, Mode=OneTime}" />
81+
<ActivityIndicator
82+
Grid.Column="1"
83+
Margin="15,0,0,0"
84+
IsVisible="{Binding InProgress, Mode=OneWay}"
85+
IsRunning="True"
86+
VerticalOptions="Center" />
87+
</Grid>
88+
</FlexLayout>
7189

90+
<ScrollView Grid.Row="2" Padding="0,0,0,15" x:Name="pegScrollView" HorizontalOptions="CenterAndExpand">
91+
<ListView
92+
HorizontalOptions="FillAndExpand"
93+
SelectionMode="None"
94+
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Running}"
95+
ItemsSource="{Binding GameMoves, Mode=OneWay}"
96+
ItemTemplate="{StaticResource PegsTemplate}"/>
7297
</ScrollView>
73-
<VerticalStackLayout Grid.Row="2">
74-
<Button
75-
Padding="8"
76-
HorizontalOptions="Fill"
77-
VerticalOptions="EndAndExpand"
78-
Text="Start the game"
79-
IsVisible="{OnIdiom
80-
Default=False,
81-
Phone={Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start}
82-
}"
83-
Command="{Binding StartGameCommand, Mode=OneTime}" />
84-
<Button
85-
Margin="20"
86-
HorizontalOptions="Fill"
87-
VerticalOptions="End"
88-
Text="Move"
89-
IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}"
90-
Command="{Binding SetMoveCommand, Mode=OneTime}" />
91-
<Button Clicked="Button_Clicked" Text="To TestPage" />
92-
</VerticalStackLayout>
9398
</Grid>
9499
</ContentPage>

0 commit comments

Comments
 (0)