static void Main(string[] args)
{            
    var allProcesses = Process.GetProcesses().Where(p =>
    {
        try
        {
            var pid = p.Id;
            var modules = p.Modules.Cast<ProcessModule>()
                .Where(m => m.FileName.Contains("System.Runtime.WindowsRuntime"));
            return modules.Count() > 0;
        }
        catch { return false; }
    }).OrderBy(p => p.MainModule.FileName).ToList();
    
    for (int i = 0; i < allProcesses.Count(); i++)
    {
        var p = allProcesses[i];
        Console.WriteLine(string.Format("{0}. {1}", i, p.MainModule.FileName));
    }
    Console.ReadKey();
}

Modern UI / Metro applications are protected and cannot be easily interrogated by a non-administrative process. While you can get some basics about all processes, a standard user process isn’t allowed to look at the loaded modules for example.

In the code above, all processes are scanned for a particular DLL. In this case, System.Runtime.WindowsRuntime. I’m not 100% confident this is the best choice … there may be a few better options (or multiple that are required). (If you know of them, please leave a comment!). It did find the Modern UI / Metro applications running in my Windows 8 VM.

Once gathered, the code just outputs the basics to the console. (The name of the host, which is WWAHost.exe apparently some times).

Next step is to learn something useful via the process object.

WPF for example, could do something like this:

<DataTemplate DataType="{x:Type local:Task}">
  <StackPanel>
    <TextBlock Text="{Binding Path=TaskName}" />
    <TextBlock Text="{Binding Path=Description}"/>
    <TextBlock Text="{Binding Path=Priority}"/>
  </StackPanel>
</DataTemplate>

When the Task type as shown above was found in a list, it would have been rendered as a StackPanel with three TextBlocks automatically. That rocked.

WinRT (Metro/Xaml, Windows 8 applications) are missing the DataType property of DataTemplates. Yes, some of you might say it’s not missing as it’s V1, but given the heritage of Windows 8 Xaml applications, I consider it missing.

While an exact duplicate of the functionality isn’t possible, it’s relatively simple to get close.

<GridView
    x:Name="itemGridView"
    ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
    ItemTemplateSelector="{StaticResource typedTemplateSelector}"
    SelectionMode="None"
    IsItemClickEnabled="True">

Take the GridView above for example (using the template project in Visual Studio 2012).

I’ve assigned the ItemTemplateSelector to an instance of the TypedTemplateSelector class I’ve created.

In the Resources for the Page, I added a custom DataTemplate:

I’ve added a DataTemplate with a Key called Type : SampleDataItem (without the spaces though – they’re auto converted by my WordPress theme to a squiggle face: ).

There’s nothing special about the Template, just the name. It must start with Type:.

Here the custom template selector is being constructed in the Resources:

    <local:TypedTemplateSelector x:Key="typedTemplateSelector"
                                 DefaultTemplateKey="Standard250x250ItemTemplate" />
</Page.Resources>

