Add Responsive design to the Main Page (flyout, triggers...)

pull/14/head
Corentin LEMAIRE 2 years ago
parent 18ea84295e
commit 6838a8ef14

@ -4,9 +4,10 @@
x:Class="Linaris.AlbumPage"
xmlns:local="clr-namespace:Linaris"
xmlns:avatarview="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
Title="Album">
Title="Album"
Style="{StaticResource PageFlyoutTrigger}">
<Grid>
<Grid Style="{StaticResource GridFlyoutTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6*"/>

@ -8,4 +8,25 @@ public partial class App : Application
MainPage = new AppShell();
}
protected override Window CreateWindow(IActivationState activationState)
{
var Window = base.CreateWindow(activationState);
const int newHeight = 900;
const int newWidth = 1800;
const int minHeight = 800;
const int minWidth = 400;
Window.X = 0;
Window.Y = 100;
Window.Width = newWidth;
Window.Height = newHeight;
Window.MinimumHeight = minHeight;
Window.MinimumWidth = minWidth;
return Window;
}
}

@ -4,12 +4,31 @@
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Linaris"
Shell.FlyoutBehavior="Disabled">
Shell.FlyoutBehavior="Flyout"
FlyoutWidth="200">
<ShellContent
Title="Linaris"
ContentTemplate="{DataTemplate local:PlaylistsPage}"
Route="MainPage"
Shell.NavBarIsVisible="False"/>
<FlyoutItem Title="Home" Icon="home.png">
<ShellContent
Title="Linaris"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage"
Shell.NavBarIsVisible="False"/>
</FlyoutItem>
<FlyoutItem Title="Playlists" Icon="playlist.png">
<ShellContent
Title="Playlists"
ContentTemplate="{DataTemplate local:PlaylistsPage}"
Route="PlaylistsPage"
Shell.NavBarIsVisible="False"/>
</FlyoutItem>
<FlyoutItem Title="Files" Icon="fichierslocaux.png">
<ShellContent
Title="Files"
ContentTemplate="{DataTemplate local:LocalFilesPage}"
Route="LocalFilesPage"
Shell.NavBarIsVisible="False"/>
</FlyoutItem>
</Shell>

