Skip to content

Commit 318a21f

Browse files
christiannagelchristiannagel
authored
Merge pull request #144 from CodebreakerApp/143-uno-responsive-layout
143 uno responsive layout
2 parents b50bef8 + 26f5891 commit 318a21f

5 files changed

Lines changed: 125 additions & 34 deletions

File tree

‎src/Codebreaker.Uno/CodebreakerUno/Views/Components/GameResultDisplay.xaml‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7+
xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
8+
xmlns:non_win="http://uno.ui/not_win"
79
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
810
xmlns:converter="using:CodeBreaker.Uno.Converters"
911
xmlns:cme="using:CodeBreaker.Uno.CustomMarkupExtensions"
10-
mc:Ignorable="d"
12+
mc:Ignorable="d non_win"
1113
d:DesignHeight="300"
1214
d:DesignWidth="400">
1315
<UserControl.Resources>
@@ -22,21 +24,41 @@
2224
</animations:ImplicitAnimationSet>
2325
</UserControl.Resources>
2426
<Grid>
25-
<StackPanel Orientation="Vertical"
26-
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusToVisibilityConverter}, ConverterParameter=Won}"
27-
animations:Implicit.ShowAnimations="{StaticResource EntranceAnimation}"
28-
animations:Implicit.HideAnimations="{StaticResource ExitAnimation}">
27+
<!-- Won - (Modern) Windows -->
28+
<win:StackPanel
29+
Orientation="Vertical"
30+
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusToVisibilityConverter}, ConverterParameter=Won}"
31+
animations:Implicit.ShowAnimations="{StaticResource EntranceAnimation}"
32+
animations:Implicit.HideAnimations="{StaticResource ExitAnimation}">
2933
<Image Source="ms-appx:///Assets/Animations/WonAnimation_300_opt.gif" MaxHeight="300" />
3034
<TextBlock Text="{cme:ResourceString Name=GamePage_WonMessage}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Center" Margin="0,50,0,20" />
3135
<Button Content="{cme:ResourceString Name=GamePage_WonButtonText}" HorizontalAlignment="Center" Margin="0,0,0,100" Command="{x:Bind ViewModel.StartGameCommand, Mode=OneTime}" />
32-
</StackPanel>
33-
<StackPanel Orientation="Vertical"
34-
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusToVisibilityConverter}, ConverterParameter=Lost}"
35-
animations:Implicit.ShowAnimations="{StaticResource EntranceAnimation}"
36-
animations:Implicit.HideAnimations="{StaticResource ExitAnimation}">
36+
</win:StackPanel>
37+
<!-- Won - Other Platforms -->
38+
<non_win:StackPanel
39+
Orientation="Vertical"
40+
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusToVisibilityConverter}, ConverterParameter=Won}">
41+
<Image Source="ms-appx:///Assets/Animations/WonAnimation_300_opt.gif" MaxHeight="300" />
42+
<TextBlock Text="{cme:ResourceString Name=GamePage_WonMessage}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Center" Margin="0,50,0,20" />
43+
<Button Content="{cme:ResourceString Name=GamePage_WonButtonText}" HorizontalAlignment="Center" Margin="0,0,0,100" Command="{x:Bind ViewModel.StartGameCommand, Mode=OneTime}" />
44+
</non_win:StackPanel>
45+
<!-- Lost - (Modern) Windows -->
46+
<win:StackPanel
47+
Orientation="Vertical"
48+
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusToVisibilityConverter}, ConverterParameter=Lost}"
49+
animations:Implicit.ShowAnimations="{StaticResource EntranceAnimation}"
50+
animations:Implicit.HideAnimations="{StaticResource ExitAnimation}">
51+
<Image Source="ms-appx:///Assets/Animations/LostAnimation_300_opt.gif" MaxHeight="300" />
52+
<TextBlock Text="{cme:ResourceString Name=GamePage_LostMessage}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Center" Margin="0,50,0,20" />
53+
<Button Content="{cme:ResourceString Name=GamePage_LostButtonText}" HorizontalAlignment="Center" Margin="0,0,0,100" Command="{x:Bind ViewModel.StartGameCommand, Mode=OneTime}" />
54+
</win:StackPanel>
55+
<!-- Lost - Other Platforms -->
56+
<non_win:StackPanel
57+
Orientation="Vertical"
58+
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusToVisibilityConverter}, ConverterParameter=Lost}">
3759
<Image Source="ms-appx:///Assets/Animations/LostAnimation_300_opt.gif" MaxHeight="300" />
3860
<TextBlock Text="{cme:ResourceString Name=GamePage_LostMessage}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Center" Margin="0,50,0,20" />
3961
<Button Content="{cme:ResourceString Name=GamePage_LostButtonText}" HorizontalAlignment="Center" Margin="0,0,0,100" Command="{x:Bind ViewModel.StartGameCommand, Mode=OneTime}" />
40-
</StackPanel>
62+
</non_win:StackPanel>
4163
</Grid>
4264
</UserControl>