Here’s the class that you’d need below. It has a caching feature (IsCacheEnabled) to prevent the search from occurring more than once for a key. It’s set to True by default. When used, the object searches from the current Item through all Parents trying to match the type of the object (via the VisualTreeHelper). Only the ClassName is used as programmed below (and not the full namespace). You could easily change this behavior by removing the Split and Last calls.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace WiredPrairie.TemplateSelector
{
    public class TypedTemplateSelector : DataTemplateSelector
    {
        private Dictionary<string, DataTemplate> _cachedDataTemplates;

        /// <summary>
        /// Fallback value for DataTemplate
        /// </summary>
        public string DefaultTemplateKey { get; set; }

        /// <summary>
        /// Cache search results for a type (defaults to Enabled)
        /// </summary>
        public bool IsCacheEnabled { get; set; }

        public TypedTemplateSelector()
        {
            IsCacheEnabled = true;
        }

        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            // grab the Type name. Type will be searched as Type:NAME as shown below
            /*
                <DataTemplate x:Key="Type:SampleDataItem">
                    <Grid HorizontalAlignment="Left" Width="250" Height="250">
                        <TextBlock Text="{Binding Title}" />
                    </Grid>
                </DataTemplate>
             */
            string key = item != null ? string.Format("Type:{0}", item.GetType().Name.Split('.').Last()) : DefaultTemplateKey;
            DataTemplate dt = GetCachedDataTemplate(key);
            try
            {
                if (dt != null) { return dt; }

                // look at all parents (visual parents)
                FrameworkElement fe = container as FrameworkElement;
                while (fe != null)
                {
                    dt = FindTemplate(fe, key);
                    if (dt != null) { return dt; }
                    // if you were to just look at logical parents,
                    // you'd find that there isn't a Parent for Items set
                    fe = VisualTreeHelper.GetParent(fe) as FrameworkElement;
                }

                dt = FindTemplate(null, key);
                return dt;
            }
            finally
            {
                if (dt != null)
                {
                    AddCachedDataTemplate(key, dt);
                }
            }
        }

        private DataTemplate GetCachedDataTemplate(string key)
        {
            if (!IsCacheEnabled) { return null; }
            VerifyCachedDataTemplateStorage();
            if (_cachedDataTemplates.ContainsKey(key))
            {
                return _cachedDataTemplates[key];
            }

            return null;
        }

        private void AddCachedDataTemplate(string key, DataTemplate dt)
        {
            if (!IsCacheEnabled) { return; }
            VerifyCachedDataTemplateStorage();
            _cachedDataTemplates[key] = dt;
        }

        /// <summary>
        /// Delay creates storage
        /// </summary>
        private void VerifyCachedDataTemplateStorage()
        {
            if (_cachedDataTemplates == null)
            {
                _cachedDataTemplates = new Dictionary<string, DataTemplate>();
            }

        }

        /// <summary>
        /// Returns a template
        /// </summary>
        /// <param name="source">Pass null to search entire app</param>
        /// <param name="key"></param>
        /// <returns></returns>
        private static DataTemplate FindTemplate(object source, string key)
        {
            var fe = source as FrameworkElement;
            object obj;
            ResourceDictionary rd = fe != null ? fe.Resources : App.Current.Resources;
            if (rd.TryGetValue(key, out obj))
            {
                DataTemplate dt = obj as DataTemplate;
                if (dt != null)
                {
                    return dt;
                }
            }
            return null;

        }
    }
}

It may have looked something like this:

<TextBox Text="{Binding Path=Value, UpdateSourceTrigger=PropertyChanged}" />

The key feature was the live updating of the property through the binding. For example, as the user typed in the TextBox above, the property Value in the bound object would have been updated as the user typed. The default behavior in Silverlight 5 and WPF is to use LostFocus: the Value is only updated when the TextBox loses focus. Sometimes, that’s OK.

In WinRT/Metro however, this option was completely removed, and no decent replacement was provided unfortunately. In searching for a reasonable work-around, I discovered a few other related missing pieces from WinRT/XAML:

• BindingOptions.GetBinding: This allowed the WPF programmer a method for retrieving a Binding object. I was interested in this option as I wanted to clone the original Binding, make it two-way, and attach to the TextChanged event so that a new binding could be updated when the text changed, with the new binding pointing to the same property as the Text property. (My solution uses the basic idea as this).
• FrameworkElement.GetBindingExpression: Again, gone. Same basic logic as above. (Probably uses same underlying support that just isn’t there).
• XamlWriter.Save: XamlWriter is completely gone. I thought maybe I’d save an instance of the TextBox to Xaml, and create a new one with adjusted bindings from the Xaml. XamlReader does exist.

You can start to feel how Xaml really is just a thin wrapper on the Windows 8 run time as you start to look around to see what remains from WPF. Even traditional Silverlight features are gone unfortunately. Maybe Windows 9?

So, I took a round-about approach to solving this problem.

 public class UpdateSourceHelper : FrameworkElement
 {
     public static string GetUpdateSourceText(DependencyObject obj)
     {
         return (string)obj.GetValue(UpdateSourceTextProperty);
     }

     public static void SetUpdateSourceText(DependencyObject obj, string value)
     {
         obj.SetValue(UpdateSourceTextProperty, value);
     }

     // Using a DependencyProperty as the backing store for UpdateSourceText.  This enables animation, styling, binding, etc...
     public static readonly DependencyProperty UpdateSourceTextProperty =
         DependencyProperty.RegisterAttached("UpdateSourceText", typeof(string), typeof(UpdateSourceHelper), new PropertyMetadata(""));
     
     public static bool GetIsEnabled(DependencyObject obj)
     {
         return (bool)obj.GetValue(IsEnabledProperty);
     }

     public static void SetIsEnabled(DependencyObject obj, bool value)
     {
         obj.SetValue(IsEnabledProperty, value);
     }

     // Using a DependencyProperty as the backing store for IsEnabled.  This enables animation, styling, binding, etc...
     public static readonly DependencyProperty IsEnabledProperty =
         DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(UpdateSourceHelper), 
             new PropertyMetadata(false, 
             // property changed
             (obj, args)=> 
             {                    
                 if (obj is TextBox)
                 {
                     TextBox tb = (TextBox)obj;
                     if ((bool)args.NewValue)
                     {                                                                                      
                         tb.TextChanged += AttachedTextBoxTextChanged;
                     }
                     else
                     {
                         tb.TextChanged -= AttachedTextBoxTextChanged;
                     }
                 }
             }
         ));

     static void AttachedTextBoxTextChanged(object sender, TextChangedEventArgs e)
     {
         if (sender is TextBox)
         {
             var tb = (TextBox)sender;
             tb.SetValue(UpdateSourceHelper.UpdateSourceTextProperty, tb.Text);                
         }
     }        
 }

