WPF - Text clips on some Vista machines
I love mysteries. So when a project team approached me the other day with an issue with their WPF application, I immediately jumped into it. The issue they were facing was really mysterious. Their WPF application was working and looking fine on all their Vista machines, but when shared with Client, it started to have problems. Text in some controls was clipping.
After trying on multiple machines locally, they found 1 Vista machine where the problem was reproduced. The mystery was that all these machines were using same resolution (1024x768), same dpi (96) and same theme, but text would clip on that 1 machine and work fine on all others. They were about to write this off claiming some issue with Vista.
Vista may have its share of issues which has caused many people to write about the same, but when programming, I take a different route. I always suspect my own code till proven otherwise. I asked the team to share snapshots of the application from the two machines showing me where the issue was happening and on careful examination of them, I figured out that the font on the machine on which the issue was visible was wider than the one on which things were working fine.
Most controls of the application were looking fine on both machines and it was an issue with only few of them. This pointed towards possible issue in XAML and how the fonts were assigned. In WPF, the controls inherit font from parent container and hence if you don’t set the font, it will use the Vista’s default Segoe UI font. I asked for XAML of on the screens where the issue was being seen and a search in the file revealed that for some controls where they had set the font to be bold and larger in size, the font family property was also set and this was set to Segoe.
Now if you have seen both Segoe and Segoe UI, you will realize that Segoe is narrower of the two, as is also seen in the picture below. The lower controls in the pair are using Segoe font, while the upper ones are using Segoe UI.
With this information, when we relooked at the culprit machine, we realized that it didn’t had the Segoe font and hence the control’s were falling back on Segoe UI and this caused the text to take more space and thus was clipping. If, in code, the FontFamily property had not been set, things would have worked properly in all machines and the team would have already ensured right sizing of the controls.
Interesting, when working with Expression Blend, not all controls display this difference clearly at design time (works fine in VS design time). The application window seen on the right side in above figure is what is seen in Blend (2.5 June CTP) and you can clearly see that the TextBlock (top pair of controls) both appear to be exactly the same, though at run time (left application window) you can see the difference clearly.