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

  • Jaime Rodriguez

    rounded corner images in wpf.


    this has come up 3 times over last few weeks.. so I am putting it here for the nxt time .. 

    "How do I create a mask to round the corners of an image" is how it gets worded, which of course scares me due to history with OpacityMask --in earlier builds, and I think still in beta2- OpacityMasks forced software rendering. no worries it is fixed in later builds..

    Here are two alternatives besides OpacityMask...  [now that OpacityMask is hardware accelerated it is also not a huge deal to use it, but not discussing it here cause the SDK does a great job at it..

    Option 1:  (recommended, most performant)

    Draw a Rectangle with Rounded Corners and Fill it with the ImageBrush ... 

    In EID,

    1. Project - > Add Existing Item -  to add your image
    2. Drag the image from Projects Window to Scene
    3. Select Image, Go Tools - > Make Tile Brush -> Make Image Brush
    4. Now you can drag the radius of the rectangle and make it round


    That is good, how ever it mostly works for images...   Another way that works for any UIElement that you want to "contain" is:  

    Option 2: Create a Clipping Path..

    1. Double click on Image in project window to add to scene
    2. Add a rectangle or any other shape to your scene.. position it right on top of the image you want to clip
    3. drag the radius of the rectangle to be of the shape you need the image
    4. Select the Rectangle First -- Note: order matters here
    5. Press Ctrl  and select the Image you added to scene in step1
    6. Select Tools - > Make Clipping Path


    Option 3:  OpacityMask is well documented in the SDK .. so we won't repeat it here..

    When to use which -- some of the criteria I have seen so far was:

    • Performance -- when will do it many, many times
    • Dynamic layout, cause don't know what the image looks like
    • Ability to manipulate/apply transforms to the Image/Brush .. Say to create a "Zoom effect into the image but with out resizing the image frame"  ..

    On performance, differences should not be too noticeable unless you do it 100s of times ... but if you do it many times (e.g. image catalog) it will add-up... so should be considered..

    Rectangle/Image Brush <    Clipping <  Opacity  Mask    for how expensive it will be.

    On Dynamic Resizing (different size images) ,  I find rectangle to be easiest ...

     <Rectangle RadiusX="50" RadiusY="50"

    Width="{Binding ElementName=brush,Path=ImageSource.Width}" 
     Height="{Binding ElementName=brush,Path=ImageSource.Height}">
          <ImageBrush x:Name="brush" ImageSource="f:\users\jaimer\pictures\untitled.png"/>

    In EID,

    1. Go to XAML view and add a x:Name for the brush
    2. Find Width in properties Window ...
    3. Right Click on Width,  Select Databind
    4. Select Explicit Data Context
    5. Check "use a Custom Path expression"
    6. Enter 'ElementName=brush,Path=ImageSource.Width'  (minus the quotes)
    7. Repeat 2-6 for Height

    For resizable Clipping Path I did it in code .. cause I was lazy about thinking too much about it..

    In EID,

    1. Go to Timeline
    2. Select your image
    3. Go to events Window
    4. Click Add, 
    5. Select SizeChanged , enter OnSizeChanged for the event name.
    6. In the code window, add these two lines


    private void OnSizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
        System.Windows.Rect r = new System.Windows.Rect( e.NewSize );
                  RectangleGeometry gm = new RectangleGeometry(r, 40, 40); // 40 is radius here
                  ((UIElement)sender).Clip = gm ; 


    On Animations/Transforms  in EID ..

    • Clipping scenario is straight forward..  No issues.
    • With VisualBrush, EID appears to not let you create Storyboards for animations..  bummer! here is how you can get around it.. 
      • Create a scene and drop the Image (not the brush ) into the scene ..
      • Create all the animations/storyboards against the image..
      • Once you have created all the storyboards, you can create the brush..
      • Give it the same x:Name you had given to the Image and then replace the Target Properties, from  UIElement.RenderTransform to ImageBrush.Transform  .. assuming those are the parts you animated..

    That is it .. You now have rounded images.. that will perform well and look neat!










  • Jaime Rodriguez

    CLR profiler in Windows Vista beta2 ...


    for some reason my CLR profiler was misbehaving in Windows Vista beta2..  CLR Profiler started fine but I was getting "waiting for application to start" and it just would not sync..  ( I waited 15 minutes twice :(

    Tried the "Run As Administrator"  and it all worked fine..   from there on seems better..  Not sure what is up, but thought I would share the workaround just in case ..


    UPDATE:  Yes, the CLR Perf team confirmed that CLRProfiler tries to register  ProfilerOBJ.dll  the first time it runs..Due to UAC this was failing ..  so, if you run into issues just register the dll manualy...  [yes, you will need admin for it] ...


  • Jaime Rodriguez

    video driver checks for hardware acceleration iin WPF beta2


    The way to know if you are getting HW acceleration is still Perforator .. [that ships w/ the WinFX SDK] ..  If you are not getting acceleration, check SeemaR details on the 'driver checks' in WPF to decide if you need to upgrade drivers

    Please provide feedback on your driver experience .. It is good to know for RTM ..



  • Jaime Rodriguez

    Adobe Fireworks to XAML exporter...

    via Mike Swanson's ... blog
  • Jaime Rodriguez

    catch up blogs..


    last two months I read no blogs -- this had to do with my moving 100% to Vista & office beta2, I read blogs from an add-in that undestandably did not work in Outlook - to be fair Idid not research/not report it..   But just now, got all my blogs caught up.. Great stuf...

    here are my favorites -- sorry I did not keep track of who it came from --

    StoryBoard.DesiredFrameRate - Every one should know about it already.. but just in case.. Use it if you can :)

    WPF/E in channel9   The WPF/E team is moving at warp speed ..

    The WPF Blog  -- Subscribed -- for those historically flash designers that deal with me daily ... see, I am trying to learn more about flash, so we can communicate easier ..

    WPFSDK team blog  -- Subscribed! lotsa great samples.. 

    ScreenSpaceLines3D --  I missed it while it was gone!

    The End.. Lots of other great stuff I am sure I missed.. 









  • Jaime Rodriguez

    Notes/Interpretations from the field...


    WPF evangelism has been a lot of fun lately..  many companies are popping up wanting to build the next gen UX on WPF ... (e.g. this EMAP demo, coded in record 2 weeks time-frame and with out any help from Redmond -that I am aware of)... 

    My enterprise projects are definitely shaping up ..  Most of them are designed and some are well into development..  None of mine are in production yet ..  but ibloks and the northface are ... and you can see some of the progress in our apps from the new www.seewindowsvista.com (OTTO and TSRI are enterprise projects)... 

    With this progress in mind, and an eminent close down towards RTM, it is time to start sharing some of MY opinions on lessons learned/workarounds, etc..

    I can't do all of them in the 30 mins I have now, but here are some topics I will flesh out soon: 

    • How are projects excuting against the WPF vision/goals
    • How to start/Ramp-up  to WPF
    • Architecture in wpf and why is it so cool ... 
    •  Is WPF for Enterprise LOB apps?
    • Databinding  -- this one just cause its fun 
    •  Hardware acceleration
    • Virtualization
    • 3D in WPD 
    •  Video in WPF  
    •  Mobility  ...  (note I am not talking about WPF/E,  I am talking about laptops and WPF )
    • Media Center
    • Performance  ..
    • Tools 

    If I missed the one you are interested, email and let me know ...  I am not sure I will go in the order listed above, help prioritize if you please..

    Also, if you have a different WPF app going live in beta2, let us know..

  • Jaime Rodriguez

    Executing against the Windows Presentation Foundation vision .. [Update as of beta2]


    When we started looking for early adopters, it was all about business value; I had three specific scenarios:

    • enabling NEW capabilities,
    • accomplishing more with less effort -in particular designer/developer workflow-, and
    • reaching/touching end users in new ways that created new business opportunities (improved UX)

    So far, we are executing extremely well against two out of three: new capabilities, and improved UX.. I weekly talk to developers and designers that tell me "WPF really allows us to do things we could not do before because it was not cost effective"..    The ROI has not been measured yet, but based on feedback, I think we are in great track..  

    The third one is worth discussing a bit more: accomplishing more with less effort ..  

    I must digress to share MY expectations around this: the long term goal is to have interactive designers prototype functional/interactive applications with out writing code -- from what I hear from customers that were using Flash, Flex, Windows Forms, etc. this was already quite a goal. Most interactive designers are not afraid to code a tiny bit..    
    Graphics designers, on the other side should not be expected to code (now or later).. this is a topic I leave for a different day; be aware of the roles because  the game is changing; we need not use the term designer as broad as we did before.

    How far from that itneractive designer Nirvana are we?
    What I see is that with WPF you definitely accomplish more; the range of technologies to integrate is wider and enables many more possibilities.
    I also see that designers and developers are (imho) for the first time ever collaborating in the same files via XAML ...  This is definitely an improvement from how things were done before, but there is some thing preventing us TODAY from being just GREAT in this scenario: The tools are not done and the designers often have to get around small issues. Long term, this is not a concern at all; we should get from good to great soon in a matter of months ...

    Does this means you should not start today??  I don't think so, the business value is there.  I think there is just a few things that you should be aware of: how to use resources, when and how to use templates, styles,  etc..  and most importantly, be prepared to do a little cut & paste today on tasks that will be seamlessly implemented by the designer tools in a few months.. 

    What about developers?
    The run-time is solid; you don't have to worry too much about there being lame bugs that you have to chase for hours before confirming is a bug..
    you also do not need to worry about whether starting now will cause you to re-write later ( as we did going across CTPs in the past); the churn on the OM is pretty minimum now a days.

    I am sure you read some where that the developer tools are further behind. This is true, but there are other good news on that front: Expression is fairly easy to use for developers, concepts like projects, designers, properties windows, etc, is what we are in used to, so it is easy to use; it does lack the debugger, and rich editor from Visual Studio, but so far my work around is to open the same project in Expression and VS at the same time .. I debug on one, and design on the other .. Works pretty well for me ..  it even makes me be more conscious of separation between UI and business logic..

    Scorecard for the 3 goals.. Two we are definitely at 100%, the third one I would say we are at 60% with the potential to make it to 85 in a few months...  I say that is pretty good specially if you consider that the current 60% is probably better than the way we did dev/designer workflow in the past - where a designer handed  an image created in Visio, Photoshop, or any other similar bitmap tool...  and the developer had to reinterpret and recreate it all using the dev tools [leading to an endless cycle that compromised design and lead us to the 'good enough/out of time' apps ...

    Two Disclaimers on statements above:
    I speak based on my experiences in last few months with a dozen orso enterprise customers..  Your scenario might be different, but if you have concerns drop me a line. 

    Also, I did not dive into 3rd party tools like Mobiform's aurora and/or Electric Rain's Zam3d.. Adobe Illustrator plug-in, etc.  I will get to these a different time..

     [darn it I need a better editor for this ... will ask my fellow bloggers]

Page 1 of 1 (7 items)