t/SimplePhotosApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgraded UI drastically

Browse Source
This commit is contained in:
Ano-sys
2026-04-03 00:44:55 +02:00
parent 8735570f35
commit 1ff80890d5
3 changed files with 209 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Photos/Animations/CardHoverEffectBehavior.cs
+1 -1
View File
@@ -67,7 +67,7 @@ public static class CardHoverEffectBehavior
if (sender is not Control element) if (sender is not Control element)
return; return;
element.ZIndex = 1; element.ZIndex = 10;
var visual = ElementComposition.GetElementVisual(element); var visual = ElementComposition.GetElementVisual(element);
var compositor = visual?.Compositor; var compositor = visual?.Compositor;
Photos/ViewModels/MainWindowViewModel.cs
+8
View File
@@ -22,6 +22,7 @@ public partial class MainWindowViewModel : ViewModelBase
[ObservableProperty] private ObservableCollection<Photo> _photos = []; [ObservableProperty] private ObservableCollection<Photo> _photos = [];
[ObservableProperty] private Photo? _selectedPhoto; [ObservableProperty] private Photo? _selectedPhoto;
[ObservableProperty] private bool _photosLoaded = false;
public string LibraryPath { get; private set; } = string.Empty; public string LibraryPath { get; private set; } = string.Empty;
@@ -40,6 +41,13 @@ public partial class MainWindowViewModel : ViewModelBase
LibraryPath = folder; LibraryPath = folder;
await AddPhotosAsync(folder); await AddPhotosAsync(folder);
PhotosLoaded = true;
}
public void CloseDirectory()
{
Photos.Clear();
PhotosLoaded = false;
} }
private void SanitizeFiles(List<string> files, IEnumerable<string> extensions) private void SanitizeFiles(List<string> files, IEnumerable<string> extensions)
Photos/Views/MainWindow.axaml
+163 -38
View File
@@ -7,7 +7,9 @@
xmlns:ic="using:Avalonia.Xaml.Interactions.Core" xmlns:ic="using:Avalonia.Xaml.Interactions.Core"
xmlns:models="using:Photos.Models" xmlns:models="using:Photos.Models"
xmlns:anim="using:Photos.Animations" xmlns:anim="using:Photos.Animations"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" mc:Ignorable="d"
d:DesignWidth="1200"
d:DesignHeight="800"
x:Class="Photos.Views.MainWindow" x:Class="Photos.Views.MainWindow"
x:DataType="vm:MainWindowViewModel" x:DataType="vm:MainWindowViewModel"
x:Name="Root" x:Name="Root"
@@ -18,86 +20,209 @@
ExtendClientAreaChromeHints="NoChrome" ExtendClientAreaChromeHints="NoChrome"
TransparencyLevelHint="AcrylicBlur" TransparencyLevelHint="AcrylicBlur"
Background="Transparent" Background="Transparent"
ExtendClientAreaToDecorationsHint="True" ExtendClientAreaToDecorationsHint="True">
>
<Design.DataContext> <Design.DataContext>
<!-- This only sets the DataContext for the previewer in an IDE,
to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
<vm:MainWindowViewModel/> <vm:MainWindowViewModel/>
</Design.DataContext> </Design.DataContext>
<Grid ColumnDefinitions="1*, 5*" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid Background="#0F0F10">
<Menu> <!-- Hintergrund -->
<Button Content="Open Directory" Command="{Binding OpenDirectory}"/> <Rectangle Fill="#CC0B0B0C"/>
<Grid RowDefinitions="Auto,*">
<!-- Top Bar -->
<Border Grid.Row="0"
Margin="18,18,18,0"
Padding="14,10"
Background="#CC161618"
BorderBrush="#22FFFFFF"
BorderThickness="1"
CornerRadius="14"
BoxShadow="0 10 30 0 #50000000"
ZIndex="20">
<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Left"
Spacing="10"
VerticalAlignment="Center">
<Border Width="10"
Height="10"
CornerRadius="999"
Background="#E6FFFFFF"
Opacity="0.9"/>
<TextBlock Text="Photos"
VerticalAlignment="Center"
FontSize="16"
FontWeight="SemiBold"
Foreground="#F2FFFFFF"/>
</StackPanel>
<Menu DockPanel.Dock="Right"
Background="Transparent"
Foreground="#EDEDED"
Margin="5,0,0,0"
>
<!--
<MenuItem Header="_File">
<MenuItem Header="_Open" Command="{Binding OpenDirectory}"/>
<MenuItem Header="_Close" Command="{Binding CloseDirectory}"/>
</MenuItem>
-->
<MenuItem Header="_Open Library" IsVisible="{Binding !PhotosLoaded}" Command="{Binding OpenDirectory}"/>
<MenuItem Header="_Close Library" IsVisible="{Binding PhotosLoaded}" Command="{Binding CloseDirectory}"/>
</Menu> </Menu>
<ScrollViewer Grid.Column="1"> </DockPanel>
</Border>
<!-- Empty state -->
<Grid Grid.Row="1"
IsVisible="{Binding !PhotosLoaded}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="28"
Background="#B3141416"
BorderBrush="#22FFFFFF"
BorderThickness="1"
CornerRadius="18"
BoxShadow="0 16 40 0 #40000000">
<StackPanel Spacing="14"
HorizontalAlignment="Center">
<TextBlock Text="No directory opened"
HorizontalAlignment="Center"
FontSize="22"
FontWeight="SemiBold"
Foreground="#F4FFFFFF"/>
<TextBlock Text="Choose a folder to display your images."
HorizontalAlignment="Center"
Foreground="#B8FFFFFF"/>
<Button Content="Open Directory"
Command="{Binding OpenDirectory}"
HorizontalAlignment="Center"
Padding="20,10"
CornerRadius="10"/>
</StackPanel>
</Border>
</Grid>
<!-- Galerie -->
<ScrollViewer Grid.Row="0"
Grid.RowSpan="2"
IsVisible="{Binding PhotosLoaded}">
<Border Padding="72,88,72,48">
<ItemsRepeater ItemsSource="{Binding Photos}" <ItemsRepeater ItemsSource="{Binding Photos}"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="5" ClipToBounds="False">
>
<ItemsRepeater.Layout> <ItemsRepeater.Layout>
<UniformGridLayout MinItemWidth="190" <UniformGridLayout MinItemWidth="220"
MinItemHeight="240" MinItemHeight="290"
MinRowSpacing="12" MinRowSpacing="18"
MinColumnSpacing="12" MinColumnSpacing="18"/>
>
</UniformGridLayout>
</ItemsRepeater.Layout> </ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate> <ItemsRepeater.ItemTemplate>
<DataTemplate DataType="models:Photo"> <DataTemplate DataType="models:Photo">
<Border BorderBrush="Black" <Border Background="#B8141416"
Background="#aa000000" BorderBrush="#22FFFFFF"
BorderThickness="1" BorderThickness="1"
CornerRadius="7.5" CornerRadius="18"
Padding="14"
BoxShadow="0 10 24 0 #30000000"
anim:CardHoverEffectBehavior.IsEnabled="True" anim:CardHoverEffectBehavior.IsEnabled="True"
anim:CardHoverEffectBehavior.MaxRotationAngle="3.5" anim:CardHoverEffectBehavior.MaxRotationAngle="2.5"
anim:CardHoverEffectBehavior.ScaleFactor="1.5" anim:CardHoverEffectBehavior.ScaleFactor="1.08">
> <StackPanel Orientation="Vertical"
<StackPanel Orientation="Vertical" Margin="12"> Spacing="10">
<i:Interaction.Behaviors> <i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="PointerReleased"> <ic:EventTriggerBehavior EventName="PointerReleased">
<ic:InvokeCommandAction Command="{Binding DataContext.PhotoClicked, ElementName=Root}" PassEventArgsToCommand="True"/> <ic:InvokeCommandAction Command="{Binding DataContext.PhotoClicked, ElementName=Root}"
PassEventArgsToCommand="True"/>
</ic:EventTriggerBehavior> </ic:EventTriggerBehavior>
</i:Interaction.Behaviors> </i:Interaction.Behaviors>
<Image Source="{Binding PreviewImage}"
Width="150" <Border Width="180"
Height="150"/> Height="180"
<TextBlock Text="{Binding DisplayName}"
HorizontalAlignment="Center" HorizontalAlignment="Center"
Width="150" /> CornerRadius="12"
<TextBlock Text="{Binding DisplayPath}" HorizontalAlignment="Center" Width="150"/> ClipToBounds="True"
Background="#14000000">
<Image Source="{Binding PreviewImage}"
Stretch="UniformToFill"/>
</Border>
<TextBlock Text="{Binding DisplayName}"
ToolTip.Tip="{Binding DisplayName}"
HorizontalAlignment="Center"
Width="180"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
FontSize="14"
FontWeight="SemiBold"
Foreground="#F1FFFFFF"/>
<TextBlock Text="{Binding DisplayPath}"
ToolTip.Tip="{Binding DisplayPath}"
HorizontalAlignment="Center"
Width="180"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
MaxLines="2"
FontSize="11"
Foreground="#99FFFFFF"/>
</StackPanel> </StackPanel>
</Border> </Border>
</DataTemplate> </DataTemplate>
</ItemsRepeater.ItemTemplate> </ItemsRepeater.ItemTemplate>
</ItemsRepeater> </ItemsRepeater>
</Border>
</ScrollViewer> </ScrollViewer>
<TransitioningContentControl Grid.Column="0"
Grid.ColumnSpan="2" <!-- Bild-Overlay -->
Content="{Binding SelectedPhoto}"> <TransitioningContentControl Grid.Row="0"
Grid.RowSpan="2"
Content="{Binding SelectedPhoto}"
ZIndex="50">
<TransitioningContentControl.PageTransition> <TransitioningContentControl.PageTransition>
<CrossFade Duration="0:0:0.18"/> <CrossFade Duration="0:0:0.18"/>
</TransitioningContentControl.PageTransition> </TransitioningContentControl.PageTransition>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="PointerReleased">
<ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<TransitioningContentControl.ContentTemplate> <TransitioningContentControl.ContentTemplate>
<DataTemplate DataType="models:Photo"> <DataTemplate DataType="models:Photo">
<Border Background="#AA000000"> <Grid>
<Rectangle Fill="#E6101011"/>
<Border Margin="36"
Padding="18"
Background="#12000000"
BorderBrush="#18FFFFFF"
BorderThickness="1"
CornerRadius="24">
<Grid RowDefinitions="*, auto">
<Image Source="{Binding FullImage}" <Image Source="{Binding FullImage}"
Margin="50" Stretch="Uniform">
Stretch="Uniform"
>
<i:Interaction.Behaviors> <i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="PointerReleased"> <ic:EventTriggerBehavior EventName="PointerReleased">
<ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/> <ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
</ic:EventTriggerBehavior> </ic:EventTriggerBehavior>
</i:Interaction.Behaviors> </i:Interaction.Behaviors>
</Image> </Image>
<TextBlock Grid.Row="1" Text="{Binding DisplayName}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border> </Border>
</Grid>
</DataTemplate> </DataTemplate>
</TransitioningContentControl.ContentTemplate> </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl> </TransitioningContentControl>
</Grid> </Grid>
</Grid>
</Window> </Window>