💄 Mise en place de la page détail des livres (sans binding)

master
Lucas EVARD 2 years ago
parent 0d29664f5b
commit 524044330a

@ -0,0 +1,123 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PocketBook.BookDetail"
Title="BookDetail">
<Grid>
<!-- Première rangée pour l'en-tête -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Stroke="#D0D0D2" Scale="1.01">
<StackLayout Grid.Row="0" Orientation="Horizontal" BackgroundColor="#F2F1F6" Padding="0,10,60,65">
<Image Source="chevron_left.svg" HorizontalOptions="Start"/>
<Label VerticalTextAlignment="Center" Text="Tous" FontAttributes="Bold" TextColor="{StaticResource Primary}" FontSize="15" Margin="5,0,0,0"/>
<Label Text="Détail du livre" FontAttributes="Bold" FontSize="18" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
</Border>
<!-- Deuxième rangée pour le contenu défilable -->
<ScrollView Grid.Row="1">
<StackLayout>
<StackLayout Orientation="Horizontal" Margin="15,0,0,20">
<Image x:Name="bookImage" Source="buveurencre.jpg" Margin="0,0,10,0" WidthRequest="90" HeightRequest="160"/>
<StackLayout Orientation="Vertical">
<Label Text="La horde du contrevent" FontAttributes="Bold" Margin="0,25,0,0"/>
<StackLayout Orientation="Horizontal" Margin="0,90,0,0">
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout Margin="15,0,0,0">
<Line BackgroundColor="#D0D0D2" />
<StackLayout Orientation="Horizontal">
<Label Text="Infos en ligne" FontSize="20" HorizontalOptions="StartAndExpand" Margin="10,10,0,10"/>
<Image Source="chevron_right.svg" HorizontalOptions="Start" Scale="0.6"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2" />
<StackLayout Margin="10,10,0,10">
<Label Text="Auteur" FontSize="16" FontAttributes="Bold"/>
<Label Text="Alain Damasio" FontSize="20" Margin="0,10,0,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2" />
<StackLayout Margin="10,10,0,10">
<Label Text="Maison d'édition" FontSize="16" FontAttributes="Bold"/>
<Label Text="Gallimard (2015)" FontSize="20" Margin="0,10,0,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2" />
<StackLayout Margin="10,10,0,10">
<Label Text="Résumé" FontSize="16" FontAttributes="Bold"/>
<Label FontSize="13" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales viverra justo, nec rutrum ligula elementum vitae. Suspendisse sit amet mi nec nulla pretium vulputate. Nam pretium volutpat ante, at viverra ex elementum quis. Pellentesque egestas nisl ac enim sollicitudin blandit. Mauris id scelerisque augue. Curabitur dui nibh, convallis quis sagittis eu, pretium vel erat. Sed ut aliquet mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget lacus quis nisl auctor semper. Vestibulum feugiat ut tortor vel ultrices.
Curabitur tempus erat nec sapien aliquam venenatis. In ornare odio in lacus ornare finibus. Maecenas semper nulla non tortor gravida tincidunt ut ut arcu. Sed magna sem, semper quis justo vitae, lacinia laoreet ex. Curabitur at mauris a velit pharetra fringilla commodo non elit. Quisque sollicitudin, ipsum id dapibus consectetur, sapien tortor mattis lectus, vitae tempor nisl nisl sed ipsum. In in orci nec odio hendrerit posuere a vel libero." Margin="0,10,15,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2" />
<StackLayout Margin="0,10,0,10">
<Label Text="Détails" FontSize="16" Margin="10,0,0,5" FontAttributes="Bold"/>
<StackLayout Orientation="Horizontal">
<Label Text="Nombre de pages" Margin="10,0,0,5" FontSize="20"/>
<Label Text="700" FontSize="20" HorizontalOptions="EndAndExpand" Margin="10,0,15,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Langue" Margin="10,0,0,5" FontSize="20"/>
<Label Text="français" FontSize="20" HorizontalOptions="EndAndExpand" Margin="10,0,15,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="10,0,0,10">
<Label Text="ISBN" FontSize="20"/>
<Label Text="9782070464234" FontSize="20" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
<Label Text="Statut de lecture" FontSize="16" Margin="10,10,0,5" FontAttributes="Bold"/>
<StackLayout Orientation="Horizontal">
<Label Text="Statut" Margin="10,0,0,5" FontSize="20"/>
<Label Text="Non lu" FontSize="20" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
<Label Text="Bibliothèque" FontSize="16" Margin="10,10,0,5" FontAttributes="Bold"/>
<StackLayout Orientation="Horizontal">
<Label Text="Ajouté le" Margin="10,0,0,10" FontSize="20"/>
<Label Text="10 août 2023" FontSize="20" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
<StackLayout Padding="50"/>
<Line BackgroundColor="#D0D0D2"/>
<StackLayout Orientation="Horizontal" Margin="10,15,0,15">
<Image Source="person.svg" WidthRequest="30" HeightRequest="30" />
<Label Text="Déplacer le livre" TextColor="{StaticResource Primary}" FontAttributes="Bold" VerticalOptions="Center" Margin="15,0,0,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
<StackLayout Orientation="Horizontal" Margin="10,15,0,15">
<Image Source="person.svg" WidthRequest="30" HeightRequest="30" />
<Label Text="Ajouter à la liste à lire plus tard" TextColor="{StaticResource Primary}" FontAttributes="Bold" VerticalOptions="Center" Margin="15,0,0,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
<StackLayout Orientation="Horizontal" Margin="10,15,0,15">
<Image Source="person.svg" WidthRequest="30" HeightRequest="30" />
<Label Text="Changer le statut de lecture" TextColor="{StaticResource Primary}" FontAttributes="Bold" VerticalOptions="Center" Margin="15,0,0,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
<StackLayout Orientation="Horizontal" Margin="10,15,0,15">
<Image Source="person.svg" WidthRequest="30" HeightRequest="30" />
<Label Text="Prêter le livre" TextColor="{StaticResource Primary}" FontAttributes="Bold" VerticalOptions="Center" Margin="15,0,0,0"/>
</StackLayout>
<Line BackgroundColor="#D0D0D2"/>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</Grid>
</ContentPage>

