Synergist

Windows Store App Xaml GridView with Variable Templates

Synergist — Tue, 25 Sep 2012 19:49:52 GMT

One of the useful controls to use when creating a Windows Store app for Windows 8 is the GridView which can use a VariableSizeWrapGrid to support item templates of varying size. Using this in conjunction with an DataTemplateSelector makes it possible to vary both the size and data template of the items in a GridView. Here is how you do it:

Setting the VariableSizeWrapGrid Item Height and Width

The VariableSizeWrapGrid works with a unit size and you can define whatever unit size you want – each template should be a multiple of that. In your GridView.GroupStyle, you should define the ItemHeight and ItemWidth. Add the spacing between the columns & rows; based on the Microsoft guidelines, the height and width should be layed out on a 20-pixel grid and the spacing should be 10 pixels between each item. So in this case each item would be 200x100 with 10-pixel spacing, so ItemWidth=210 and ItemHeight=110.

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical" 
            Margin="0,0,80,0" 
            ItemHeight="110" 
            ItemWidth="210"/>
    </ItemsPanelTemplate>
</GroupStyle.Panel>

Create Data Templates for each item type

Create Data Templates in a resource file that would be used for each item type. In this case, I have a ProjectItemTemplate and FavoriteProjectItemTemplate in a Xaml resource file included in my App.xaml. The FavoriteProjectItemTemplate shows a Gold Star (xE082 in the Segoe UI Symbol) and additional project information that I only want to load for favorite projects:

    <DataTemplate x:Key="ProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="100">
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="FavoriteProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="210">
            <TextBlock HorizontalAlignment="Right" VerticalAlignment="Top" x:Name="Star" TextWrapping="Wrap" Text="&#xE082;" FontFamily="Segoe UI Symbol" Foreground="Gold" FontSize="24" Margin="0,5,10,0"/>
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Margin="0,0,32,0"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[0].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" discussions" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[1].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" todos" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[2].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" files" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[3].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" text documents" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[4].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" dates" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[5].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" people" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DataTemplate>

Create an Item Template Selector

The Item Template Selector is called each time a new item template is needed. In this, you should pick the item template and set the number of columns & rows the item should span. In this case if the project.IsStarred is true, then the template would use the FavoriteProjectItemTemplate and set VariableSizedWrapGrid to span 2 rows instead of 1.

    public class ProjectDataTemplateSelector : DataTemplateSelector
    {
        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            var project = item as Project;

            var uiElement = container as UIElement;

            if (project.IsStarred)
            {
                VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
                VariableSizedWrapGrid.SetRowSpan(uiElement, 2);

                return App.Current.Resources["FavoriteProjectItemTemplate"] as DataTemplate;
            }

            VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
            VariableSizedWrapGrid.SetRowSpan(uiElement, 1);

            return App.Current.Resources["ProjectItemTemplate"] as DataTemplate;
        }
    }

Adding the ItemTemplateSelector to the GridView

On the page resources, add an instance of the ItemTemplateSelector and then reference it in the GridView.ItemTemplateSelector=”{StaticResources ProjectTemplateSelector}”

<support:ProjectDataTemplateSelector x:Key="ProjectTemplateSelector"/>

Responding to Changes in the Data Model

If the selection criteria changes and you need the selector logic to run again, just reset the selector. Thanks to this StackOverflow answer for the assistance here.

var projects = this.selector.SelectedItems.Cast<Project>();

foreach (var project in projects)
{
    project.IsStarred = !project.IsStarred;
}

var itemTemplateSelector = this.selector.ItemTemplateSelector;
this.selector.ItemTemplateSelector = null;
this.selector.ItemTemplateSelector = itemTemplateSelector;

Summary

Varying the item template and size of items increase the visual interest of your app and can help highlight important differences when standard DataTemplate binding won’t work.

Making a Great Snapped View for your Web Site on IE10 on Windows 8

Synergist — Tue, 24 Apr 2012 03:11:15 GMT

One of the great features of Windows 8 Metro Applications is the Snapped View where app developers create a 320px wide view of their app. When the user snaps their app to the left or the right of the screen they can continue using their primary app while still having the secondary app visible in a thinner view. The project templates in Visual Studio come with this capability built-in to make it easier to address this important part of the application experience. If you build your Metro application with HTML, you see that this is done with CSS Media Queries, a feature supported in all HTML5 modern browsers. This is also the way that you support snapped view for your website, with the @-ms-viewport rule (since it’s Microsoft-specific today, it has the –ms- prefix and can be safely ignored by other browsers.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width snapped view goes here */
}

Since Mobile browsers like Windows Phone’s IE and the iPhone both report their width as 320 px, you may be able to reuse the media queries that you created for mobile for the snapped view by adding one line of css to your style sheet. If you are intrigued by CSS Media Queries, and want to see more examples of responsive design that use them, take a look at the Media Queries site which hosts a great collection of them.

You can also take a look at a site that I’ve been working on that uses media queries and implements the snapped mode media query at TimeLapseApp.com.

More details

