Skip to content

Making the ListExtensions feature in-line with the documentation #3209

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.

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
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
x:Name="SampleListView"
Margin="12"
ItemTemplate="{StaticResource NormalTemplate}"
IsItemClickEnabled="True"
extensions:ListViewExtensions.Command="{Binding SampleCommand}"
extensions:ListViewExtensions.AlternateColor="#33AAAAAA"
extensions:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
extensions:ListViewExtensions.StretchItemContainerDirection="Both">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
<Page
x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ListViewExtensionsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
mc:Ignorable="d">
<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ListViewExtensionsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
<DataTemplate x:Name="NormalTemplate">
<TextBlock Text="{Binding Title}" Foreground="Green"></TextBlock>
<TextBlock Foreground="Green"
Text="{Binding Title}" />
</DataTemplate>

<DataTemplate x:Name="AlternateTemplate">
<TextBlock Text="{Binding Title}" Foreground="Red"></TextBlock>
<TextBlock Foreground="Red"
Text="{Binding Title}" />
</DataTemplate>
</Page.Resources>

<Grid>

<ListView
x:Name="SampleListView"
Margin="12"
ItemTemplate="{StaticResource NormalTemplate}"
extensions:ListViewExtensions.AlternateColor="#33AAAAAA"
extensions:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
extensions:ListViewExtensions.StretchItemContainerDirection="Both">
</ListView>
<ListView x:Name="SampleListView"
Margin="12"
extensions:ListViewExtensions.AlternateColor="#33AAAAAA"
extensions:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
extensions:ListViewExtensions.Command="{Binding SampleCommand}"
extensions:ListViewExtensions.StretchItemContainerDirection="Both"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource NormalTemplate}" />
</Grid>
</Page>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using System;
using System.Windows.Input;
using Microsoft.Toolkit.Uwp.SampleApp.Common;
using Microsoft.Toolkit.Uwp.SampleApp.Data;
using Microsoft.Toolkit.Uwp.UI.Extensions;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

Expand All @@ -15,6 +20,8 @@ public ListViewExtensionsPage()
this.InitializeComponent();
}

public ICommand SampleCommand => new DelegateCommand<PhotoDataItem>(OnExecuteSampleCommand);

public async void OnXamlRendered(FrameworkElement control)
{
var sampleListView = control.FindChildByName("SampleListView") as ListView;
Expand All @@ -23,6 +30,14 @@ public async void OnXamlRendered(FrameworkElement control)
{
sampleListView.ItemsSource = await new Data.PhotosDataSource().GetItemsAsync();
}

// Transfer Data Context so we can access SampleCommand
control.DataContext = this;
}

private async void OnExecuteSampleCommand(PhotoDataItem item)
{
await new MessageDialog($"You clicked {item.Title} via the 'ListViewExtensions.Command' binding", "Item Clicked").ShowAsync();
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using System.Windows.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Microsoft.Toolkit.Uwp.UI.Extensions
{
/// <summary>
/// Provides the Command attached dependency property for the <see cref="Windows.UI.Xaml.Controls.ListViewBase"/>
/// </summary>
public static partial class ListViewExtensions
{
/// <summary>
/// Attached <see cref="DependencyProperty"/> for binding an <see cref="System.Windows.Input.ICommand"/> to handle ListViewBase Item interaction by means of <see cref="Windows.UI.Xaml.Controls.ListViewBase"/> ItemClick event. ListViewBase IsItemClickEnabled must be set to true.
/// </summary>
public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached("Command", typeof(ICommand), typeof(ListViewExtensions), new PropertyMetadata(null, OnCommandPropertyChanged));

/// <summary>
/// Gets the <see cref="ICommand"/> associated with the specified <see cref="ListViewBase"/>
/// </summary>
/// <param name="obj">The <see cref="Windows.UI.Xaml.Controls.ListViewBase"/> to get the associated <see cref="ICommand"/> from</param>
/// <returns>The <see cref="ICommand"/> associated with the <see cref="ListViewBase"/></returns>
public static ICommand GetCommand(ListViewBase obj)
{
return (ICommand)obj.GetValue(CommandProperty);
}

/// <summary>
/// Sets the <see cref="ICommand"/> associated with the specified <see cref="ListViewBase"/>
/// </summary>
/// <param name="obj">The <see cref="Windows.UI.Xaml.Controls.ListViewBase"/> to associate the <see cref="ICommand"/> with</param>
/// <param name="value">The <see cref="ICommand"/> for binding to the <see cref="ListViewBase"/></param>
public static void SetCommand(ListViewBase obj, ICommand value)
{
obj.SetValue(CommandProperty, value);
}

private static void OnCommandPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
var listViewBase = sender as ListViewBase;

if (listViewBase == null)
{
return;
}

var oldCommand = args.OldValue as ICommand;
if (oldCommand != null)
{
listViewBase.ItemClick -= OnListViewBaseItemClick;
}

var newCommand = args.NewValue as ICommand;
if (newCommand != null)
{
listViewBase.ItemClick += OnListViewBaseItemClick;
}
}

private static void OnListViewBaseItemClick(object sender, ItemClickEventArgs e)
{
var listViewBase = sender as ListViewBase;
var command = GetCommand(listViewBase);
if (listViewBase == null || command == null)
{
return;
}

if (command.CanExecute(e.ClickedItem))
{
command.Execute(e.ClickedItem);
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@ private static void OnAlternateColorPropertyChanged(DependencyObject sender, Dep
private static void ColorContainerContentChanging(Windows.UI.Xaml.Controls.ListViewBase sender, ContainerContentChangingEventArgs args)
{
var itemContainer = args.ItemContainer as Control;

SetItemContainerBackground(sender, itemContainer, args.ItemIndex);
}

Expand Down