@ -0,0 +1,9 @@
namespace PocketBook;
public partial class BookDetail : ContentPage
{
public BookDetail(Book book)
{
InitializeComponent();
}
}

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PocketBook.ContentViewBook">
<VerticalStackLayout Margin="15,0,0,0">
<StackLayout Orientation="Horizontal" Margin="0,5,0,0">
<Image x:Name="bookImage" Margin="0,0,10,0" WidthRequest="75" HeightRequest="110"/>
<StackLayout Orientation="Vertical">
<Label x:Name="bookName" FontAttributes="Bold"/>
<Label x:Name="autorName" FontSize="12"/>
<Label x:Name="bookStatus" FontSize="12" TextColor="#AFAFAF"/>
<StackLayout Orientation="Horizontal" Margin="0,25,0,0">
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
<Line BackgroundColor="#E6E6E6"/>
</VerticalStackLayout>
</ContentView>

@ -0,0 +1,46 @@
namespace PocketBook;
public partial class ContentViewBook : ContentView
{
public static readonly BindableProperty BookNameProperty =
BindableProperty.Create(nameof(BookName), typeof(string), typeof(ContentViewBook), string.Empty);
public static readonly BindableProperty AutorNameProperty =
BindableProperty.Create(nameof(AutorName), typeof(string), typeof(ContentViewBook), string.Empty);
public static readonly BindableProperty BookStatusProperty =
BindableProperty.Create(nameof(BookStatus), typeof(string), typeof(ContentViewBook), string.Empty);
public static readonly BindableProperty BookImageProperty =
BindableProperty.Create(nameof(BookImage), typeof(string), typeof(ContentViewBook), string.Empty);
public string BookName
{
get { return (string)GetValue(BookNameProperty); }
set { SetValue(BookNameProperty, value); }
}
public string BookImage
{
get { return (string)GetValue(BookImageProperty); }
set { SetValue(BookImageProperty, value); }
}
public string AutorName
{
get { return (string)GetValue(AutorNameProperty); }
set { SetValue(AutorNameProperty, value); }
}
public string BookStatus
{
get { return (string)GetValue(BookStatusProperty); }
set { SetValue(BookStatusProperty, value); }
}
public ContentViewBook()
{
InitializeComponent();
bookName.SetBinding(Label.TextProperty, new Binding(nameof(BookName), source: this));
autorName.SetBinding(Label.TextProperty, new Binding(nameof(AutorName), source: this));
bookStatus.SetBinding(Label.TextProperty, new Binding(nameof(BookStatus), source: this));
bookImage.SetBinding(Image.SourceProperty, new Binding(nameof(BookImage), source: this));
}
}

