Skip to content

Added/improved layout modes #827

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 24, 2020
Merged

Added/improved layout modes #827

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5b289ba
Added 'Tiles' and resizable grid layouts
Dylan-Osborne May 22, 2020
d33b742
Merge remote-tracking branch 'upstream/master'
Dylan-Osborne May 22, 2020
b27e6c8
Added QuickLook shortcut support to the tiles layout.
Dylan-Osborne May 22, 2020
6cd400a
Fixed type to find and F2 to rename for tiles layout
Dylan-Osborne May 22, 2020
0817fe4
Merged TilesBrowser into PhotoAlbum
Dylan-Osborne May 23, 2020
fcc39a0
PhotoAlbum now only updates the DataTemplate when the layout changes
Dylan-Osborne May 23, 2020
876c143
Merge pull request #1 from Dylan-Osborne/layout-datatemplate
Dylan-Osborne May 23, 2020
42b4d7c
Added layout change support for ctrl + numeric +/-
Dylan-Osborne May 23, 2020
3472487
Fixed xaml formatting
yaira2 May 24, 2020
ed948bd
Improvements to tiles layout
Dylan-Osborne May 24, 2020
56c2e1a
Merge branch 'master' of https://github.com/Dylan-Osborne/files-uwp
Dylan-Osborne May 24, 2020
18d6218
Fixed duplicate issue caused by merge
Dylan-Osborne May 24, 2020
e6667ed
Renamed PhotoAlbum to GridViewBrowser
Dylan-Osborne May 24, 2020
ff88510
Merge branch 'master' into master
Dylan-Osborne May 24, 2020
c06b041
Fixed layout rename file duplicates
Dylan-Osborne May 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Files/Assets/GridViewLarge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Files/Assets/GridViewSmall.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions Files/BaseLayout.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
using System.Runtime.CompilerServices;
using Windows.ApplicationModel.DataTransfer;
using Windows.Storage;
using Windows.System;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
Expand Down Expand Up @@ -376,5 +377,41 @@ protected void InitializeDrag(UIElement element)
}
}
}

// VirtualKey doesn't support / accept plus and minus by default.
public readonly VirtualKey plusKey = (VirtualKey)187;
public readonly VirtualKey minusKey = (VirtualKey)189;

public void GridViewSizeIncrease(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
App.AppSettings.GridViewSize = App.AppSettings.GridViewSize + 25; // Make Larger
if (args != null)
args.Handled = true;
}

public void GridViewSizeDecrease(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
App.AppSettings.GridViewSize = App.AppSettings.GridViewSize - 25; // Make Smaller
if (args != null)
args.Handled = true;
}

public void BaseLayout_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.KeyModifiers == VirtualKeyModifiers.Control)
{
if (e.GetCurrentPoint(null).Properties.MouseWheelDelta < 0) // Mouse wheel down
{
GridViewSizeDecrease(null, null);
}
else // Mouse wheel up
{
GridViewSizeIncrease(null, null);
}

e.Handled = true;
}
}

}
}
2 changes: 2 additions & 0 deletions Files/Files.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,8 @@
<Content Include="Assets\Files UWP Icon.png" />
<Content Include="Assets\FilesHome.png" />
<Content Include="Assets\FolderIcon.svg" />
<Content Include="Assets\GridViewLarge.png" />
<Content Include="Assets\GridViewSmall.png" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are the Segoe UI assets you can use instead of these?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I've used the FontIcon fonts @tsvietOK suggested, it looks much better in the dark theme.

I'll commit the changes as soon as I've fixed the folder bug.

<Content Include="Assets\LargeTile.scale-100.png" />
<Content Include="Assets\LargeTile.scale-125.png" />
<Content Include="Assets\LargeTile.scale-150.png" />
Expand Down
7 changes: 6 additions & 1 deletion Files/UserControls/LayoutModes/GenericFileBrowser.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
NavigationCacheMode="Required"
PointerReleased="GenericItemView_PointerReleased"
mc:Ignorable="d">
mc:Ignorable="d"
PointerWheelChanged="BaseLayout_PointerWheelChanged">

