Upgraded UI drastically
This commit is contained in:
Ano-sys
@@ -67,7 +67,7 @@ public static class CardHoverEffectBehavior
|
||||
if (sender is not Control element)
|
||||
return;
|
||||
|
||||
element.ZIndex = 1;
|
||||
element.ZIndex = 10;
|
||||
var visual = ElementComposition.GetElementVisual(element);
|
||||
var compositor = visual?.Compositor;
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ public partial class MainWindowViewModel : ViewModelBase
|
||||
[ObservableProperty] private ObservableCollection<Photo> _photos = [];
|
||||
|
||||
[ObservableProperty] private Photo? _selectedPhoto;
|
||||
[ObservableProperty] private bool _photosLoaded = false;
|
||||
|
||||
public string LibraryPath { get; private set; } = string.Empty;
|
||||
|
||||
@@ -40,6 +41,13 @@ public partial class MainWindowViewModel : ViewModelBase
|
||||
|
||||
LibraryPath = folder;
|
||||
await AddPhotosAsync(folder);
|
||||
PhotosLoaded = true;
|
||||
}
|
||||
|
||||
public void CloseDirectory()
|
||||
{
|
||||
Photos.Clear();
|
||||
PhotosLoaded = false;
|
||||
}
|
||||
|
||||
private void SanitizeFiles(List<string> files, IEnumerable<string> extensions)
|
||||
|
||||
+200
-75
@@ -7,7 +7,9 @@
|
||||
xmlns:ic="using:Avalonia.Xaml.Interactions.Core"
|
||||
xmlns:models="using:Photos.Models"
|
||||
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:DataType="vm:MainWindowViewModel"
|
||||
x:Name="Root"
|
||||
@@ -18,86 +20,209 @@
|
||||
ExtendClientAreaChromeHints="NoChrome"
|
||||
TransparencyLevelHint="AcrylicBlur"
|
||||
Background="Transparent"
|
||||
ExtendClientAreaToDecorationsHint="True"
|
||||
>
|
||||
ExtendClientAreaToDecorationsHint="True">
|
||||
|
||||
<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/>
|
||||
</Design.DataContext>
|
||||
|
||||
<Grid ColumnDefinitions="1*, 5*" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
|
||||
<Menu>
|
||||
<Button Content="Open Directory" Command="{Binding OpenDirectory}"/>
|
||||
</Menu>
|
||||
<ScrollViewer Grid.Column="1">
|
||||
<ItemsRepeater ItemsSource="{Binding Photos}"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Margin="5"
|
||||
>
|
||||
<ItemsRepeater.Layout>
|
||||
<UniformGridLayout MinItemWidth="190"
|
||||
MinItemHeight="240"
|
||||
MinRowSpacing="12"
|
||||
MinColumnSpacing="12"
|
||||
>
|
||||
</UniformGridLayout>
|
||||
</ItemsRepeater.Layout>
|
||||
<Grid Background="#0F0F10">
|
||||
<!-- Hintergrund -->
|
||||
<Rectangle Fill="#CC0B0B0C"/>
|
||||
|
||||
<ItemsRepeater.ItemTemplate>
|
||||
<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>
|
||||
</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}"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
ClipToBounds="False">
|
||||
<ItemsRepeater.Layout>
|
||||
<UniformGridLayout MinItemWidth="220"
|
||||
MinItemHeight="290"
|
||||
MinRowSpacing="18"
|
||||
MinColumnSpacing="18"/>
|
||||
</ItemsRepeater.Layout>
|
||||
|
||||
<ItemsRepeater.ItemTemplate>
|
||||
<DataTemplate DataType="models:Photo">
|
||||
<Border Background="#B8141416"
|
||||
BorderBrush="#22FFFFFF"
|
||||
BorderThickness="1"
|
||||
CornerRadius="18"
|
||||
Padding="14"
|
||||
BoxShadow="0 10 24 0 #30000000"
|
||||
anim:CardHoverEffectBehavior.IsEnabled="True"
|
||||
anim:CardHoverEffectBehavior.MaxRotationAngle="2.5"
|
||||
anim:CardHoverEffectBehavior.ScaleFactor="1.08">
|
||||
<StackPanel Orientation="Vertical"
|
||||
Spacing="10">
|
||||
<i:Interaction.Behaviors>
|
||||
<ic:EventTriggerBehavior EventName="PointerReleased">
|
||||
<ic:InvokeCommandAction Command="{Binding DataContext.PhotoClicked, ElementName=Root}"
|
||||
PassEventArgsToCommand="True"/>
|
||||
</ic:EventTriggerBehavior>
|
||||
</i:Interaction.Behaviors>
|
||||
|
||||
<Border Width="180"
|
||||
Height="180"
|
||||
HorizontalAlignment="Center"
|
||||
CornerRadius="12"
|
||||
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>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsRepeater.ItemTemplate>
|
||||
</ItemsRepeater>
|
||||
</Border>
|
||||
</ScrollViewer>
|
||||
|
||||
<!-- Bild-Overlay -->
|
||||
<TransitioningContentControl Grid.Row="0"
|
||||
Grid.RowSpan="2"
|
||||
Content="{Binding SelectedPhoto}"
|
||||
ZIndex="50">
|
||||
<TransitioningContentControl.PageTransition>
|
||||
<CrossFade Duration="0:0:0.18"/>
|
||||
</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>
|
||||
<DataTemplate DataType="models:Photo">
|
||||
<Border BorderBrush="Black"
|
||||
Background="#aa000000"
|
||||
BorderThickness="1"
|
||||
CornerRadius="7.5"
|
||||
anim:CardHoverEffectBehavior.IsEnabled="True"
|
||||
anim:CardHoverEffectBehavior.MaxRotationAngle="3.5"
|
||||
anim:CardHoverEffectBehavior.ScaleFactor="1.5"
|
||||
>
|
||||
<StackPanel Orientation="Vertical" Margin="12">
|
||||
<i:Interaction.Behaviors>
|
||||
<ic:EventTriggerBehavior EventName="PointerReleased">
|
||||
<ic:InvokeCommandAction Command="{Binding DataContext.PhotoClicked, ElementName=Root}" PassEventArgsToCommand="True"/>
|
||||
</ic:EventTriggerBehavior>
|
||||
</i:Interaction.Behaviors>
|
||||
<Image Source="{Binding PreviewImage}"
|
||||
Width="150"
|
||||
Height="150"/>
|
||||
<TextBlock Text="{Binding DisplayName}"
|
||||
HorizontalAlignment="Center"
|
||||
Width="150" />
|
||||
<TextBlock Text="{Binding DisplayPath}" HorizontalAlignment="Center" Width="150"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsRepeater.ItemTemplate>
|
||||
</ItemsRepeater>
|
||||
</ScrollViewer>
|
||||
<TransitioningContentControl Grid.Column="0"
|
||||
Grid.ColumnSpan="2"
|
||||
Content="{Binding SelectedPhoto}">
|
||||
<TransitioningContentControl.PageTransition>
|
||||
<CrossFade Duration="0:0:0.18" />
|
||||
</TransitioningContentControl.PageTransition>
|
||||
<Grid>
|
||||
<Rectangle Fill="#E6101011"/>
|
||||
|
||||
<TransitioningContentControl.ContentTemplate>
|
||||
<DataTemplate DataType="models:Photo">
|
||||
<Border Background="#AA000000">
|
||||
<Image Source="{Binding FullImage}"
|
||||
Margin="50"
|
||||
Stretch="Uniform"
|
||||
>
|
||||
<i:Interaction.Behaviors>
|
||||
<ic:EventTriggerBehavior EventName="PointerReleased">
|
||||
<ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
|
||||
</ic:EventTriggerBehavior>
|
||||
</i:Interaction.Behaviors>
|
||||
</Image>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</TransitioningContentControl.ContentTemplate>
|
||||
</TransitioningContentControl>
|
||||
<Border Margin="36"
|
||||
Padding="18"
|
||||
Background="#12000000"
|
||||
BorderBrush="#18FFFFFF"
|
||||
BorderThickness="1"
|
||||
CornerRadius="24">
|
||||
<Grid RowDefinitions="*, auto">
|
||||
<Image Source="{Binding FullImage}"
|
||||
Stretch="Uniform">
|
||||
<i:Interaction.Behaviors>
|
||||
<ic:EventTriggerBehavior EventName="PointerReleased">
|
||||
<ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
|
||||
</ic:EventTriggerBehavior>
|
||||
</i:Interaction.Behaviors>
|
||||
</Image>
|
||||
<TextBlock Grid.Row="1" Text="{Binding DisplayName}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</TransitioningContentControl.ContentTemplate>
|
||||
</TransitioningContentControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Window>
|
||||
</Window>
|
||||
Reference in New Issue
Block a user