@ -3,48 +3,44 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Linaris.FooterPage">
<Grid Grid.ColumnSpan="2" Grid.Row="1" BackgroundColor="Gray">
<Grid Grid.ColumnSpan="2" Grid.Row="1" BackgroundColor="Gray" Style="{StaticResource FooterTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<HorizontalStackLayout Margin="10" Grid.ColumnSpan="2">
<HorizontalStackLayout Margin="10">
<Image Source="album10.jpg" SemanticProperties.Description="Album 3" Aspect="AspectFit"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Morceau" HorizontalOptions="Center" VerticalOptions="Center" Margin="8,0,0,0" FontSize="25"></Label>
<Label Grid.Row="1" x:Name="artiste" Text="Artiste" HorizontalOptions="Center" VerticalOptions="Center" Margin="8,0,0,0" FontSize="15"></Label>
<Label Grid.Row="0" Style="{StaticResource LabelFooterTrigger}" Text="Morceau" VerticalOptions="Center" Margin="8,0,0,0" WidthRequest="200" LineBreakMode="TailTruncation"></Label>
<Label Grid.Row="1" x:Name="artiste" Text="Artiste" VerticalOptions="Center" Margin="8,0,0,0" WidthRequest="200" LineBreakMode="TailTruncation"></Label>
</Grid>
</HorizontalStackLayout>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="0,5,0,0">
<ImageButton Source="rdm.png" Margin="0,10,8,10" WidthRequest="25" HeightRequest="25" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
<ImageButton x:Name="Back" Clicked="RewindButton_Clicked" Source="back.png" Margin="8,10,8,10" WidthRequest="20" HeightRequest="20" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
<ImageButton x:Name="Play" Clicked="PlayButton_Clicked" Source="play.png" Margin="8,0,8,0" WidthRequest="38" HeightRequest="38" Aspect="AspectFit" MinimumWidthRequest="5" MinimumHeightRequest="5" BackgroundColor="Transparent"/>
<ImageButton x:Name="Next" Clicked="NextButton_Clicked" Source="next.png" Margin="8,10,8,10" WidthRequest="20" HeightRequest="20" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
<ImageButton Source="loop.png" Margin="8,10,0,10" WidthRequest="25" HeightRequest="25" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
</StackLayout>
<HorizontalStackLayout Grid.Row="1" HorizontalOptions="Center" Spacing="10" MinimumWidthRequest="15">
<Label VerticalOptions="Center" Text="00:00:00" x:Name="currentTime"></Label>
<Slider Value="0" ValueChanged="Bar_ValueChanged" WidthRequest="250" VerticalOptions="Center" x:Name="bar"/>
<Label VerticalOptions="Center" Text="00:00:00" x:Name="endTime"></Label>
</HorizontalStackLayout>
</Grid>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" x:Name="ButtonStack">
<ImageButton x:Name="Random" Source="rdm.png" Margin="0,10,8,10" WidthRequest="25" HeightRequest="25" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
<ImageButton x:Name="Back" Clicked="RewindButton_Clicked" Source="back.png" Margin="8,10,8,10" WidthRequest="20" HeightRequest="20" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
<ImageButton x:Name="Play" Clicked="PlayButton_Clicked" Source="play.png" Margin="8,0,8,0" WidthRequest="38" HeightRequest="38" Aspect="AspectFit" MinimumWidthRequest="5" MinimumHeightRequest="5" BackgroundColor="Transparent"/>
<ImageButton x:Name="Next" Clicked="NextButton_Clicked" Source="next.png" Margin="8,10,8,10" WidthRequest="20" HeightRequest="20" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
<ImageButton x:Name="Loop" Source="loop.png" Margin="8,10,0,10" WidthRequest="25" HeightRequest="25" Aspect="AspectFit" MinimumWidthRequest="1" MinimumHeightRequest="1" BackgroundColor="Transparent"/>
</StackLayout>
<HorizontalStackLayout Grid.ColumnSpan="3" HorizontalOptions="Center" Spacing="10" MinimumWidthRequest="15" x:Name="TimeStack">
<Label VerticalOptions="Center" Text="00:00:00" x:Name="currentTime"></Label>
<Slider Value="0" ValueChanged="Bar_ValueChanged" WidthRequest="250" VerticalOptions="Center" x:Name="bar"/>
<Label VerticalOptions="Center" Text="00:00:00" x:Name="endTime"></Label>
</HorizontalStackLayout>
<Grid Grid.Column="2">
<Grid Grid.Column="2" Style="{StaticResource VolumeTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>

@ -5,8 +5,9 @@
xmlns:control="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
xmlns:local="clr-namespace:Linaris"
Title="LocalFilesPage">
<Grid>
Title="LocalFilesPage"
Style="{StaticResource PageFlyoutTrigger}">
<Grid Style="{StaticResource GridFlyoutTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6*"/>

@ -3,16 +3,17 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Linaris"
x:Class="Linaris.MainPage"
Title="Home">
<Grid>
Title="Home"
Style="{StaticResource PageFlyoutTrigger}">
<Grid Style="{StaticResource GridFlyoutTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<ContentView Style="{StaticResource FlyoutStyle}" Grid.Column="0"></ContentView>

@ -4,8 +4,9 @@
xmlns:local="clr-namespace:Linaris"
x:Class="Linaris.PlaylistPage"
xmlns:avatarview="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
Title="PlaylistPage">
<Grid>
Title="PlaylistPage"
Style="{StaticResource PageFlyoutTrigger}">
<Grid Style="{StaticResource GridFlyoutTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6*"/>

@ -3,9 +3,10 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Linaris"
x:Class="Linaris.PlaylistsPage"
Title="PlaylistsPage">
Title="PlaylistsPage"
Style="{StaticResource PageFlyoutTrigger}">
<Grid>
<Grid Style="{StaticResource GridFlyoutTrigger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6*"/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