My Favorite New Features of Windows Phone 7 Mango

Synergist — Sat, 01 Oct 2011 07:28:57 GMT

A few days ago I got a notice over my phone that an update was ready to be installed and I should connect it to my computer. Mango had arrived for my Dell Venue Pro on T-Mobile’s network. I connected my phone to my computer and proceeded to update the phone. A few minutes later it was ready. Now after using it for a few days, I am really happy with so many of the new features. I’d like to share my favorites with you:

Turn-by-turn audible directions on Bing maps
Podcasts are now in the Marketplace and you can now subscribe to them
Visual Voice Mail – I had to enable/disable/enable this on the T-Mobile account website but finally it is working
Quick App Switching/Multitasking
Easy check-in to locations
Integrated Messenger/SMS/Facebook Chat
Twitter & LinkedIn integration
Ability to open and Share Office documents on SkyDrive
Pinning a playlist to my home screen
Pinning an Outlook folder to my home screen
Groups in the People hub (and pinning groups)
Auto-Fix for photos
Upload videos from the phone to Facebook
New HTML5 IE9

What are your favorite Windows Phone 7 Mango features?

Teaching Computer Programming at Home

Synergist — Mon, 27 Jun 2011 16:16:27 GMT

This past week I had a great time teaching my 9-year-old son Alex and 9 of his friends computer programming in my home. I used Kodu Game Lab and Small Basic, two free tools created for kids to learn programming. I wrote a series of blog posts about it on my personal site Charette.com:

Has anyone else had an experience teaching programming at home? Please share it.

I’m About to Start Teaching Ten 9-Year Olds Computer Programming

Synergist — Fri, 17 Jun 2011 17:00:55 GMT

Next week, the Fairfax Computer Camp will open in my home. As I work from home, I have a bit of flexibility in scheduling my working hours, so I’m attempting an exciting new challenge – how to teach my son Alex computer programming in a fun environment with 9 of his friends. Take a look here – I plan on writing about the experience on my website Charette.com.

Wish me luck.

Converting SVG to XAML with IE9 and the Microsoft XPS Document Writer

Synergist — Wed, 20 Apr 2011 16:56:00 GMT

There is a growing library of content on the internet in SVG, especially with sites like The Noun Project. With a Windows Phone project that I am working on I wanted to use a graphic from the Noun Project. To do this I needed to convert the SVG file to XAML in order to put the graphic into a Silverlight application on the phone as XAML Paths. Here is how I did it:

I downloaded a SVG file to my computer from the Noun Project
I double-clicked on the SVG file and it opened up in Internet Explorer 9
On the Command bar I clicked on the Print Icon…Page Setup and set all the headers and footers to –Empty-
I printed the page using the Microsoft XPS Document Writer and saved the file to my desktop.
I changed the filename of the file created by the XPS Document Writer from .XSP to .zip and opened the zip archive
I opened the file Documents\1\Pages\1.fpage from the zip archive in Notepad – this is XAML text
I copied everything inside the <FixedPage> which included <Canvas/> and <Path/> elements to my clipboard
I created a new Canvas element in Expression Blend and pasted the contents of the clipboard into it.

Note: this might not work for all SVG graphics, especially those with more complex combined paths.

Silverlight UI Developer Job at Check Six Training Systems

Synergist — Tue, 19 Apr 2011 14:55:58 GMT

Immediate Opening with one of the fasting growing U.S. companies. What? You haven't heard of Check Six Training Systems? Oh, you will! Even sooner if you are the right fit for our totally unique, rapidly growing company. Our roots come from aviation, but we are taking aviation training solutions and applying them to other high performance industries. After the BP offshore disaster, the Oil and Gas companies are struggling with a complex training problem and they know that we have the solution. Our clients, which include Chevron, Shell, Exxon Mobil, etc. are begging for our Human Performance systems now, but we need your help.....

We have an immediate need for the best Silverlight / UI Developer and Web Graphics Developer in the Dallas/Fort Worth area. If you feel that you've got "The Right Stuff", but you are not from here, we're still interested since a lot of us work virtually. You’ll be instrumental in the design and development of our Human Performance application's look and feel to make it intuitive, simple and "loveable". Best of all, your software will save time, money, and LIVES in high performance industries that drive world economies. If you are ready to make a difference in addition to embarking on a fantastic career, we are your company.

Silverlight / UI Developer Job Posting

Generous salary and options depending on your contribution. Substantial bonus opportunity.
Qualifications:
Everybody seems to equate "years" to experience. If you can work in an agile startup atmosphere and can turn a complex data set into an elegantly simple, yet stable interface, your "years" don't matter to us!

Mandatory:
Experience designing and implementing web-based user interfaces.

UI portfolio available including Microsoft Silverlight examples.

Candidates must have current work authorization in the US. We will not sponsor visa candidates.

Desired:

Experience building web services and integrating with Microsoft SQL Server 2005 or 2008

Experience designing and implementing middle tier business logic in C#

Strong familiarity with web graphic formats and tools

Experience delivering commercialized software

