Next week I’m giving a 2-day seminar on HTML 5 in Stockholm, covering not only semantic extensions of HTML 5 but also:
This will be 2 fun days
Christian
The Windows 7 taskbar is one of the great improvements of Windows 7. Users can pin applications to the taskbar so the application is fast accessible. The application need not to run, the application is accessible with the click of a button and thus replaces the quick launch. With the task bar the application can also offer some tasks that can be accessed from the user directly, instead of starting the application first and accessing the specific feature of the application. The .NET 4 version of WPF got an improvement that integrating the application with the task bar becomes an easy task. Starting with IE9, this is also an easy task to do with Web applications as this article demonstrates.
First, I’m adding a custom icon to the Web application. This icon is shown with IE9 in the taskbar and with the address link as the following figure shows.
If the Web application is pinned to the taskbar, the icon is displayed on the left side as well, and the back and forward buttons are colored. There’s a way to specify the color of the back and forward buttons. If the color is not specified, the color is taken automatically from the icon.
The icon can be specified in the header section of the HTML page with a link to an icon as shown. The meta elements named application-name, msapplication-tooltip, msapplication-starturl, and msapplication-window are used to configure the settings for the taskbar.
<link href="/Content/Icons/favicon.ico" rel="Shortcut Icon" type="image/x-icon"/> <meta content="CN innovation" name="application-name" /> <meta content="Information about CN innovation" name="msapplication-tooltip" /> <meta content="http://www.cninnovation.com" name="msapplication-starturl" /> <meta content="width=1024;height=768" name="msapplication-window" />
Selecting the context menu of the application pinned to the taskbar you can see information about the application as well as some links for fast access as the figure below demonstrates. This is the jump list.
The icon of the application is shown in the lowest section above the unpin and close options. These options as well as the menu to start in private browsing cannot be changed with IE9. The name of the application that was set with the application-name meta tag is shown beside the icon. With the application here I’ve also added two tasks for fast access which are Training and Books, and a custom section that lists the latest blog entries. How this is done is shown next.
Adding tasks to the task list is just a matter of adding meta tags msapplication-task. The content of this tag lists the name that is shown in the jump list, the link that should be opened on activating the item, and the icon.
<meta content="name=Training;action-uri=http://www.cninnovation.com/Home/Training;icon-uri=/Content/Icons/training.ico" name="msapplication-task" /> <meta content="name=Books;action-uri=http://www.cninnovation.com/Home/Books;icon-uri=/Content/Icons/books.ico" name="msapplication-task" />
The items that should appear above the task list can have custom section names. I’ve created a Blog section and display titles of the last five blog entries that link to these. Adding such items to the jump list is done with JavaScript. First it is verified if the Window is pinned. This can be done with the function window.external.msIsSiteMode. If it is not, and if the site is opened from a different browser, the script doesn’t need to run. A new section is created with the function msSiteModeCreateJumpList. Items to the jump list are added with msSiteModeAddJumpListItem. The parameters of this method are the name that should be displayed with the jump list, the URL that should be opened, and the link to the icon that should be displayed.
<script type="text/javascript"> try { if (window.external.msIsSiteMode()) { ext = window.external; ext.msSiteModeClearJumpList(); ext.msSiteModeCreateJumpList("Blog"); ext.msSiteModeAddJumpListItem("Sharing Assemblies between Silverlight and .NET", "http://weblogs.thinktecture.com/cnagel/2011/07/sharing-assemblies-between-silverlight-and-net.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Real World .NET 4 and C#", "http://weblogs.thinktecture.com/cnagel/2011/08/real-world-net-4-and-c.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("BASTA! 2011 in Mainz", "http://weblogs.thinktecture.com/cnagel/2011/08/basta-2011-in-mainz.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("WPF ListBox Postioning using a Canvas", "http://weblogs.thinktecture.com/cnagel/2011/08/wpf-listbox-postioning-using-a-canvas.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Reserve the date! Developer Day 2011", "http://weblogs.thinktecture.com/cnagel/2011/09/reserve-the-date-developer-day-2011.html", "/Content/Icons/blog.ico"); ext.msSiteModeShowJumpList(); } } catch (exception) { } </script>
It will be interesting to see what features Web applications will get from Windows 8. This taskbar feature from Windows 7 is limited in the way that there is not enough place for all my important applications. Let’s see how Windows 8 changes this using Metro, and what other features Web applications can use from Windows 8.
Christian
How to use WPF 4 to integrate in the Windows 7 taskbar is shown in my book Professional C# 4 and .NET 4.
Information on programming Web applications in my Web programming workshop.
Recently I’ve been asked how a list of graphical elements can be positioned, and the elements should be selectable. What panel could be used for this – a list of elements, and an element should be selectable – usually that’s the job of a ListBox. However, how can the elements in the ListBox be positioned using X/Y coordinates? For this job a Canvas can be used. Using a Canvas element for the ListBox turned out to be really simple as this article describes.
First I’m creating an Item type that should be displayed and contains coordinate information:
public class Item { public double X { get; set; } public double Y { get; set; } public string Name { get; set; } public string Color { get; set; } }
The collection of sample items is created within the ItemsFactory class:
public class ItemsFactory { private List<Item> items; public IEnumerable<Item> Items { get { return items ?? (items = new List<Item>() { new Item { Name = "One", X = 33, Y = 25, Color="Red" }, new Item { Name = "Two", X = 88, Y = 11, Color="Green" }, new Item { Name = "Three", X = 44, Y = 99, Color="Blue" } }); } } }
To display the elements within the view, the ItemsFactory is defined within resources and this resource is accessed applying a DataContext. The ListBox is bound to the Items property of the ItemsFactory and thus displays the items. The default view of the ListBox is just a list of strings, in this case the Item class didn’t override the ToString method and thus only the name of the classes is displayed.
<Window x:Class="ObjectListSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:ObjectListSample" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <local:ItemsFactory x:Key="sampleItems" /> </Window.Resources> <Grid DataContext="{StaticResource sampleItems}"> <ListBox ItemsSource="{Binding Items}" /> </Grid> </Window>
The display can be changed by defining an ItemTemplate for the items of the ListBox. The items are displayed as an ellipse within a Canvas element. As it’s contained within a Canvas the Ellipse can be positioned with Canvas.Left and Canvas.Top. The position information is taken from the X and Y properties of the Item. Beside the position also the Color and Name properties of the Item are used for the display.
<Style x:Key="objectList" TargetType="ListBox"> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <Canvas> <Grid Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"> <Ellipse Fill="{Binding Color}" Width="50" Height="40" /> <ContentPresenter Content="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </Canvas> </DataTemplate> </Setter.Value> </Setter> </Style>
Applying the style for the ListBox the new display is ready.
<ListBox Style="{StaticResource objectList}" ItemsSource="{Binding Items}" />
As the screenshot shows, the items are shown according the values of the Item objects within a Canvas. Does this look lie a ListBox? It’s a ListBox! The items can also be selected. The screenshot shows element Two as selected element.
Christian
More information in my WPF workshops
Bei der diesjährigen Basta! in Mainz gibt es von mir gleich 4 Vorträge!
Dienstag, 9:30
Dabei gibt es für ASP.NET Web Forms Entwickler Foundations zu ASP.NET MVC, welche Vor- und Nachteile MVC hat, wie Websites umgestellt werden können, und wie auch ASP.NET Web Forms und MVC gemeinsam verwendet werden kann.
Dienstag, 17:15
Bei dieser Sessions wird einiges von Delegates aufgedeckt: delegates & events, asynchrone Features von delegates, Probleme und Lösungen zu strong references, anonyme methoden, Lambdas, Closures….
Mittwoch, 10:15
Relationale Daten oder… Diese Session gibt Einblicke neben dem Speichern von relationalen Daten in die Funktionsweise und Features von Azure Table, Blob, Queue, und Drive Storage.
Mittwoch, 15:45
Mit C# 4 gibt es das dynamic Keyword. Hier wird dynamic im Einsatz mit COM, Reflection, der Integration zu JavaScript und Python gezeigt. Weiter geht’s mit ExpandoObject, DynamicObject…..
4 unterschiedliche Themen! Welche Session ist für dich am interessantesten?
See you in Mainz!
Christian
