mikezh

Windows 8 Metro App – How to get a data grid like UI for a collection of Items?

Zongmao Zhang — Thu, 26 Jul 2012 23:54:00 GMT

In developing windows 8 metro app, I didn’t find a data grid control that can be used to present a collection of items (e.g. Orders). With the sample code here, I am able to realize the following data grid like UI:

Sampel XAML code

<Page

x:Class="Microsft.IT.Marketing.IOExplorer.IODetailForecast"

DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Microsft.IT.Marketing.IOExplorer"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Page.Resources>

</Style>

</Style>

</Style>

</Style>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Border>

</Border>

</Border>

</StackPanel>

</Grid>

</DataTemplate>

</Page.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Orientation="Horizontal" Background="{StaticResource StackPanelBackgroundBrush}"/>" Width="250" HorizontalAlignment="Left">

</Border>

</Border>

</Border>

</StackPanel>

<ItemsControl Grid.Row="1"

ItemsSource="{Binding Items}"

ItemTemplate="{StaticResource DefaultItemDetailTemplate}"

</Grid>

</Page>

Play Audio in Windows Phone Application

Zongmao Zhang — Fri, 18 May 2012 00:02:00 GMT

There are a few options to play audio in windows phone application which I tried and worked:

1. Use XNA Library to Play a Wave Sound
Add Microsoft.Xna.Framework.dll to yourphone application project, and
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;

Than you can use the following code snippet to play a sound (don’t forget to add the sound file into your project’s Sound folder)

string dingSoundFile = "Sound/Ding.wav";
var stream = TitleContainer.OpenStream(dingSoundFile);
if (stream != null)
{
      var effect = SoundEffect.FromStream(stream);
      FrameworkDispatcher.Update();
      effect.Play();

}

Or

string dingSoundFile = "Sound/Ding.wav";
SoundEffectAction soundEffect = new SoundEffectAction();
soundEffect.Source = dingSoundFile;
soundEffect.Play();

2. Use MediaElement to Play MP3
In xaml, use a media element. If you set AutoPlay="True", it will just play when the page loads:
<MediaElement Source="Sound/Sleep Away.mp3" AutoPlay="True"/>

If you don’t specify a Source in the xaml, you can use a play button to start the play:

<MediaElement x:Name="MediaElement1" AutoPlay="False" MediaOpened="MediaElement_MediaOpened"/>
private void Play_Click(object sender, RoutedEventArgs e)
{
MediaElement1.Source = new Uri("Sound/Sleep Away.mp3", UriKind.Relative);
MediaElement1.Position = new TimeSpan(0);
}

private void MediaElement_MediaOpened(object sender, RoutedEventArgs e)
{

MediaElement1.Play();
}

private void Pause_Click(object sender, RoutedEventArgs e)
{
MediaElement1.Pause();
}

3. Play Background Audio

You may want your Windows Phone application continues playing audio even when the application is no longer in the foreground. This can be achieved by implementing an audio playback agent. Refer to http://msdn.microsoft.com/en-us/library/hh202978(v=VS.92).aspx for details

4. Play Audio by Implementing TargetedTriggerAction

Refer to http://www.japf.fr/2010/08/sound-effect-in-wp7-sl-application/ for details

IIS AppCmd Quick Reference

Zongmao Zhang — Mon, 23 Apr 2012 18:06:00 GMT

IIS appcmd is very handy for deployment automation of .NET web applications. The appcmd can be found at %systemroot%\system32\inetsrv or %systemroot%\\SysWOW64\inetsrv on web server. Please refer to IIS Administration Tools for details. The following is a quick reference for the most common usages of appcmd in web application deployment automation.

1. Add Site
appcmd add site /name:MySite /bindings:http://*:80 /physicalpath:”d:\MySitePath”
2. Add App Pool
appcmd add apppool /name:MyAppPool /managedRuntimeVersion:v4.0 (e.g. targeting .NET 4.0)
3. Set App Pool Credential
appcmd set config /section:applicationPools /[name='MyAppPool'].processModel.identityType:SpecificUser /[name='MyAppPool'].processModel.userName:MyDomain\MyAccount /[name='MyAppPool'].processModel.password:MyAccountPassword
4.Add App
appcmd add app /site.name:"MySite" /path:/MyApp /physicalpath:"d:\MySitePath\MyApp"
5. Assign/Change App Pool to an App
appcmd set app "MySite/MyApp" /applicationpool:MyAppPool
6. List (App, Site, AppPool, etc.)
appcmd list app
appcmd list site
appcmd list apppool
7. Enable/Disable Anonymous Authentication (True to Enable, False to Disable)
appcmd set config "MySite/MyApp" -section:system.webServer/security/authentication/anonymousAuthentication /enabled:"True" /commit:apphost
8. Enable Windows Authentication (True to Enable, False to Disable)
appcmd.exe set config "MySite/MyApp" -section:system.webServer/security/authentication/windowsAuthentication /enabled:"True" /commit:apphost
9. Change Windows Authentication Providers (NTLM or Negotiate)
appcmd set config MySite/MyApp -section:system.webServer/security/authentication/windowsAuthentication /~providers /commit:apphost (clear provider list)
appcmd set config MySite/MyApp -section:system.webServer/security/authentication/windowsAuthentication /-providers.[value='NTLM'] /commit:apphost (set to NTLM)
appcmd set config MySite/MyApp -section:system.webServer/security/authentication/windowsAuthentication /+providers.[value='Negotiate'] /commit:apphost (set to Negotiate)
10. Add Custom Header – for example, nosniff header or IE 7 compatiable header
appcmd set config MySite -section:system.webServer/httpProtocol /+customHeaders.[name='X-Content-Type-Options',value='nosniff'] /commit:apphost
appcmd set config MySite -section:system.webServer/httpProtocol /+customHeaders.[name='X-UA-Compatible',value='IE=EmulateIE7'] /commit:apphost
11. Add Default Document - error if it exists already
appcmd set config "MySite/MyApp" /section:defaultDocument /+files.[value='default.asmx']
12. Delete App and Site - error if it doesn’t exist
appcmd delete app "MySite/MyApp"
appcmd delete site "MySite"
13. Delete AppPool- error if it doesn’t exist or it is used by app
appcmd delete apppool MyAppPool
14. Backup and Restore IIS Settings
appcmd add backup MyBackup
appcmd restore backup MyBackup
15. HTTPS Binding if you are using HTTP over SSL
appcmd set site /site.name:"MyApp" /+bindings.[protocol='https',bindingInformation='*:443:MySSLCertificate']