@ -56,6 +56,12 @@
<MauiXaml Update="Auteur.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
<MauiXaml Update="BookDetail.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
<MauiXaml Update="ContentViewBook.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
<MauiXaml Update="ContentViewFilter.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
@ -67,4 +73,6 @@
</MauiXaml>
</ItemGroup>
<ProjectExtensions><VisualStudio><UserProperties XamarinHotReloadDebuggerTimeoutExceptionPocketBookHideInfoBar="True" /></VisualStudio></ProjectExtensions>
</Project>

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

@ -14,46 +14,38 @@
<Image Margin="15,0,0,0" x:Name="imageArrows" WidthRequest="25" HeightRequest="25" Source="arrows.svg"/>
</StackLayout>
</StackLayout>
<StackLayout BackgroundColor="#F8F8F8" Padding="5">
<Label Text="Alain Damasio" TextColor="#AFAFAF" FontAttributes="Bold" Margin="15,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Vertical" Margin="15,0,0,0">
<StackLayout Orientation="Horizontal" Margin="0,5,0,0">
<Image Margin="0,0,10,0" Source="dotnet_bot" WidthRequest="75" HeightRequest="110"/>
<StackLayout Orientation="Vertical">
<Label Text="La horde du contrevent" FontAttributes="Bold"/>
<Label Text="Alain Damasio" FontSize="12"/>
<Label Text="Non lu" FontSize="12" TextColor="#AFAFAF"/>
<StackLayout Orientation="Horizontal" Margin="0,25,0,0">
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
<Line BackgroundColor="#E6E6E6"/>
<StackLayout Orientation="Horizontal" Margin="0,5,0,0">
<Image Margin="0,0,10,0" Source="dotnet_bot" WidthRequest="75" HeightRequest="110"/>
<StackLayout Orientation="Vertical">
<Label Text="La horde du contrevent" FontAttributes="Bold"/>
<Label Text="Alain Damasio" FontSize="12"/>
<Label Text="Non lu" FontSize="12" TextColor="#AFAFAF"/>
<StackLayout Orientation="Horizontal" Margin="0,25,0,0">
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<Image Source="star.svg" WidthRequest="20"/>
<CollectionView ItemsSource="{Binding mesAuteurs}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<StackLayout BackgroundColor="#F8F8F8" Padding="5">
<Label Text="{Binding name}" TextColor="#AFAFAF" FontAttributes="Bold" Margin="15,0,0,0" />
</StackLayout>
<CollectionView ItemsSource="{Binding books}" SelectionMode="Single" SelectionChanged="OnCollectionViewSelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<local:ContentViewBook x:Name="selectedItemBook" BookImage="buveurencre.jpg" AutorName="{Binding auteur}" BookName="{Binding name}" BookStatus="{Binding type}"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</StackLayout>
</StackLayout>
<Line BackgroundColor="#E6E6E6"/>
</StackLayout>
<StackLayout BackgroundColor="#F8F8F8" Padding="5">
<Label Text="Alain Damasio" TextColor="#AFAFAF" FontAttributes="Bold" Margin="15,0,0,0"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</VerticalStackLayout>
</ScrollView>
</ContentPage>

@ -1,10 +1,58 @@
namespace PocketBook;
public partial class Book
{
public string name { get; set; }
public string type { get; set; }
public string auteur { get; set; }
public string image { get; set; }
public Book(string name, string type,string auteur)
{
this.name = name;
this.auteur = auteur;
this.type = type;
}
}
public partial class Auteur
{
public string name { get; set; }
public List<Book> books { get; set; }
public Auteur(string name)
{
this.name = name;
books= new List<Book>();
books.Add(new Book("Buveur d'encre", "En lecture",name));
books.Add(new Book("Caca boudin", "En lecture", name));
books.Add(new Book("Prout", "En lecture", name));
books.Add(new Book("Benjamin", "En lecture", name));
}
}
public partial class TousPage : ContentPage
{
public List<Auteur> mesAuteurs { get; set; }
public List<Book> books { get; set; }
public TousPage()
{
mesAuteurs = new List<Auteur>
{
new Auteur("Paul caca"),
new Auteur("Caca paul")
};
InitializeComponent();
BindingContext=this;
}
public async void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
Console.WriteLine("COUCOU");
if (e.CurrentSelection.FirstOrDefault() is Book livreSelectionne)
{
await Navigation.PushAsync(new BookDetail(livreSelectionne));
}
}
}
Loading…
Cancel
Save