<local:BaseLayout.Resources>
<MenuFlyout x:Key="BaseLayoutContextFlyout">
Expand Down Expand Up @@ -287,6 +288,10 @@
x:Name="RootGrid"
Background="Transparent"
ContextFlyout="{StaticResource BaseLayoutContextFlyout}">
<Grid.KeyboardAccelerators>
<KeyboardAccelerator Key="{ x:Bind plusKey }" Modifiers="Control" Invoked="{x:Bind local:App.CurrentInstance.ContentPage.GridViewSizeIncrease}" />
<KeyboardAccelerator Key="Add" Modifiers="Control" Invoked="{x:Bind local:App.CurrentInstance.ContentPage.GridViewSizeIncrease}" />
</Grid.KeyboardAccelerators>
<ProgressBar
x:Name="progBar"
Height="10"
Expand Down
278 changes: 195 additions & 83 deletions Files/UserControls/LayoutModes/PhotoAlbum.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
NavigationCacheMode="Required"
PointerPressed="PhotoAlbumViewer_PointerPressed"
mc:Ignorable="d">
mc:Ignorable="d"
PointerWheelChanged="BaseLayout_PointerWheelChanged">
<local:BaseLayout.Resources>
<MenuFlyout x:Key="BaseLayoutContextFlyout">
<MenuFlyoutSubItem
Expand Down Expand Up @@ -276,12 +277,205 @@
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</MenuFlyout>

<DataTemplate x:Name="PhotoAlbumTemplate" x:DataType="local2:ListedItem">
<Grid
Width="{x:Bind local:App.AppSettings.GridViewSize, Mode=OneWay}"
Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
DataContext="{x:Bind}"
DataContextChanged="FileListGridItem_DataContextChanged"
EffectiveViewportChanged="Grid_EffectiveViewportChanged"
PointerPressed="FileListGridItem_PointerPressed"
IsRightTapEnabled="True"
RightTapped="StackPanel_RightTapped"
Tag="ItemRoot"
ToolTipService.ToolTip="{x:Bind ItemName}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Tag="ItemImage">
<Grid
x:Name="Picture"
Padding="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
Width="{x:Bind local:App.AppSettings.GridViewSize, Mode=OneWay}">
<Image Source="{x:Bind FileImage, Mode=OneWay}" Stretch="Uniform" />
</Grid>
<Image
x:Name="FolderGlyph"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadFolderGlyph}"
Stretch="Uniform">
<Image.Source>
<SvgImageSource
RasterizePixelHeight="128"
RasterizePixelWidth="128"
UriSource="/Assets/FolderIcon.svg" />
</Image.Source>
</Image>
<Grid
x:Name="TypeUnknownGlyph"
Padding="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadUnknownTypeGlyph, Mode=OneWay}"
Width="{x:Bind local:App.AppSettings.GridViewSize, Mode=OneWay}">
<Viewbox
MaxWidth="{x:Bind local:App.AppSettings.GridViewSize, Mode=OneWay}"
MaxHeight="{x:Bind local:App.AppSettings.GridViewSize, Mode=OneWay}">
<SymbolIcon Symbol="Page2" />
</Viewbox>
</Grid>
</Grid>
<StackPanel
Grid.Row="1">
<TextBlock
Margin="0,0,0,10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalTextAlignment="Center"
Text="{x:Bind ItemName}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<TextBox
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Text="{x:Bind ItemName}"
TextAlignment="Center"
TextWrapping="Wrap"
Visibility="Collapsed" />
</StackPanel>
</Grid>
</DataTemplate>

