Jaime Rodriguez
On Windows Store apps, Windows Phone, HTML and XAML

  • Jaime Rodriguez

    WPF Discussion,090228


    Inside Microsoft, we have our own version of “forums” or “discussion groups” .. 
    Lots of great questions and knowledge get fleshed out in these conversations.   Below is a brief (edited) version of the questions that caught my attention in the last two days. Going forward, I will try to watch these discussions closer and post the juicy ones a couple of times a month (it will always be on friday or saturday, so check for them on mondays).

    Subject: XAML State of the nation

    Rob Relyea says:   Just blogged this update to the community…   

    [It is a very transparent, and relevant update, thanks Rob! ]

    Subject: RE: Is there a way to display first frame of video in MediaElement when loaded?

    I used MediaElement to display video. If I set LoadedBehavior as anything other than Play, MediaElement cannot display the first frame of the video but a black screen. If I set it to Play, video will start playing right away. Is there a way to only display the first frame of the video but not playing video when loaded?

    Set Scrubbing to TRUE, Pause and Seek to zero. Note, the first frame IS black for quite a few videos. (Fade from black is pretty common).

    Subject: Media Element Memory Leak?

    I have a very media intensive application developed in WPF. It makes extensive use of MediaElements. What I have been observing is memory leak in my application under very specific conditions. I’m using stream media off of the internet like CNN. When the network is running great all is wonderful. If the network is not available, I don’t get any content but the application still runs with no memory problems. However if the net work is spotty and I’m having issues getting the streams my memory begins to build up until the application runs out of memory.

    I know about this spotty condition as I have other services being called that fail due to network timeouts. I’ve isolated these and they don’t seem to be the issue.

    Any ideas or suggestions?

    BTW: I do destroy and create new media elements during the course of the application… It’s almost like the media element even though its removed is still trying to spool the stream after I’ve removed a reference to it. So its just hanging out taking up memory as it tries to spool that stream…


    You might be hitting the handle leak described in bug XXXX . A section handle is leaked when you create a single instance of MediaElement and free it up without having another MediaElement anywhere else in the app. “Freeing up” a MediaElement includes calling Close(), so maybe it’s also triggering every time you lose the stream. The workaround is to put a second MediaElement anywhere in the app, so that you never end up destroying the only remaining instance of MediaElement. Try that out and see if it works for you.


    There are also a few known leaks in WMP which MediaElement uses:

    Subject: Overlapped drawings and blending


    I have some rectangles that are being drawn in a call to OnRender.  They are all the same height and are being drawn horizontally.  There are times when rectangles have one or more overlapping regions with other rectangles.  Where the rectangles overlap they sometime appear taller.  I am guessing this is due to some blending that is happening on the top and bottom edges of the rectangles behind the scenes.  I tried turning off Aliasing but I cannot afford the side effects it produced since I use transforms and scaling to move these.  Is there an alternative to drawing these on a bitmap and changing the ScalingMode?

    If these were top-level FrameworkElements, you could use SnapsToDevicePixels (http://msdn.microsoft.com/en-us/library/system.windows.uielement.snapstodevicepixels.aspx), which is implemented in terms of DrawingContext.PushGuidelineSet (http://msdn.microsoft.com/en-us/library/system.windows.media.drawingcontext.pushguidelineset.aspx).  Since you're using the DrawingContext directly, I'd encourage you to try this too.  There's more info here as well: http://msdn.microsoft.com/en-us/library/system.windows.media.guidelineset.aspx (with pictures!).  Used correctly, this should address the issue for all axis-aligned objects regardless of DPI/scale/size/sub-pixel position.

    Subject: Which measure points to take for GUI response times

    My customer wants to use WPF’s internal measure points (not sure what those are?) to get timings from their UI responsiveness. They would like to answer some basic questions like “what is the total time a certain window or control takes from a user click to the time when it has rendered completely on the screen”?

    Apparently there are a lot of these measure points, but they fail to find the ones that are relevant. Do we have any guidance on which measurements to take and which questions they can help answer?


    Thanks, that looks like an interesting list, and from reading into it I assume that the WClientLayout event is the one they would be interested in to know the total rendering time of an element as I mentioned below?

    Well, there are many things to keep  in mind.  WPF has a UI thread and a render thread.  The render thread processes “batches” of updates per frame.  So there are lots of events to consider.

    the event raised when rendering has completed is:


    Subject: changing icon for Windows app installed by ClickOnce

    …is there a way to change an icon for an app deployed by ClickOnce, without having to track down the actual .exe location, creating a shortcut to that, then setting the icon on the Shortcut tab?  MSSolve (CRM app for CSS) was deployed this week and no icon was specified in the package, so I'd like to use something other than the default "white square" icon that it came with.

    It is possible to create a custom icon for your application that is deployed by ClickOnce.  You can set the following in description section in your application manifest. ClickOnce will use your icon instead of the default icon in the Start Menu shortcut.
    <description iconFile="sample.ico" />
    where sample.ico is your icon file which is also included in the application manifest.

  • Jaime Rodriguez

    WPF Training Resources, March Edition


    Karl and I have gotten a good number of questions about the MVVM training.  Here are the most common answers:

    • The training was not recorded; we will do that later (probably after tour below )
    • We are looking to repeat it, in April/May, multiple locations in the US.  The format will change slightly, it will be two-day (first day is WPF fundamentals, still aimed at LOB developers, second day is MVVM).  
    • Once we have figured out dates & locations we will announce it via blog posts.  Registration should be easy and current plan is for it to be free.
    • Here is the HOL lab for the MVVM training: C# versionVB version.

    While we figure details on the above training, below are some WPF training resources.

    For free online training (at your own pace): 3 days WPF bootcamp from MIX University.

    For instructor lead, upcoming WPF trainings and events for month of March.
    If you are interested in attending these, feel free to follow the registration instructions below. All of the events are free; as you can see there are some amazing trainers delivering these sessions.   

    Date Location Event description Trainer Registration
    3/4 to 3/5 Washington,DC XamlFest (WPF + SL, intro) Joh Pelak RSVP via email
    3/4 to 3/6 Mississauga, ON Canada 3-day WPF training (intro) Charles Petzold Metro, see below
    3/4 to 3/6 Irving, TX 3-day WPF training(intro) Ian Bowler Metro, see below
    3/9 to 3/11 Segrate, Italy 3-day WPF training(intro)   Metro, see below
    3/11 to 3/13 London, UK 3-day WPF training(intro)   Metro, see below
    3/11 to 3/13 Santiago, Chile 3-day WPF training(intro) Robby Ingebretsen Metro, see below
    3/17 to 3/19 Vedbaek, Denmark 3-day WPF training(intro)   Metro, see below
    3/31 to 4/2 Melbourne, Australia 3-day WPF training(intro) Josh Reuben Metro, see below
    3/31 to 4/2 London, UK 3-day WPF training(intro)   Metro, see below
    4/14 and 4/15 St. Paul, MN XamlFest (WPF +SL ) intro John Pelak RSVP via email
    4/29 and 4/30 Chicago, IL XamlFest (WPF +SL ) intro John Pelak RSVP via email

    For Metro trainings, the registration is private, feel free to email me directly and I will forward the details.   

    If none of the above suits your timeline or location,  please try one of our training partners: Pluralsight, Developmentor, Wintellect, etc. their trainings are often longer and deeper.

    If you know of more events, let me know..  I am sure there are many others.. apologies if I missed some one’s event..

  • Jaime Rodriguez

    Design-time data in Expression Blend


    Well- behaved, unobtrusive design-time data is essential for designers to create high-fidelity data templates and get a comprehensive view of the scene they are designing. If you agree, here is a must read on the common approaches to implementing design-time data inside blend (and Cider); the write-up covers:

    • The common ways to use ObjectDataProvider for design-time data. Pros & cons for each.
    • My favorite way to do design-time data via an Attached behavior..

    The source is available here.  The paper is here on  HTMLXPS, and DOCX.

    Let me know if I missed any thing..

  • Jaime Rodriguez

    Using Uris in Expression Blend


    Last week, Unni and Pete explained to me how Blend resolves Uris. In this post, I will attempt to explain the details and the possible solution.  

    We already knew that at design-time, Blend loads your window, usercontrols, or what every you are designing, in its main process (and main AppDomain). 
    In the default scenario, this would imply that all Uris will not work (since they resolve relative to Blend’s application) but there is some special handling in Blend to handle Uris in XAML. Blend reads the XAML and alters the Uri references so that they resolve relative to the file:// path of the designed application, instead of relative to Blend’s application. 

    For the most part, Blend does a good job and from XAML your Uris will work fine, but you will notice issues when you are resolving Uris that are not in the parsed XAML:

    • If you have design-time data, and the Uri’s are coming from data bindings, then blend can not intercept these and fix them.
    • If your Uris are coming from code that is executing while in design-time then Blend has no way of fixing them and your code is likely going to throw an exception or not resolve.


    As you already know, I like absolute Uris and the pack syntax; so I am going to stick with it, but now I have to emphasize that you use the full syntax (including the component part) on the Uri.  If you do this,  Blend seems to resolve very well on most scenarios, including code and bindings!!

    I will say it again, full Uri including component part. For example:

    • pack://application:,,,/Images/happyface.png  is wrong.  This will work from XAML, but not from code.  It needs to be
    • pack://application:,,,/WpfApplication6;component/Images/happyface.png    If you do this, Blend resolves well all the time!

    Note: I labeled it possible solution because I am aware that not every one likes the full pack syntax. It can be cumbersome. I also have to explain, that not every one needs this solution, you only need it when the Uris come from code and are needed at design-time (in Blend). Mixing and matching Uris might be a good compromise.  

    Want to see more?
    This sample shows all kinds of different paths to resolve an image.
    As you can see, at design-time, the binding ones and the ones that come from code, do work when using a full path. 

    Blend, design-time Run-time
    image   image

    Happy blending!!

  • Jaime Rodriguez

    Hiking Mt. Avalon at MIX09…


    Planning for our WPF workshop at MIX 09 is already in full swing at hour 2… and I am psyched about the speakers  we’ve already recruited:  John Gossman (WPF and Silverlight architect)  and  Jonathan Russ (Identitymine rock star developer and exWPF team member from the Avalon days).     

    We now have the authorities on architecture (john), developers (jonathan), designer/integrator (robby), and getting drinks (jaime) covered. We hope to have another designer confirmed by end of the week.  

    On agenda, we have to complete the team before we commit, but in case you need to change your reservations or register for the session, here is a quick draft from a 30 minute lunch w/ Robby.  Expect it to grow!

    The four ‘axes’ into the hike are going to be: Guidance, Tips, Patterns, and Collab…  


    If you are coming, or have advise on a tough WPF topic, please let us know what we absolutely must cover…

    While I am hyping our session,  I should also share that the morning workshops are very, very good.  Robby has a ‘Design fundamentals for developers’ and  Adam Kinney has a ‘Rosetta Stone, from Flash to XAML’ session.

    Don’t miss out!! If you need to convince your boss to let you come, tell him this is going to save you days (or weeks) later in your project; we hope to give you the map to the mountain (and share the best tips & tricks)..

    C U @Mix09..

  • Jaime Rodriguez

    M-V-VM training day sample application and decks


    During the M-V-VM training (last saturday) with Karl Shifflett I showed and referred often to this Southridge application below..
    The app is not very clean(when it comes to resources and styles in particular) but it is a fairly good ViewModel example, and it served well to illustrate a few of the points we made at the training (both good and bad practices).  So I am sharing it (as promised).   

    The application consists of three views sharing one ViewModel around real-estate data (called MainViewModel).

    The application's chrome includes a ribbon that drives all the Viewmodel via its filtering functionality.  The two filter commands that work are Bathrooms and bedrooms [if you change the selection for these, the results on the views should filter].


    I purposedly did not make the main window with the ribbon a view because I often run into applications that transition views so I wanted to show the concept of having a constant element in the chrome.   The ribbon is functional ( you can see its resize behavior).
    The checkbox columns are bound to the MainViewModel, and drive the columns that show up in the Search view (below).

    The views
    Again, the views are the results for the search from the criteria in the ribbon. 

    image image

    Both of these views are 100% XAML. 

    The grid is very functional, sort, selection, etc.   I call it SearchView.
    The map is simply a Listbox with a datatemplate and a tooltip on the ListBoxItems. I need to add more to that UI.  I call it the MapView :)
    You navigate to the map view, by either clicking on the map icon on the left hand side of any row of the data grid, or by clicking on the Map Ribbon button on the Search Results tab. 
    The full details of course include an OpenMap Command exposed in the MainViewModel that does the work.

    To go back to SearchView (from any view), just click on the Search tabs, and it automatically goes back.  The way that happens is through an attached behavior in the RibbonTab:

    <r:RibbonTab Name="SearchTab" Label="Search Criteria" view:RibbonTabSelectedBehavior.SelectionChanged="{Binding SearchSelectedCommand}" 

    This is a standard attached behavior that delegates the event and 'forwards' it the SearchSelectedCommand on the MainViewModel.  You can see the implementation on the RibbonTabSelectedBehavior class.

    There is another totally different View, called Profile.. 


    This view demonstrates data validation using IDataErrorInfo. It has an InfoTextBox (from Kevin Moore's bag-o-tricks) and shows the fields that are invalid in red.

    The validation is trivial, mostly checks for empty strings on all fields, except zipcode, around ZipCode it enforces the 5 digits or 9 digits with a dash format for US Zipcodes.

    [For details, check the Profile class] in XMLData project. ]

    You can see how the "Save Profile" command is wired to only be enabled when the data is valid.

    The Profile view purposedly contains a "PreferencesEditor" usercontrol that is not a view itself; it takes data context and drives its UI from it, but does not have full view functionality (again to illustrate a point: not every thing is a view).

    The profile window has both a DataTemplate ( for everything in "Contact information"). 

    The listboxes in Location are interesting because they State is populated with read-only data (I call it meta-data) that is not coming from the view model,  but the views are bound to the Viewmodel when selection happens (county is driven by the selection on State).   Be aware that the data is not big and some states (e.g. CA) might not have valid data. Try WA to see it the way I see it.


    The final screen is the Listing Details screen. This is a modal window that shows Listing details. Nothing too exciting here but it is a wired view model, including the Make appointment button. You may notice that the "Neighborhood" data template in this view is the exact same data template from the Tooltip on the map.   yes, I am lazy and I drive reuse, that is why viewmodel is my friend.

    The Listbox has a very "view specific" behavior implemented by 3 lines of code behind, it is used to implement selection when mouse enteimagers a listboxitem. I purposedly left it as is, though I am sure some M-V-VM purist will tell me I should have implemented it as an attached behavior. I chose not to because I did not want the viewmodel to manipulate the view on a quirk like this one. The view can self-contain the behavior and yes, if I try to move the code to Silverlight it will need the same 3 liner. I was OK with that.  I felt it was equally bad to have the ViewModel be listening for view events and "manipulate the view" directly (which I would have needed).

    At last, there is one class that keeps it all together, I called it the ViewManager. This is an over-simplistic implementation of a Presenter for the views that handles transitions across the views.  The views register with the viewmanager as they are instantiated, and the ViewModel can trigger call into the ViewManager ( a singleton) of course to trigger transitions across views. The viewManager itself can have a ViewModel if needed; in this case I did not use it, but in other apps I have used it.

    That is it, if you were at the class I hope you remember this.  If you were not, then maybe looking at the deck might help, though I must say the class was quite driven by example, so the slides are a bit presentation-zen-like. Please try the notes for a bit more context and drop me a comment or email if that is not cutting it.

    At last, thanks to all those that attended the class.  It was a lot of fun, and I really enjoyed meeting all of you.
    Thanks also to Matthias & Bruno & Karl for puttting it together and for inviting me. 

    Presentation (ppt deck) is here.   Code is here.  The code requires the WPF toolkit, all assemblies needed should be included in the project but if you get a compilation error, try getting the toolkit and the ribbon from codeplex

    [Disclaimer again, the code needs some heavy scrubbing on the UI and resources; also I had to take out the data that I normally use, so if you see #if SQLCE, simply ignore these.  I replaced all the data with an XML file (for easy tweaking). It is not real data, so don't be surprised when you see a Seatttle address in an Issaquah neighborhood.  I merely invented the data on the fly].

Page 1 of 1 (6 items)