Wednesday, May 29, 2013

WPF: TemplateBinding with ControlTemplate

Today I'll try to write bit on TemplateBinding and how to use it inside a ControlTemplate. TemplateBinding is a type of binding used mainly for template scenarios. Here I am not going to write more on it's theoretical aspect as what is TemplateBinding, when to use, blah blah blah, as lot of content is readily available on net.  So, let's start quickly onto coding part:

First of all, let's create a new project using WPF template and place a button in it as below:
Now, what I am going to do is, I am going to replace this content template for this button. So, in order to do this, open up the Button tag and add Button.Template markup tag with a new ControlTemplate as:












Now as soon as you will add ControlTemplate tag, you will notice that the content of the button is gone and button is shown as a transparent rectangle. This is happened because here I told WPF to replace the default ControlTemplate with the one, which I defined. But at this point, our ControlTemplate is blank, so there is no visualization and we can see only a transparent rectangle.

Now go ahead and customize our ControlTemplate by putting Ellipse inside it as:








Now we can see that, we get a visualization for a button in form of ellipse. At this point of time, it works OK, but there are scenarios where this struct breaks down.

For example, Let's increase the height of button, from 35 to 105 as:








In above image, you will notice that button height is increased but the ellipse size is still the same, which is a bad UI design. And the reason this is happening is, inside a ControlTemplate, the height of an ellipse is hard coding. So, no matter, whatever height is set at parent (i.e. Button), it will not get inherited to child control (i.e. Ellipse).

So, now we have to fix this problem by using a special type of binding called TemplateBinding inside ControlTemplate. So, instead of hard coding the height, we will use TemplateBinding as shown below:









By setting the TargetType property of ControlTemplate, we are telling Ellipse that, any property of  Button can be set to ellipse. Now, whatever the height of button will be, it will automatically be the height of ellipse also. Isn't it interesting?

Moving forward, let's do something more interesting with Fill property of ellipse.














In above snippet, I am trying to set the Fill property of an ellipse using TemplateBinding. But now problem here is, a button doesn't have a Fill property. So, there is no one-to-one mapping for Fill property. Now, what to do ?

No need to worry that much because button does has a Background property as:









In above image, you might have notice that as soon as ellipse's Fill property is set to Background, ellipse becomes transparent as button's background. Now if we set button's Background property to Red, the same will be applied to ellipse too.












So, one can understand that how much magic we can do with TemplateBinding.
Now, let's work little bit on code cleanup.

ControlTemplate inside resource dictionary:
For better code readability, we will move out our ControlTemplate code and put it inside a resource dictionary as:











So, now we can see as earlier that whatever visual property for button is set, all get applied to ellipse also.

Hope this article was useful and gave you the basic idea on how to use TemplateBinding.


Sunday, May 26, 2013

ReLive TechEd

This weekend, I got a chance to attend an event 'ReLive TechEd' organised by very talented folks of B.Net and Microsoft community. This event goes for close to 5 hours and gives us the glance of latest Microsoft technologies. The most effective thing was that all the sessions were given by the professionals who actually presented in Microsoft TechEd 2013. This year I missed the TechEd, but I am very happy and thankful to B.Net team, who organized it back and that is also totally free of cost :) 

Friday, May 17, 2013

Windows Phone App Design Principles

Hope most of you might have heard DOUGLAS MARTIN's quote:
         "Questions about whether design is  necessary or affordable are quite beside the point: Design is inevitable. The alternative to good design is bad design, not no design at all."

And  VICTOR PAPANEK says: 
       "Design is the conscious effort to impose meaningful order"

So, if designing is that much important then one has to be very much stern about it. Going forward, today I am pointing out some design principles for Windows Phone App. So, let's gear up.

  • Clutter free UI - Information should be well organized and user should not get congestion like feel. Make best use of typography
  • Focus should be on content and it should be in a way that it attracts the user's attention from the beginning itself
  • Try to keep only the most pertinent content on the screen because when it comes to WP design, content matters more than a chrome
  • Try to provide seamless UX from dedicated device buttons
  • Tiles should be soulful and alive, in order to achieve the better responsiveness
  • Accentuate more on enhanced touch and gesture information
  • Try to keep the smart screen updated with only the latest and germane information
  • Use proper icon/text to introduce your app
  • Always create UI mockups, before proceeding towards actual implementation
  • Once mockups are ready, never hesitate to do usability testing
  • Provide app uniformity by providing similar meaning to similar images, color, symbols, etc
  • Do spend time in branding your app - it includes logo, color, copyright info, etc.
Hope above tips were useful :)

Wednesday, May 15, 2013

Windows Phone App' s Tip - Image consideration


Images play a very significant role in any Windows Phone application. So, one should be very careful while dealing with images. As of now, Windows Phone supports only two image formats named JPG/JPEG and PNG. Now before concluding on which image format to choose, let's get into bit more depth of it.

PNG format images are non-lossy and need very little CPU effort to display because those are pixel perfect. But at the same time, huge PNG images take too much longer to read from storage and ultimately lead to slower display.
On the other hand, JPEG format images are lossy, smaller to store  and based on the compression level much more complicated decoding algorithm is required to display them.

Another point regarding image is about opacity and transparency - All the images that use transparency should be stored as PNG format because JPEG doesn’t support transparency and JPEG format should be used for all the images that are fully opaque.

Now when coming to Windows Phone apps, performance matters a lot...Isn’t it?
Well, now some best tips to make our Windows Phone app much more performant:
  • Choosing proper image format: Use JPEG for anything large and PNG for anything small, i.e. use PNG for small icons. If image transparency is not a concern then it is always recommended to use JPEG.
  • Compiling images with Build Action=Content: Whenever a new image is added to the project, the default "Build Action" is set to Resource. It is always recommended to change this "Build Action" property to Content as it will reduce the size of our DLL, resulting in speedy image and app loading.

Note: Resources are included in an assembly whereas content is included in deployment package.
  • Image size: One of the limitations of Windows Phone is the limited screen resolution. So one has to consider proper image size, in order to gain better performance

 I'll keep updating this post as and when I'll get to know about more interesting facts. I would be very happy, if you can add more on to it.