<DataTemplate x:Name="TilesBrowserTemplate" x:DataType="local2:ListedItem">
<Grid
Width="360"
Height="125"
Margin="0,0,0,0"
Padding="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
DataContext="{x:Bind}"
DataContextChanged="FileListGridItem_DataContextChanged"
EffectiveViewportChanged="Grid_EffectiveViewportChanged"
PointerPressed="FileListGridItem_PointerPressed"
IsRightTapEnabled="True"
RightTapped="StackPanel_RightTapped"
Tag="ItemRoot"
ToolTipService.ToolTip="{x:Bind ItemName}">
<StackPanel Orientation="Horizontal">
<Grid
Height="Auto"
MinHeight="125"
Width="125"
Tag="ItemImage">
<Grid
x:Name="Picture"
Padding="0,12,0,12"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
Width="100">
<Image Source="{x:Bind FileImage, Mode=OneWay}" Stretch="Uniform" />
</Grid>
<Image
x:Name="FolderGlyph"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadFolderGlyph}"
Stretch="Uniform"
Width="100"
Height="100">
<Image.Source>
<SvgImageSource
RasterizePixelHeight="128"
RasterizePixelWidth="128"
UriSource="/Assets/FolderIcon.svg" />
</Image.Source>
</Image>
<Grid
x:Name="TypeUnknownGlyph"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadUnknownTypeGlyph, Mode=OneWay}"
Width="100">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<FontIcon
FontFamily="Segoe MDL2 Assets"
FontSize="100"
Glyph="&#xE7C3;" />
</Grid>
</Grid>
</Grid>
<StackPanel
Height="125">
<TextBlock
Margin="0,12,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalTextAlignment="Left"
Text="{x:Bind ItemName}"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap"
Width="235"
Height="Auto"
MaxHeight="75"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
<TextBox
Margin="0,12,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Text="{x:Bind ItemName}"
TextAlignment="Left"
TextWrapping="Wrap"
Width="235"
Visibility="Collapsed"
Height="Auto"
MaxHeight="75"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
<TextBlock
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalTextAlignment="Left"
Text="{x:Bind ItemType}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<TextBlock
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalTextAlignment="Left"
Text="{x:Bind FileSize}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>

</local:BaseLayout.Resources>

<Grid
Padding="0,0,0,0"
VerticalAlignment="Stretch"
ContextFlyout="{StaticResource BaseLayoutContextFlyout}">
<Grid.KeyboardAccelerators>
<KeyboardAccelerator Key="{ x:Bind plusKey }" Modifiers="Control" Invoked="{x:Bind local:App.CurrentInstance.ContentPage.GridViewSizeIncrease}" />
<KeyboardAccelerator Key="{ x:Bind minusKey }" Modifiers="Control" Invoked="{x:Bind local:App.CurrentInstance.ContentPage.GridViewSizeDecrease}" />
<KeyboardAccelerator Key="Add" Modifiers="Control" Invoked="{x:Bind local:App.CurrentInstance.ContentPage.GridViewSizeIncrease}" />
<KeyboardAccelerator Key="Subtract" Modifiers="Control" Invoked="{x:Bind local:App.CurrentInstance.ContentPage.GridViewSizeDecrease}" />
</Grid.KeyboardAccelerators>
<ProgressBar
Name="ProgBar"
Height="10"
Expand Down Expand Up @@ -320,88 +514,6 @@
<Setter Property="ContextFlyout" Value="{StaticResource BaseLayoutItemContextFlyout}" />
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate x:DataType="local2:ListedItem">
<Grid
Width="125"
Height="Auto"
Margin="0,0,0,0"
Padding="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
DataContext="{x:Bind}"
DataContextChanged="FileListGridItem_DataContextChanged"
EffectiveViewportChanged="Grid_EffectiveViewportChanged"
PointerPressed="FileListGridItem_PointerPressed"
IsRightTapEnabled="True"
RightTapped="StackPanel_RightTapped"
Tag="ItemRoot"
ToolTipService.ToolTip="{x:Bind ItemName}">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Width="125"
Height="100"
Tag="ItemImage">
<Grid
x:Name="Picture"
Padding="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}">
<Image Source="{x:Bind FileImage, Mode=OneWay}" Stretch="Uniform" />
</Grid>
<Image
x:Name="FolderGlyph"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadFolderGlyph}"
Stretch="Uniform">
<Image.Source>
<SvgImageSource
RasterizePixelHeight="128"
RasterizePixelWidth="128"
UriSource="/Assets/FolderIcon.svg" />
</Image.Source>
</Image>
<Grid
x:Name="TypeUnknownGlyph"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadUnknownTypeGlyph, Mode=OneWay}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<FontIcon
FontFamily="Segoe MDL2 Assets"
FontSize="72"
Glyph="&#xE7C3;" />
</Grid>
</Grid>
</Grid>
<StackPanel Grid.Row="1">
<TextBlock
Margin="0,0,0,10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalTextAlignment="Center"
Text="{x:Bind ItemName}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<TextBox
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Text="{x:Bind ItemName}"
TextAlignment="Center"
TextWrapping="Wrap"
Visibility="Collapsed" />
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</local:BaseLayout>
Loading