@ -7,38 +7,24 @@
xmlns:local="clr-namespace:Linaris"
xmlns:test="local:LocalFilesPage">
<Style x:Key="buttons" TargetType="Button">
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="WidthRequest" Value="135"/>
<Setter Property="HeightRequest" Value="50"/>
<Setter Property="VerticalOptions" Value="Start"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="BackgroundColor" Value="CornflowerBlue"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="30"/>
</Style>
<ControlTemplate x:Key="flyout">
<VerticalStackLayout BackgroundColor="black" Spacing="20" Margin="0,20,0,0">
<Button Text="Home"
x:Name="bouton"
FontSize="30"
TextColor="White"
BackgroundColor="CornflowerBlue"
HorizontalOptions="Center"
VerticalOptions="Start">
<!--Clicked="Button_Clicked"-->
</Button>
<Button Text="Playlist"
FontSize="30"
TextColor="White"
BackgroundColor="CornflowerBlue"
HorizontalOptions="Center"
VerticalOptions="Start">
</Button>
<Button Text="Search"
FontSize="30"
TextColor="White"
BackgroundColor="CornflowerBlue"
HorizontalOptions="Center"
VerticalOptions="Start">
</Button>
<Button Text="Favorites"
FontSize="30"
TextColor="White"
BackgroundColor="CornflowerBlue"
HorizontalOptions="Center"
VerticalOptions="Start">
</Button>
<Button Text="Home" Style="{StaticResource buttons}"/>
<Button Text="Playlists" Style="{StaticResource buttons}"/>
<Button Text="Files" Style="{StaticResource buttons}"/>
</VerticalStackLayout>
</ControlTemplate>
@ -102,7 +88,279 @@
<Setter Property="HeightRequest" Value="175"></Setter>
<Setter Property="HorizontalOptions" Value="Center"></Setter>
</Style>
<Style x:Key="PageFlyoutTrigger" TargetType="Page">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="Shell.FlyoutBehavior" Value="Flyout"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="Shell.FlyoutBehavior" Value="Disabled"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="GridFlyoutTrigger" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="0" />
<ColumnDefinition Width="6*" />
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="6*" />
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="FooterTrigger" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter TargetName="ButtonStack" Property="StackLayout.Margin" Value="0,5,0,0"/>
<Setter TargetName="TimeStack" Property="Grid.Row" Value="1"/>
<Setter TargetName="TimeStack" Property="HorizontalStackLayout.Margin" Value="0,0,0,0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Medium">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter TargetName="ButtonStack" Property="StackLayout.Margin" Value="0,5,0,0"/>
<Setter TargetName="TimeStack" Property="Grid.Row" Value="1"/>
<Setter TargetName="TimeStack" Property="HorizontalStackLayout.Margin" Value="0,0,0,0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="*"/>
<RowDefinition Height="0"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter TargetName="ButtonStack" Property="StackLayout.Margin" Value="0,5,0,35"/>
<Setter TargetName="TimeStack" Property="Grid.Row" Value="0"/>
<Setter TargetName="TimeStack" Property="HorizontalStackLayout.Margin" Value="0,35,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="VolumeTrigger" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="*"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Medium">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="*"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LabelFooterTrigger" TargetType="Label">
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="FontSize" Value="15"/>
<Setter TargetName="artiste" Property="Label.FontSize" Value="12"/>
<Setter TargetName="Random" Property="ImageButton.IsVisible" Value="False"/>
<Setter TargetName="Loop" Property="ImageButton.IsVisible" Value="False"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Medium">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="FontSize" Value="18"/>
<Setter TargetName="artiste" Property="Label.FontSize" Value="15"/>
<Setter TargetName="Random" Property="ImageButton.IsVisible" Value="True"/>
<Setter TargetName="Loop" Property="ImageButton.IsVisible" Value="True"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="FontSize" Value="25"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ActivityIndicator">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
</Style>
@ -123,7 +381,7 @@
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
</Style>
<Style TargetType="Button">
<!--<Style TargetType="Button">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Blue200Accent}}" />
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Blue200Accent}, Dark={StaticResource White}}" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
@ -143,7 +401,7 @@
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</Style>-->
<Style TargetType="CheckBox">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />

Loading…
Cancel
Save