‎src/Codebreaker.Uno/CodebreakerUno/Views/Components/PegSelectionComponent.xaml‎

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,72 @@
2121
</DataTemplate>
2222
<DataTemplate x:Key="SelectColorItemTemplate" x:DataType="vmComponents:SelectedFieldViewModel">
2323
<ComboBox
24-
Margin="04" Width="112"
25-
Height="92"
24+
Margin="4"
25+
Width="112" Height="92"
2626
ItemsSource="{Binding ElementName=ThisControl, Path=DataContext.Game.FieldValues[colors], Mode=OneWay}"
2727
SelectedItem="{x:Bind Value, Mode=TwoWay}"
2828
ItemTemplate="{StaticResource SelectColorTemplate}"
2929
PlaceholderText="❓" HorizontalContentAlignment="Center" FontSize="40" />
3030
</DataTemplate>
3131
</UserControl.Resources>
3232

33-
<Grid>
33+
<Grid x:Name="Wrapper" ColumnSpacing="15" RowSpacing="15">
3434
<Grid.ColumnDefinitions>
35-
<ColumnDefinition Width="auto" />
36-
<ColumnDefinition Width="auto" />
35+
<ColumnDefinition MaxWidth="500" />
36+
<ColumnDefinition Width="Auto" />
3737
</Grid.ColumnDefinitions>
38+
<Grid.RowDefinitions>
39+
<RowDefinition Height="Auto" />
40+
<RowDefinition Height="Auto" />
41+
</Grid.RowDefinitions>
42+
<VisualStateManager.VisualStateGroups>
43+
<VisualStateGroup>
44+
<VisualState x:Name="WideState">
45+
<VisualState.StateTriggers>
46+
<AdaptiveTrigger MinWindowWidth="800" />
47+
</VisualState.StateTriggers>
48+
<VisualState.Setters>
49+
<Setter Target="PegComboBoxes.(Grid.Column)" Value="0" />
50+
<Setter Target="MoveSubmitButton.(Grid.Column)" Value="1" />
51+
<Setter Target="PegComboBoxes.(Grid.RowSpan)" Value="2" />
52+
<Setter Target="MoveSubmitButton.(Grid.RowSpan)" Value="2" />
53+
54+
<Setter Target="PegComboBoxes.HorizontalAlignment" Value="Left" />
55+
</VisualState.Setters>
56+
</VisualState>
57+
<VisualState x:Name="NarrowState">
58+
<VisualState.StateTriggers>
59+
<AdaptiveTrigger MinWindowWidth="0" />
60+
</VisualState.StateTriggers>
61+
<VisualState.Setters>
62+
<Setter Target="PegComboBoxes.(Grid.Row)" Value="0" />
63+
<Setter Target="MoveSubmitButton.(Grid.Row)" Value="1" />
64+
<Setter Target="PegComboBoxes.(Grid.ColumnSpan)" Value="2" />
65+
<Setter Target="MoveSubmitButton.(Grid.ColumnSpan)" Value="2" />
66+
67+
<Setter Target="PegComboBoxes.HorizontalAlignment" Value="Center" />
68+
</VisualState.Setters>
69+
</VisualState>
70+
</VisualStateGroup>
71+
</VisualStateManager.VisualStateGroups>
3872
<ItemsControl
39-
Grid.Column="0"
73+
x:Name="PegComboBoxes"
4074
ItemsSource="{x:Bind Path=ViewModel.Fields, Mode=OneWay}"
4175
ItemTemplate="{StaticResource SelectColorItemTemplate}">
4276
<ItemsControl.ItemsPanel>
4377
<ItemsPanelTemplate>
44-
<StackPanel Orientation="Horizontal" Margin="15,0,15,10" />
78+
<VariableSizedWrapGrid Orientation="Horizontal" ItemWidth="112" />
4579
</ItemsPanelTemplate>
4680
</ItemsControl.ItemsPanel>
4781
</ItemsControl>
48-
<Button Command="{x:Bind ViewModel.SetMoveCommand, Mode=OneTime}" Grid.Column="1" Margin="4" VerticalAlignment="Top" Height="92" Width="100">
82+
<Button
83+
x:Name="MoveSubmitButton"
84+
Margin="4"
85+
Height="92"
86+
MinWidth="120"
87+
HorizontalAlignment="Stretch"
88+
VerticalAlignment="Stretch"
89+
Command="{x:Bind ViewModel.SetMoveCommand, Mode=OneTime}">
4990
<StackPanel Orientation="Vertical" Spacing="5">
5091
<SymbolIcon Symbol="Send" Visibility="{x:Bind ViewModel.SetMoveCommand.IsRunning, Mode=OneWay, Converter={StaticResource BoolToVisibility}, ConverterParameter=True}" />
5192
<ProgressRing Visibility="{x:Bind ViewModel.SetMoveCommand.IsRunning, Mode=OneWay}" />

