Skip to content

Commit 9791024

Browse files
marcelwgnmarcelwgn
authored
Feature: Add checkbox pointer behavior for tiles layout (#11796)
1 parent a51134b commit 9791024

File tree

1 file changed

+165
-150
lines changed

1 file changed

+165
-150
lines changed

‎src/Files.App/Views/LayoutModes/GridViewBrowser.xaml

Lines changed: 165 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -228,166 +228,181 @@
228228
</DataTemplate>
229229

230230
<DataTemplate x:Name="TilesBrowserTemplate" x:DataType="local2:ListedItem">
231-
<Grid
232-
MaxHeight="68"
233-
Padding="0"
234-
HorizontalAlignment="Left"
235-
VerticalAlignment="Stretch"
236-
Background="Transparent"
237-
ColumnSpacing="4"
238-
IsRightTapEnabled="True"
239-
Loaded="Grid_Loaded"
240-
ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
241-
<Grid.ColumnDefinitions>
242-
<ColumnDefinition Width="Auto" />
243-
<ColumnDefinition Width="68" />
244-
<ColumnDefinition Width="*" />
245-
</Grid.ColumnDefinitions>
246-
<CheckBox
247-
x:Name="SelectionCheckbox"
248-
Grid.ColumnSpan="2"
249-
Width="32"
250-
MinWidth="0"
251-
MinHeight="0"
252-
Margin="6"
231+
<UserControl>
232+
<Grid
233+
MaxHeight="68"
253234
Padding="0"
254235
HorizontalAlignment="Left"
255-
VerticalAlignment="Top"
256-
Checked="ItemSelected_Checked"
257-
DoubleTapped="SelectionCheckbox_DoubleTapped"
258-
Unchecked="ItemSelected_Unchecked" />
259-
<StackPanel
260-
Width="20"
261-
Margin="8,4,0,4"
262-
HorizontalAlignment="Center"
263-
VerticalAlignment="Center"
264-
Orientation="Vertical">
265-
<Ellipse
266-
Width="12"
267-
Height="12"
268-
Margin="0,4,0,4"
269-
x:Phase="2"
270-
Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
271-
ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
272-
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
273-
<FontIcon
274-
x:Name="CloudDriveSyncStatusGlyph"
275-
x:Phase="2"
276-
FontSize="12"
277-
Glyph="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
278-
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
279-
</StackPanel>
280-
<Grid
281-
Grid.Column="1"
282-
Height="60"
283-
Margin="0,4,0,4"
284-
Opacity="{x:Bind Opacity, Mode=OneWay}"
285-
Tag="ItemImage">
286-
<ContentPresenter
287-
x:Name="PictureBorder"
236+
VerticalAlignment="Stretch"
237+
Background="Transparent"
238+
ColumnSpacing="4"
239+
IsRightTapEnabled="True"
240+
Loaded="Grid_Loaded"
241+
ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
242+
<Grid.ColumnDefinitions>
243+
<ColumnDefinition Width="Auto" />
244+
<ColumnDefinition Width="68" />
245+
<ColumnDefinition Width="*" />
246+
</Grid.ColumnDefinitions>
247+
248+
<CheckBox
249+
x:Name="SelectionCheckbox"
250+
Grid.ColumnSpan="2"
251+
Width="32"
252+
MinWidth="0"
253+
MinHeight="0"
254+
Margin="6"
255+
Padding="0"
256+
HorizontalAlignment="Left"
257+
VerticalAlignment="Top"
258+
Checked="ItemSelected_Checked"
259+
DoubleTapped="SelectionCheckbox_DoubleTapped"
260+
Unchecked="ItemSelected_Unchecked"
261+
Visibility="Collapsed" />
262+
<StackPanel
263+
Width="20"
264+
Margin="8,4,0,4"
288265
HorizontalAlignment="Center"
289266
VerticalAlignment="Center"
290-
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
291-
x:Phase="1"
292-
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
267+
Orientation="Vertical">
268+
<Ellipse
269+
Width="12"
270+
Height="12"
271+
Margin="0,4,0,4"
272+
x:Phase="2"
273+
Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
274+
ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
275+
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
276+
<FontIcon
277+
x:Name="CloudDriveSyncStatusGlyph"
278+
x:Phase="2"
279+
FontSize="12"
280+
Glyph="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
281+
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
282+
</StackPanel>
283+
<Grid
284+
Grid.Column="1"
285+
Height="60"
286+
Margin="0,4,0,4"
287+
Opacity="{x:Bind Opacity, Mode=OneWay}"
288+
Tag="ItemImage">
289+
<ContentPresenter
290+
x:Name="PictureBorder"
291+
HorizontalAlignment="Center"
292+
VerticalAlignment="Center"
293+
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
294+
x:Phase="1"
295+
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
296+
<Image
297+
x:Name="Picture"
298+
Width="60"
299+
Source="{x:Bind FileImage, Mode=OneWay}"
300+
Stretch="Uniform" />
301+
</ContentPresenter>
293302
<Image
294-
x:Name="Picture"
303+
x:Name="FolderGlyphIcon"
304+
Width="60"
305+
Height="60"
306+
HorizontalAlignment="Stretch"
307+
VerticalAlignment="Stretch"
308+
x:Load="{x:Bind LoadDefaultIcon, Mode=OneWay}"
309+
Source="{x:Bind PlaceholderDefaultIcon, Mode=OneWay}" />
310+
<Border
311+
x:Name="TypeUnknownGlyph"
295312
Width="60"
296-
Source="{x:Bind FileImage, Mode=OneWay}"
313+
Height="60"
314+
HorizontalAlignment="Stretch"
315+
VerticalAlignment="Stretch"
316+
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
317+
Background="{ThemeResource SystemChromeHighColor}"
318+
CornerRadius="4" />
319+
<Image
320+
x:Name="IconOverlay"
321+
Width="32"
322+
Height="32"
323+
Margin="2"
324+
HorizontalAlignment="Left"
325+
VerticalAlignment="Bottom"
326+
x:Load="True"
327+
x:Phase="1"
328+
Source="{x:Bind IconOverlay, Mode=OneWay}"
297329
Stretch="Uniform" />
298-
</ContentPresenter>
299-
<Image
300-
x:Name="FolderGlyphIcon"
301-
Width="60"
302-
Height="60"
303-
HorizontalAlignment="Stretch"
304-
VerticalAlignment="Stretch"
305-
x:Load="{x:Bind LoadDefaultIcon, Mode=OneWay}"
306-
Source="{x:Bind PlaceholderDefaultIcon, Mode=OneWay}" />
307-
<Border
308-
x:Name="TypeUnknownGlyph"
309-
Width="60"
330+
<Viewbox
331+
x:Name="WebShortcutGlyph"
332+
MaxWidth="60"
333+
HorizontalAlignment="Center"
334+
VerticalAlignment="Center"
335+
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
336+
x:Phase="1">
337+
<FontIcon FontSize="28" Glyph="&#xE71B;" />
338+
</Viewbox>
339+
<Viewbox
340+
x:Name="ShortcutGlyphElement"
341+
Width="16"
342+
Height="16"
343+
HorizontalAlignment="Left"
344+
VerticalAlignment="Bottom"
345+
x:Load="{x:Bind IsShortcut}"
346+
x:Phase="1">
347+
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
348+
</Viewbox>
349+
</Grid>
350+
351+
<Grid
352+
Grid.Column="2"
310353
Height="60"
311-
HorizontalAlignment="Stretch"
312-
VerticalAlignment="Stretch"
313-
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
314-
Background="{ThemeResource SystemChromeHighColor}"
315-
CornerRadius="4" />
316-
<Image
317-
x:Name="IconOverlay"
318-
Width="32"
319-
Height="32"
320-
Margin="2"
321-
HorizontalAlignment="Left"
322-
VerticalAlignment="Bottom"
323-
x:Load="True"
324-
x:Phase="1"
325-
Source="{x:Bind IconOverlay, Mode=OneWay}"
326-
Stretch="Uniform" />
327-
<Viewbox
328-
x:Name="WebShortcutGlyph"
329-
MaxWidth="60"
330-
HorizontalAlignment="Center"
331-
VerticalAlignment="Center"
332-
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
333-
x:Phase="1">
334-
<FontIcon FontSize="28" Glyph="&#xE71B;" />
335-
</Viewbox>
336-
<Viewbox
337-
x:Name="ShortcutGlyphElement"
338-
Width="16"
339-
Height="16"
340-
HorizontalAlignment="Left"
341-
VerticalAlignment="Bottom"
342-
x:Load="{x:Bind IsShortcut}"
343-
x:Phase="1">
344-
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
345-
</Viewbox>
346-
</Grid>
354+
Margin="0,4,8,4"
355+
RowSpacing="4">
356+
<Grid.RowDefinitions>
357+
<RowDefinition Height="Auto" />
358+
<RowDefinition Height="Auto" />
359+
<RowDefinition Height="Auto" />
360+
</Grid.RowDefinitions>
361+
<TextBlock
362+
x:Name="ItemName"
363+
Grid.Row="0"
364+
HorizontalAlignment="Left"
365+
MaxLines="2"
366+
Text="{x:Bind Name, Mode=OneWay}"
367+
TextTrimming="CharacterEllipsis"
368+
TextWrapping="Wrap" />
369+
<TextBox
370+
x:Name="TileViewTextBoxItemName"
371+
Grid.Row="0"
372+
HorizontalAlignment="Left"
373+
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
374+
Text="{x:Bind Name, Mode=OneWay}"
375+
Visibility="Collapsed" />
376+
<TextBlock
377+
Grid.Row="1"
378+
HorizontalAlignment="Left"
379+
FontSize="12px"
380+
Opacity="0.6"
381+
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
382+
TextTrimming="CharacterEllipsis"
383+
TextWrapping="NoWrap" />
384+
<TextBlock
385+
Grid.Row="2"
386+
HorizontalAlignment="Left"
387+
FontSize="12px"
388+
Opacity="0.6"
389+
Text="{x:Bind FileSize, Mode=OneWay}"
390+
TextTrimming="CharacterEllipsis"
391+
TextWrapping="NoWrap" />
392+
</Grid>
347393

348-
<Grid
349-
Grid.Column="2"
350-
Height="60"
351-
Margin="0,4,8,4"
352-
RowSpacing="4">
353-
<Grid.RowDefinitions>
354-
<RowDefinition Height="Auto" />
355-
<RowDefinition Height="Auto" />
356-
<RowDefinition Height="Auto" />
357-
</Grid.RowDefinitions>
358-
<TextBlock
359-
x:Name="ItemName"
360-
Grid.Row="0"
361-
HorizontalAlignment="Left"
362-
MaxLines="2"
363-
Text="{x:Bind Name, Mode=OneWay}"
364-
TextTrimming="CharacterEllipsis"
365-
TextWrapping="Wrap" />
366-
<TextBox
367-
x:Name="TileViewTextBoxItemName"
368-
Grid.Row="0"
369-
HorizontalAlignment="Left"
370-
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
371-
Text="{x:Bind Name, Mode=OneWay}"
372-
Visibility="Collapsed" />
373-
<TextBlock
374-
Grid.Row="1"
375-
HorizontalAlignment="Left"
376-
FontSize="12px"
377-
Opacity="0.6"
378-
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
379-
TextTrimming="CharacterEllipsis"
380-
TextWrapping="NoWrap" />
381-
<TextBlock
382-
Grid.Row="2"
383-
HorizontalAlignment="Left"
384-
FontSize="12px"
385-
Opacity="0.6"
386-
Text="{x:Bind FileSize, Mode=OneWay}"
387-
TextTrimming="CharacterEllipsis"
388-
TextWrapping="NoWrap" />
394+
<VisualStateManager.VisualStateGroups>
395+
<VisualStateGroup x:Name="CheckboxVisibilityStates">
396+
<VisualState x:Name="HideCheckbox" />
397+
<VisualState x:Name="ShowCheckbox">
398+
<VisualState.Setters>
399+
<Setter Target="SelectionCheckbox.Visibility" Value="Visible" />
400+
</VisualState.Setters>
401+
</VisualState>
402+
</VisualStateGroup>
403+
</VisualStateManager.VisualStateGroups>
389404
</Grid>
390-
</Grid>
405+
</UserControl>
391406
</DataTemplate>
392407

393408
<Style TargetType="GridViewHeaderItem">

0 commit comments

Comments
 (0)