Please send your resume and/or portfolio to korn@c6ts.com.

Why I Chose the Dell Venue Pro

Synergist — Fri, 14 Jan 2011 23:33:16 GMT

After more than a month of waiting, I am the proud owner of a new Dell Venue Pro Windows Phone. As a Microsoft employee I had my choice on phones and carriers and I wanted to share the reasoning behind my choice.

The T-Mobile network has great coverage in my area and where I travel. Like all carriers today, T-Mobile has an interactive coverage map where I was able to see the quality of coverage in the areas that I care about. When people ask me about which mobile carrier they should go with, this is the primary determining factor, I always ask them about the carrier quality in the areas that they care about. If you can’t make call’s it’s not a phone.
Numerous colleagues have told me that T-Mobile had great customer service.
After using virtual keyboards on a phones for over a year, I am still horribly inaccurate. I wanted a phone with a real keyboard that didn’t force me to reorient what I was doing. The Dell Venue Pro has a great slide-out keyboard and when collapsed, the phone is barely bigger than my former phone, the HTC Imagio.
The 4.1 inch AMOLED screen is very large and bright making the the graphics beautiful and the text crisp. Because the screen uses Corning’s scratch-resistant Gorilla® Glass, I can be confident that the phone will withstand the travel pressures that I put on it. The new Surface computer demonstrated at CES earlier this month also used Gorilla Glass.
The phone has a solid feel and a professional look. I’m done with flimsy-feeling plastic phones.

Great job Dell, T-Mobile, and Windows Phone!

C# Silverlight Developer Jobs at Inviso in Bellevue, WA

Synergist — Tue, 04 Jan 2011 17:22:20 GMT

Subscribe to this Silverlight Jobs Feed.

Inviso builds world class software solutions specializing in business intelligence, web applications, and service oriented solutions. Inviso works with a steady stream of new Microsoft technologies and prides itself on exceptional service.

Inviso is looking for a C# Silverlight Developer to contract for a short-term project. The candidate can be junior, intermediate or senior in level and the ideal candidate will possess excellent visual and user interface design skills. The candidate is expected to work with Silverlight, WPF, and XAML to develop a world class line-of-business application. Preference will be given to candidates who submit code samples. Communication and team skills are at the top of our list. A Computer Science, related degree or equivalent experience is a must. Good patterns and object-oriented design skills are a must for the senior role. Depending on the individual’s performance and needs of the business, the role might mature into a longer term opportunity.

You will be expected to either know, or be on the path to knowing the ins and outs of Expression Blend, XAML, Silverlight and WPF.

You will be involved in the full software development life cycle, including design, development, and maintenance.

Responsibilities include:

· Working closely with a Project Manager and Analyst to understand the business problem

· Contributing to functional specifications and design conversations

· Working with a Solution Architect to get guidance on design patterns required as part of solution

· Writing and rewriting code so that it not only solves the problem but is clear and maintainable

· Accommodate client requests that may drift through the duration of the project

· Understand and negotiate tradeoffs between competing implementations of components or algorithms

· Work closely with designer to enable design-driven development

· Work closely with designer to integrate XAML styles and custom controls

Job Requirements for Senior C# Silverlight Developer

· Computer Science, related degree or equivalent experience is a must

· Minimum of 5-8 years of experience in industry.

· Industrial caliber object-oriented design skills

· Practice and understanding of design patterns

· Solid team and communication skills

· Solid technical communication skills: wireframes, ERDs, UML diagrams

· Experience with enterprise patterns and architectures

· Command of C#, Silverlight, XAML, XML, WFC, WPF, WF, SQL Server, LINQ

Job Requirements for Junior C# Silverlight Developer

· Computer Science, related degree or equivalent experience is a must

· Minimum of 2-4 years of experience in industry.

· Background in object-oriented design

· Introduced to design patterns

· Solid team and communication skills

· C#, XML, SQL Server, exposure to Silverlight, XAML, or WPF and LINQ

If you are interested in this position, please email us your resume to apply@invisocorp.com. Reference SilverLightJobs.

Subscribe to this Silverlight Jobs Feed.

Updated SMF Thumbnail Scrubbing Sample Code

Synergist — Tue, 28 Dec 2010 18:59:32 GMT

I just posted an update to the code I wrote almost a year ago for showing thumbnail images of a video while scrubbing (moving the play slider) in Silverlight. This is similar to the experience that you get when scrubbing on Netflix Watch Instantly with Silverlight. Here is what I’ve done:

I updated the code for Silverlight 4.
I updated the code for the Silverlight Media Framework 2.2 release by making the code a plug-in. This makes it very easy to integrate the code – all you have to do is add the ThumbnailScrubbing.dll assembly to your project and the SMF Framework takes care of it with the Managed Extensibility Framework (MEF).
I added a GenerateThumbnails command line tool that uses the Expression Encoder 4 object model to generate the necessary thumbnail images.
The Thumbnails control is now a custom control that can be styled or skinned.

You can download the code here or try out a demo that uses it at http://xmldocs.net/smf/