‎src/Codebreaker.Uno/CodebreakerUno/Views/Pages/GamePage.xaml‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,36 @@
2020
</Style>
2121
</Page.Resources>
2222
<Grid x:Name="ContentArea">
23+
<VisualStateManager.VisualStateGroups>
24+
<VisualStateGroup>
25+
<VisualState x:Name="WideState">
26+
<VisualState.StateTriggers>
27+
<AdaptiveTrigger MinWindowWidth="641" />
28+
</VisualState.StateTriggers>
29+
<VisualState.Setters>
30+
<Setter Target="NameInput.(Grid.Column)" Value="0" />
31+
<Setter Target="NameInput.(Grid.RowSpan)" Value="2" />
32+
<Setter Target="NameSubmitButton.(Grid.Column)" Value="1" />
33+
<Setter Target="NameSubmitButton.(Grid.RowSpan)" Value="2" />
34+
35+
<Setter Target="PegSelection.Margin" Value="80,0,0,0" />
36+
</VisualState.Setters>
37+
</VisualState>
38+
<VisualState x:Name="NarrowState">
39+
<VisualState.StateTriggers>
40+
<AdaptiveTrigger MinWindowWidth="0" />
41+
</VisualState.StateTriggers>
42+
<VisualState.Setters>
43+
<Setter Target="NameInput.(Grid.Row)" Value="0" />
44+
<Setter Target="NameInput.(Grid.ColumnSpan)" Value="2" />
45+
<Setter Target="NameSubmitButton.(Grid.Row)" Value="1" />
46+
<Setter Target="NameSubmitButton.(Grid.ColumnSpan)" Value="2" />
47+
48+
<Setter Target="PegSelection.Margin" Value="0" />
49+
</VisualState.Setters>
50+
</VisualState>
51+
</VisualStateGroup>
52+
</VisualStateManager.VisualStateGroups>
2353
<Grid.RowDefinitions>
2454
<RowDefinition Height="auto" />
2555
<RowDefinition Height="auto" />
@@ -32,13 +62,18 @@
3262
<Grid
3363
Grid.Row="0"
3464
ColumnSpacing="25"
65+
RowSpacing="15"
3566
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibility}, ConverterParameter=Start}">
3667
<Grid.ColumnDefinitions>
3768
<ColumnDefinition />
3869
<ColumnDefinition Width="Auto" />
3970
</Grid.ColumnDefinitions>
40-
<Grid Grid.Column="0">
41-
<!-- The extra grid and the empy (enabled) TextBlock are necessary for showing the tooltip over the (disabled) TextBox. -->
71+
<Grid.RowDefinitions>
72+
<RowDefinition Height="Auto" />
73+
<RowDefinition Height="Auto" />
74+
</Grid.RowDefinitions>
75+
<Grid x:Name="NameInput">
76+
<!--The extra grid and the empy (enabled) TextBlock are necessary for showing the tooltip over the (disabled) TextBox.-->
4277
<TextBlock />
4378
<TextBox
4479
IsEnabled="{x:Bind ViewModel.IsNameEnterable, Mode=OneWay}"
@@ -54,7 +89,7 @@
5489
</ToolTipService.ToolTip>
5590
</Grid>
5691
<Button
57-
Grid.Column="1"
92+
x:Name="NameSubmitButton"
5893
VerticalAlignment="Bottom"
5994
HorizontalAlignment="Stretch"
6095
Padding="35,8"
@@ -67,15 +102,11 @@
67102
</Button>
68103
</Grid>
69104
<!--Gamebar section-->
70-
<StackPanel
71-
Orientation="Horizontal"
105+
<components:PegSelectionComponent
106+
x:Name="PegSelection"
72107
Grid.Row="1"
73-
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibility}, ConverterParameter=Cancelable}">
74-
<components:PegSelectionComponent
75-
Grid.Row="3"
76-
Margin="65,0,0,0"
108+
Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibility}, ConverterParameter=Cancelable}"
77109
ViewModel="{x:Bind ViewModel, Mode=OneWay}" />
78-
</StackPanel>
79110
<!--Move section-->
80111
<ScrollViewer Grid.Row="2" Padding="0,0,0,15" x:Name="pegScrollViewer">
81112
<ListBox

