Skip to content

Commit d11b00f

Browse files
marcelwgnmarcelwgn
committed
Add checkbox pointer behavior for tiles layout
1 parent a51134b commit d11b00f

File tree

1 file changed

+167
-151
lines changed

1 file changed

+167
-151
lines changed

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

Lines changed: 167 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -228,166 +228,182 @@
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+
249+
<VisualStateManager.VisualStateGroups>
250+
<VisualStateGroup x:Name="CheckboxVisibilityStates">
251+
<VisualState x:Name="HideCheckbox" />
252+
<VisualState x:Name="ShowCheckbox">
253+
<VisualState.Setters>
254+
<Setter Target="SelectionCheckbox.Visibility" Value="Visible" />
255+
</VisualState.Setters>
256+
</VisualState>
257+
</VisualStateGroup>
258+
</VisualStateManager.VisualStateGroups>
259+
260+
<CheckBox
261+
x:Name="SelectionCheckbox"
262+
Grid.ColumnSpan="2"
263+
Width="32"
264+
MinWidth="0"
265+
MinHeight="0"
266+
Margin="6"
267+
Visibility="Collapsed"
268+
Padding="0"
269+
HorizontalAlignment="Left"
270+
VerticalAlignment="Top"
271+
Checked="ItemSelected_Checked"
272+
DoubleTapped="SelectionCheckbox_DoubleTapped"
273+
Unchecked="ItemSelected_Unchecked" />
274+
<StackPanel
275+
Width="20"
276+
Margin="8,4,0,4"
288277
HorizontalAlignment="Center"
289278
VerticalAlignment="Center"
290-
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
291-
x:Phase="1"
292-
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
279+
Orientation="Vertical">
280+
<Ellipse
281+
Width="12"
282+
Height="12"
283+
Margin="0,4,0,4"
284+
x:Phase="2"
285+
Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
286+
ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
287+
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
288+
<FontIcon
289+
x:Name="CloudDriveSyncStatusGlyph"
290+
x:Phase="2"
291+
FontSize="12"
292+
Glyph="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
293+
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
294+
</StackPanel>
295+
<Grid
296+
Grid.Column="1"
297+
Height="60"
298+
Margin="0,4,0,4"
299+
Opacity="{x:Bind Opacity, Mode=OneWay}"
300+
Tag="ItemImage">
301+
<ContentPresenter
302+
x:Name="PictureBorder"
303+
HorizontalAlignment="Center"
304+
VerticalAlignment="Center"
305+
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
306+
x:Phase="1"
307+
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
308+
<Image
309+
x:Name="Picture"
310+
Width="60"
311+
Source="{x:Bind FileImage, Mode=OneWay}"
312+
Stretch="Uniform" />
313+
</ContentPresenter>
293314
<Image
294-
x:Name="Picture"
315+
x:Name="FolderGlyphIcon"
316+
Width="60"
317+
Height="60"
318+
HorizontalAlignment="Stretch"
319+
VerticalAlignment="Stretch"
320+
x:Load="{x:Bind LoadDefaultIcon, Mode=OneWay}"
321+
Source="{x:Bind PlaceholderDefaultIcon, Mode=OneWay}" />
322+
<Border
323+
x:Name="TypeUnknownGlyph"
295324
Width="60"
296-
Source="{x:Bind FileImage, Mode=OneWay}"
325+
Height="60"
326+
HorizontalAlignment="Stretch"
327+
VerticalAlignment="Stretch"
328+
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
329+
Background="{ThemeResource SystemChromeHighColor}"
330+
CornerRadius="4" />
331+
<Image
332+
x:Name="IconOverlay"
333+
Width="32"
334+
Height="32"
335+
Margin="2"
336+
HorizontalAlignment="Left"
337+
VerticalAlignment="Bottom"
338+
x:Load="True"
339+
x:Phase="1"
340+
Source="{x:Bind IconOverlay, Mode=OneWay}"
297341
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"
310-
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>
342+
<Viewbox
343+
x:Name="WebShortcutGlyph"
344+
MaxWidth="60"
345+
HorizontalAlignment="Center"
346+
VerticalAlignment="Center"
347+
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
348+
x:Phase="1">
349+
<FontIcon FontSize="28" Glyph="&#xE71B;" />
350+
</Viewbox>
351+
<Viewbox
352+
x:Name="ShortcutGlyphElement"
353+
Width="16"
354+
Height="16"
355+
HorizontalAlignment="Left"
356+
VerticalAlignment="Bottom"
357+
x:Load="{x:Bind IsShortcut}"
358+
x:Phase="1">
359+
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
360+
</Viewbox>
361+
</Grid>
347362

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" />
363+
<Grid
364+
Grid.Column="2"
365+
Height="60"
366+
Margin="0,4,8,4"
367+
RowSpacing="4">
368+
<Grid.RowDefinitions>
369+
<RowDefinition Height="Auto" />
370+
<RowDefinition Height="Auto" />
371+
<RowDefinition Height="Auto" />
372+
</Grid.RowDefinitions>
373+
<TextBlock
374+
x:Name="ItemName"
375+
Grid.Row="0"
376+
HorizontalAlignment="Left"
377+
MaxLines="2"
378+
Text="{x:Bind Name, Mode=OneWay}"
379+
TextTrimming="CharacterEllipsis"
380+
TextWrapping="Wrap" />
381+
<TextBox
382+
x:Name="TileViewTextBoxItemName"
383+
Grid.Row="0"
384+
HorizontalAlignment="Left"
385+
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
386+
Text="{x:Bind Name, Mode=OneWay}"
387+
Visibility="Collapsed" />
388+
<TextBlock
389+
Grid.Row="1"
390+
HorizontalAlignment="Left"
391+
FontSize="12px"
392+
Opacity="0.6"
393+
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
394+
TextTrimming="CharacterEllipsis"
395+
TextWrapping="NoWrap" />
396+
<TextBlock
397+
Grid.Row="2"
398+
HorizontalAlignment="Left"
399+
FontSize="12px"
400+
Opacity="0.6"
401+
Text="{x:Bind FileSize, Mode=OneWay}"
402+
TextTrimming="CharacterEllipsis"
403+
TextWrapping="NoWrap" />
404+
</Grid>
389405
</Grid>
390-
</Grid>
406+
</UserControl>
391407
</DataTemplate>
392408

393409
<Style TargetType="GridViewHeaderItem">

0 commit comments

Comments
 (0)