And here it is in use:

xmlns:local="using:WiredPrairie.Converter"

(The above namespace is needed to provide context to the Xaml parser for the attached properties. Change it to whatever you need).

<TextBox Height="Auto" Margin="0,6" Grid.Row="1" TextWrapping="Wrap" TabIndex="0" 
         Text="{Binding Value}" 
         local:UpdateSourceHelper.IsEnabled="True" 
         local:UpdateSourceHelper.UpdateSourceText="{Binding Value, Mode=TwoWay}"/>

A classic pattern in WPF for extending built in controls without subclassing was to create an attached behavior. Thankfully, this pattern still works.

The core concept is to attach to the original instance of the TextBox by using an enabling property. In this case, an attached property  called IsEnabled is added to the TextBox.

When the value of the IsEnabled property changes from the default of false, the PropertyChanged callback is called. It’s here that the simple magic happens. As long as the attached property is attached to an instance of TextBox, it wires up to the TextChanged event.

In the TextChanged event handler, the value of the attached TextBox (Text property) is set into the second binding’s value. By doing this, it then sets the datasource’s object’s bound property to the new value immediately.

The annoying part about this solution really is the extra binding that is required. As there isn’t a documented/known API for reading an existing binding, this technique requires that the developer specify the binding twice.

local:UpdateSourceHelper.UpdateSourceText="{Binding Value, Mode=TwoWay}"

In WPF, it would have been possible to declare the UpdateSourceText as defaulting to TwoWay binding. But, again, that feature has been removed. Without the TwoWay binding mode, the SetValue call in the TextChanged event handler will not update the object’s bound property. It’s one way.

I looked low and high for a more elegant solution, but couldn’t find one. If you find something better, please leave a comment!

As the size of the page changes, the tiles move into their new positions.

You can try it here, if you’re using a modern browser (IE9+, Chrome, FF, Safari, etc.).

Dependencies:

1. TweenJS
2. EaselJS (for the ticker used in TweenJS)
3. CSSPlugin (an add on to the the TweenJS library)
4. jQuery (1.7.2)

Relayouts are queued (as to prevent multiple from running).

Only boxes that will be visible to the end user (either animating to the screen or off the screen) are animated. It does not animate elements that do not start or end in the current viewport including boxes that would animate “through” the current viewport. I considered the latter to not add anything to the overall experience and just uses more CPU to perform the animations, so I intentionally left it out.

In the layout loop, the code verifies that the animation needs to run:

// here's the final destination
pos = { left: Math.round(x), top: Math.round(y) };

// check old and new positions, if either are in the viewport, we'll animate
if (isScrolledIntoView(pos.top + parentOfBoxesOffsetTop, boxH) || isScrolledIntoView(box.y + parentOfBoxesOffsetTop, boxH)) {
    Tween.get(box.e).to(pos, 500 + 500 * Math.random(), 
        Ease.quadInOut).call(function () {
            --layoutPending;
            if (!layoutPending && queuedLayout) { queueLayout(); }
    });
} else {

If it needs to animate, the code uses the static Tween method “get” to start an animation on the current element.

1. Tween.get(box.e) creates a new instance of the Tween class (initialized with the element to tween).
2. Using that Tween instance, the CSS attributes (thanks to the handy CSSPlugin), for left and top are animated for at least 500ms and up to a full second. The easing function I chose is quadInOut. Tip: Here’s a great way to visualize easing options using TweenJS.
3. Finally, when the animation completes, an anonymous function is called which decrements the number of pending animations and if there are no remaining elements to animate, and there’s something queued, another cycle is started.

All the code used by the demo is in default.html.

Colors of the boxes were set using hsl (only available in modern browsers):

box.style.backgroundColor = "hsl(" + c + ", 100%, 50%)";

Where “c” is:

c = (i / boxes * 360).toFixed(1);