‎src/Codebreaker.Uno/CodebreakerUno/Views/Pages/ShellPage.xaml.cs‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,5 @@ private void NavigationViewControl_DisplayModeChanged(NavigationView sender, Nav
2828
Right = AppTitleBar.Margin.Right,
2929
Bottom = AppTitleBar.Margin.Bottom
3030
};
31-
32-
if (sender.DisplayMode != NavigationViewDisplayMode.Expanded)
33-
NavigationViewControl.Header = null;
3431
}
3532
}

‎src/Codebreaker.Uno/Directory.Packages.props‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<PackageVersion Include="Uno.Extensions.Serialization" Version="3.0.19" />
3636
<PackageVersion Include="Uno.Extensions.Serialization.Http" Version="4.0.0" />
3737
<PackageVersion Include="Uno.Extensions.Serialization.Refit" Version="4.0.0" />
38-
<PackageVersion Include="Uno.Toolkit.WinUI" Version="5.1.5" />
39-
<PackageVersion Include="Uno.Resizetizer" Version="1.2.1" />
38+
<PackageVersion Include="Uno.Toolkit.WinUI" Version="5.1.7" />
39+
<PackageVersion Include="Uno.Resizetizer" Version="1.3.0" />
4040
<PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="5.1.50" />
4141
<PackageVersion Include="Uno.UniversalImageLoader" Version="1.9.36" />
4242
<PackageVersion Include="Uno.Wasm.Bootstrap" Version="8.0.8" />

0 commit comments

Comments
 (0)