claunia/marechai
1
0
Fork 0
mirror of https://github.com/claunia/marechai.git synced 2026-07-08 17:57:08 +00:00
Code Issues 15 Packages Projects Releases Wiki Activity

Replace photo carousels with responsive grids in Uno app

Browse Source 
Machine, GPU, Processor, and Sound Synth detail pages now show photos
as a card grid (ItemsRepeater + UniformGridLayout), matching the
Blazor app's style and the grid pattern already used for software
screenshots/promo art. Company logos carousel is unchanged.
This commit is contained in:
Natalia Portillo
2026-07-01 04:09:26 +01:00
parent 9ecca065a9
commit 0bfd49b382
4 changed files with 115 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
Marechai.App/Presentation/Views/GpuDetailPage.xaml
View File

@@ -6,7 +6,6 @@
xmlns:loc="using:Marechai.App.Presentation.Converters"
xmlns:local="using:Marechai.App.Presentation.Views"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
NavigationCacheMode="Required"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
@@ -279,32 +278,40 @@
FontSize="14"
FontWeight="SemiBold"
Foreground="{ThemeResource TextControlForeground}" />
<controls:Carousel ItemsSource="{Binding Photos}"
Height="280"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
HorizontalAlignment="Stretch">
<controls:Carousel.ItemTemplate>
<ItemsRepeater ItemsSource="{Binding Photos}">
<ItemsRepeater.Layout>
<UniformGridLayout MinItemWidth="180"
MinItemHeight="180"
MinColumnSpacing="12"
MinRowSpacing="12"
ItemsStretch="Fill" />
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate>
<Button Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderThickness="0"
Padding="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
<Button Padding="0"
Margin="0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Command="{Binding ElementName=PageRoot, Path=DataContext.SelectPhotoCommand}"
CommandParameter="{Binding PhotoId}">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxWidth="256"
MaxHeight="256" />
CommandParameter="{Binding PhotoId}"
Background="Transparent"
BorderThickness="0">
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="8">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxHeight="256" />
</Border>
</Button>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</StackPanel>
<!-- Videos -->

44
Marechai.App/Presentation/Views/MachineViewPage.xaml
View File

@@ -6,7 +6,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc="using:Marechai.App.Presentation.Converters"
xmlns:wctui="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:local="using:Marechai.App.Presentation.Views"
xmlns:components="using:Marechai.App.Presentation.Components"
NavigationCacheMode="Disabled"
@@ -830,33 +829,40 @@
FontSize="14"
FontWeight="SemiBold"
Foreground="{ThemeResource TextControlForeground}" />
<wctui:Carousel ItemsSource="{Binding Photos}"
Height="280"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
HorizontalAlignment="Stretch">
<wctui:Carousel.ItemTemplate>
<ItemsRepeater ItemsSource="{Binding Photos}">
<ItemsRepeater.Layout>
<UniformGridLayout MinItemWidth="180"
MinItemHeight="180"
MinColumnSpacing="12"
MinRowSpacing="12"
ItemsStretch="Fill" />
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate>
<Button Command="{Binding DataContext.ViewPhotoDetailsCommand, ElementName=PageRoot}"
<Button Padding="0"
Margin="0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Command="{Binding DataContext.ViewPhotoDetailsCommand, ElementName=PageRoot}"
CommandParameter="{Binding PhotoId}"
Padding="0"
Background="Transparent">
<Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Background="Transparent"
BorderThickness="0">
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="8">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxWidth="256"
MaxHeight="256" />
</Grid>
</Border>
</Button>
</DataTemplate>
</wctui:Carousel.ItemTemplate>
</wctui:Carousel>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</StackPanel>
<!-- Bottom Spacing -->

53
Marechai.App/Presentation/Views/ProcessorDetailPage.xaml
View File

@@ -6,7 +6,6 @@
xmlns:loc="using:Marechai.App.Presentation.Converters"
xmlns:local="using:Marechai.App.Presentation.Views"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
NavigationCacheMode="Required"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
@@ -258,32 +257,40 @@
FontSize="14"
FontWeight="SemiBold"
Foreground="{ThemeResource TextControlForeground}" />
<controls:Carousel ItemsSource="{Binding Photos}"
Height="280"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
HorizontalAlignment="Stretch">
<controls:Carousel.ItemTemplate>
<ItemsRepeater ItemsSource="{Binding Photos}">
<ItemsRepeater.Layout>
<UniformGridLayout MinItemWidth="180"
MinItemHeight="180"
MinColumnSpacing="12"
MinRowSpacing="12"
ItemsStretch="Fill" />
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate>
<Button Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderThickness="0"
Padding="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
<Button Padding="0"
Margin="0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Command="{Binding ElementName=PageRoot, Path=DataContext.SelectPhotoCommand}"
CommandParameter="{Binding PhotoId}">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxWidth="256"
MaxHeight="256" />
CommandParameter="{Binding PhotoId}"
Background="Transparent"
BorderThickness="0">
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="8">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxHeight="256" />
</Border>
</Button>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</StackPanel>
<!-- Videos -->

53
Marechai.App/Presentation/Views/SoundSynthDetailPage.xaml
View File

@@ -6,7 +6,6 @@
xmlns:loc="using:Marechai.App.Presentation.Converters"
xmlns:local="using:Marechai.App.Presentation.Views"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
NavigationCacheMode="Required"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
@@ -217,32 +216,40 @@
FontSize="14"
FontWeight="SemiBold"
Foreground="{ThemeResource TextControlForeground}" />
<controls:Carousel ItemsSource="{Binding Photos}"
Height="280"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
HorizontalAlignment="Stretch">
<controls:Carousel.ItemTemplate>
<ItemsRepeater ItemsSource="{Binding Photos}">
<ItemsRepeater.Layout>
<UniformGridLayout MinItemWidth="180"
MinItemHeight="180"
MinColumnSpacing="12"
MinRowSpacing="12"
ItemsStretch="Fill" />
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate>
<Button Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderThickness="0"
Padding="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
<Button Padding="0"
Margin="0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Command="{Binding ElementName=PageRoot, Path=DataContext.SelectPhotoCommand}"
CommandParameter="{Binding PhotoId}">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxWidth="256"
MaxHeight="256" />
CommandParameter="{Binding PhotoId}"
Background="Transparent"
BorderThickness="0">
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="8">
<Image Source="{Binding ThumbnailImageSource}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
MaxHeight="256" />
</Border>
</Button>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</StackPanel>
<!-- Videos -->