Skip to content

Commit

Permalink
refactor to itemview
Browse files Browse the repository at this point in the history
  • Loading branch information
@karkarl
karkarl committed Oct 9, 2023
1 parent d72a3c3 commit cfa9789
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 71 deletions.
65 changes: 23 additions & 42 deletions WinUIGallery/ControlPages/DesignGuidance/IconsPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,37 +41,15 @@
</Style>

<DataTemplate x:Key="IconTemplate">
<UserControl PointerPressed="Icons_TemplatePointerPressed">
<Grid
x:Name="IconTemplateRoot"
Width="96"
Height="96"
Margin="4"
HorizontalAlignment="Stretch"
x:DefaultBindMode="OneWay"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="4"
ToolTipService.ToolTip="{Binding Name}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionState">
<VisualState x:Name="Default" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="IconTemplateRoot.Background" Value="{ThemeResource AccentFillColorDefaultBrush}" />
<Setter Target="IconGlyph.Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
<Setter Target="IconName.Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ItemContainer
AutomationProperties.Name="{Binding Name}"
ToolTipService.ToolTip="{Binding Name}"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
Width="96"
Height="96"
Margin="4">
<Grid>
<!-- Icon -->
<Viewbox
Grid.Row="1"
Expand All @@ -83,7 +61,7 @@
Grid.Row="1"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Glyph="{Binding Character}" />
</Viewbox>
</Viewbox>

<!-- Icon name/descriptor -->
<TextBlock
Expand All @@ -98,7 +76,8 @@
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
</Grid>
</UserControl>

</ItemContainer>
</DataTemplate>
</Page.Resources>

Expand Down Expand Up @@ -167,7 +146,8 @@
<controls1:SampleThemeListener
Grid.Row="3"
MaxHeight="600"
VerticalAlignment="Top">
VerticalAlignment="Top"
IsTabStop="True">
<Grid
Background="{ThemeResource ControlExampleDisplayBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
Expand All @@ -182,18 +162,19 @@
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutomationProperties.Name="Icons">
<ItemsRepeater
x:Name="IconsRepeater"
<ItemsView
x:Name="IconsItemsView"
MinWidth="100"
Margin="0,0,0,36"
HorizontalAlignment="Stretch"
ElementIndexChanged="IconsRepeater_ElementIndexChanged"
ElementPrepared="IconsRepeater_ElementPrepared"
ItemTemplate="{StaticResource IconTemplate}">
<ItemsRepeater.Layout>
IsItemInvokedEnabled="True"
SelectionChanged="IconsItemsView_SelectionChanged"
ItemTemplate="{StaticResource IconTemplate}"
TabFocusNavigation="Once">
<ItemsView.Layout>
<UniformGridLayout Orientation="Horizontal" />
</ItemsRepeater.Layout>
</ItemsRepeater>
</ItemsView.Layout>
</ItemsView>
</ScrollViewer>

<Grid
Expand Down
36 changes: 7 additions & 29 deletions WinUIGallery/ControlPages/DesignGuidance/IconsPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,18 @@ public IconsPage()
// Fill filtered items
IconsDataSource.Icons.ForEach(item => FilteredItems.Add(item));
this.InitializeComponent();
IconsRepeater.Loaded += ItemsGridView_Loaded;
IconsItemsView.Loaded += IconsItemsView_Loaded;
}

private void ItemsGridView_Loaded(object sender, RoutedEventArgs e)
private void IconsItemsView_Loaded(object sender, RoutedEventArgs e)
{
// Delegate loading of icons, so we have smooth navigating to this page
// and not unnecessarily block UI Thread
Task.Run(delegate ()
{
_ = DispatcherQueue.TryEnqueue(Microsoft.UI.Dispatching.DispatcherQueuePriority.High, () =>
{
IconsRepeater.ItemsSource = FilteredItems;
IconsItemsView.ItemsSource = FilteredItems;
SelectedItem = FilteredItems[0];
SetSampleCodePresenterCode(FilteredItems[0]);
});
Expand Down Expand Up @@ -103,35 +103,13 @@ public void Filter(string search)
UIHelper.AnnounceActionForAccessibility(IconsAutoSuggestBox, outputString, "AutoSuggestBoxNumberIconsFoundId");
}

private void Icons_TemplatePointerPressed(object sender, PointerRoutedEventArgs e)
private void IconsItemsView_SelectionChanged(ItemsView sender, ItemsViewSelectionChangedEventArgs args)
{
var oldIndex = FilteredItems.IndexOf(SelectedItem);
var previousItem = IconsRepeater.TryGetElement(oldIndex);
if(previousItem != null)
if (IconsItemsView.CurrentItemIndex != -1)
{
MoveToSelectionState(previousItem, false);
SelectedItem = FilteredItems[IconsItemsView.CurrentItemIndex];
}

var itemIndex = IconsRepeater.GetElementIndex(sender as UIElement);
SelectedItem = FilteredItems[itemIndex != -1 ? itemIndex : 0];
MoveToSelectionState(sender as UIElement, true);
}

private static void MoveToSelectionState(UIElement previousItem, bool isSelected)
{
VisualStateManager.GoToState(previousItem as Control, isSelected ? "Selected" : "Default", false);
}

private void IconsRepeater_ElementIndexChanged(ItemsRepeater sender, ItemsRepeaterElementIndexChangedEventArgs args)
{
var newItem = FilteredItems[args.NewIndex];
MoveToSelectionState(args.Element, newItem == SelectedItem);
}

private void IconsRepeater_ElementPrepared(ItemsRepeater sender, ItemsRepeaterElementPreparedEventArgs args)
{
var newItem = FilteredItems[args.Index];
MoveToSelectionState(args.Element, newItem == SelectedItem);

}
}
}

0 comments on commit cfa9789

Please sign in to comment.