Silverlight Accessibility Coding Practice

Zongmao Zhang — Fri, 06 Apr 2012 15:51:00 GMT

Accessibility is about making your applications usable by people with limitations that prevent or impede the use of conventional user interfaces. Microsoft Silverlight provides built-in keyboard support and support for screen readers, which leverages accessibility frameworks that already exist for use with HTML and other UI technologies. The built-in support enables a basic level of accessibility that you can customize with very little work by setting a handful of properties. For more information, you can refer to Silverlight Accessibility and Silverlight Accessibility for Developers.

Silverlight works with screen reader software out of the box. However, you will normally need to modify some settings for optimal behavior or to implement additional support. Here are some essentials to make this happen:

Windowless Mode - Using the Windowless Mode in Silverlight renders it inaccessible. Assistive Technology (AT) clients are unable to see the Silverlight application in the UI Automation Tree in this situation. Using the standard mode eliminates this issue. The windowless mode property can be set by <param name="windowless" value="false"/> in the Silverlight object hosting page (aspx or html). Use the default should be fine if you haven't changed it yourself.
Set the AutomationProperties.Name of each UI control. For example: <TextBox x:Name="TextProductName” AutomationProperties.Name="Product Name"/>. It can also be set by doing data binding to a view model’s property. There are other ways to set the automation property for accessibility support. Refer to Silverlight Accessibility for more details.
Use IsTabStop, TabIndex, and TabNavigation to control Tab Stops in xaml or programmatically. TabNavigation has three values: Once, Local and Cycle. The default is “Once”. If your page uses data grid, tree view, or custom control that contains more than one UI elements, you may want to set TabNavigation=”Local” so that you can tab in, tab through all UI elements within the control and tab out at the end.
Control Focus – set default focus when page loads. For dynamically generated contents (e.g. add a row to a data grid), set the focus to the first actionable UI element (e.g. TextBox, CheckBox, Button, DropDown, etc.). If you use popup, set focus back to the wanted UI element when the popup closes.
Add similar support to your own custom controls.
In dynamically generated controls, you can set the automation property programmatically: AutomationProperties.SetName(DependencyObject element, string value).
Override the public override string ToString() of any data contract that are used by data binding so that the TA client can read it properly. For example, if you don’t do this, the items in dropdowns may not be read properly.
Try to avoid scrollbars. Use other options to accommodate large data or content. For example, use paging other than scrollbar with data grid.
Debugging: the user interface of a Silverlight application is represented by a visual tree of UI elements. You can view this accessibility tree using free tools such as UIA Verify or commercial tools such as Silverlight Spy. This is useful to confirm the values of the attached AutomationProperties.
Always use AT client (e.g. screen reader software) to test your application.

Silverlight Tree View Accessibility

Zongmao Zhang — Wed, 04 Apr 2012 04:08:00 GMT

Silverlight TreeView is a very common user control for hierarchical data display. For example, it can be used to display organization hierarchy or any other entity hierarchy data. Within each treeview node, you may have more than one user controls, like a CheckBox + a TextBox. This presents a challenge to user accessibility:Tab key will not tab through each control within a TreeView node if you use the default styles or item template. Tab key only stops once at each node.

To get Tab key tab through each control within each node, I used a hierarchy data template as follows:

<ctrl:HierarchicalDataTemplate ItemsSource="{Binding Children}">
<ContentControl TabNavigation="Local">

</StackPanel>

</Border>
</ContentControl>

</ctrl:HierarchicalDataTemplate>

The key here is to use a ContentControl in HierarchicalDataTemplate and set TabNavigation="Local". With this, I am able to tab through the checkbox and the textbox within each tree node.

Note: ctrl is referred to the following name space:

xmlns:ctrl="clr-namespace:System.Windows;assembly=System.Windows.Controls”