Codelog

What does a xaml file gets compiled in to ? It gets compiled in to a baml (binary xaml). More @ wikipedia.

You can find the .baml file in the \obj\Debug folder.

Ever felt like having a transparent window background and still opaque controls inside the window? It can be easily done in wpf.

1. Set the window’s AllowsTransparency to True
2. Set the window’s Background to Transparent
3. Add a Rectangle to the parent panel of the window
4. Set the opacity of the rectangle to some value < 1 (0.7, …)
5. Add your controls to the parent panel
6. You are one step away form seeing a transparent background with opaque controls on top of it. Go ahead, run the application now

Sample window,

<Window x:Class=”BackgroundWindow.Transparent.Samples.WPF.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Window1″ Height=”300″ Width=”300″ AllowsTransparency=”True” Background=”Transparent” WindowStyle=”None”>
<Grid>
<Rectangle Fill=”Gray” Opacity=”0.7″ />
<Button Width=”100″ Height=”100″>Click this on</Button>
</Grid>
</Window>

WPF, out of the box doesn’t have provision for MDI windows. The reason is quite simple, MDI windows are outdated and most of the applications have been using tabbed documents, proving they are really easy to use. Although the framework is flexible enough for you to make such a feature, its better to move to tab based interface.

Every time I try adding a default animation (Slide, Fade, …) to a pop up in WPF, I find it not to be working. Today, I went thru’ MSDN (breaking my laziness ) and found that the popup animation shall work only if the AllowsTransparency of the popup is set to true. Really weird !!

Recently I had a trouble displaying some values in a custom painted ListViewControl. I had to display some numbers right aligned. But I mistook this alignment with direction of the string, leading me to write the code as,

theArgs.Graphics.DrawString("100",
FONT_ISOVALUE_VALUE, Brushes.Black,
new Point(theArgs.Bounds.X + LOCATION_X_OFFSET, theArgs.Bounds.Y + LOCATION_Y_OFFSET),
new StringFormat(StringFormatFlags.DirectionRightToLeft));

This was working properly for positive values, but for negative values, the - sign comes after the number. i.e., instead of -100, it was displayed as 100-, thats when I understood the difference between RightToLeft text and right aligned texts. So replacing the above snippet with the following snippet does the work.

StringFormat aStringFormat = new StringFormat();
aStringFormat.Alignment = StringAlignment.Far;
theArgs.Graphics.DrawString("-100",
FONT_ISOVALUE_VALUE, Brushes.Black,
new Point(theArgs.Bounds.X + LOCATION_X_OFFSET, theArgs.Bounds.Y + LOCATION_Y_OFFSET),
aStringFormat );

So alignment is different and direction of text is different. Use StringFormat.Alignment for alignment and StringFormatFlags for direction

In my previous post I had written about StackPanel. One big disadvantage with the StackPanel was with the wrapping part. It cannot wrap controls / contents when it overflows. Thats why we have the WrapPanel. This is StackPanel + Wrap enabled. The following example may help you understand this better.

Consider that you have a stack panel with 7 buttons arranged in a horizontal fashion and if your window’s width is smaller than the sum of seven button’s width, then this how it looks

<Window x:Class="LayoutsTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel Orientation="Horizontal">
        <Button Content="Button1" VerticalAlignment="Center" />
        <Button Content="Button2" VerticalAlignment="Center" />
        <Button  Content="Button3" VerticalAlignment="Center" />
        <Button  Content="Button4" VerticalAlignment="Center" />
        <Button  Content="Button5" VerticalAlignment="Center" />
        <Button  Content="Button6" VerticalAlignment="Center" />
        <Button  Content="Button7" VerticalAlignment="Center" />
    </StackPanel>
</Window>

A close substitute for this problem will be a WrapPanel.

<Window x:Class="LayoutsTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <WrapPanel Orientation="Horizontal">
        <Button Content="Button1" VerticalAlignment="Center" />
        <Button Content="Button2" VerticalAlignment="Center" />
        <Button  Content="Button3" VerticalAlignment="Center" />
        <Button  Content="Button4" VerticalAlignment="Center" />
        <Button  Content="Button5" VerticalAlignment="Center" />
        <Button  Content="Button6" VerticalAlignment="Center" />
        <Button  Content="Button7" VerticalAlignment="Center" />
    </WrapPanel>
</Window>

Although this solves the Wrap problem of the stack panel, still we cannot place two controls paralle to each other using this panel.

As the name says you can dock your controls in to either Top, Left, Right or Bottom of the panel. Placing a control to a location can be done using the Dock property with the values Left, Top, Right and Bottom.

ln1:    <DockPanel>
ln2:        <Button DockPanel.Dock="Top" Content="Button1" />
ln3:        <Button DockPanel.Dock="Bottom" Content="Button2" />
ln4:        <Button DockPanel.Dock="Left" Content="Button3" />
ln5:        <Button DockPanel.Dock="Right" Content="Button4" />
ln6:        <Button Content="Button5" />
ln7:    </DockPanel>

This will dock the button1 to the top of the container, button2 to the bottom and so on.

The order in which we dock the controls matters in here. If we move ln4 to ln3 and ln3 to ln4, the layout will look different.

If you dock a control to a location, the control will remain docked to that location irrespective to the size of the container. Take a look at the schreenshot shown below (with the container maximised).

Although this allows us to fix some controls to any edge of the container, we cannot position controls explicitly using this panel.

Like .Net 2.0, WPF provides a set of layouts that allows the users to easily place the controls in to it. Lets look in to it, one by one comparing with the net 2.0 version of it.

StackLayout

This was called as FlowLayout in .net 2. Controls that are added in to this layout will be automatically aligned either in a vertical or in a horizontal fashion. This alignment depends on the value of Orientaion property. The value can either be Vertical or Horizontal.

Vertical Orientation

    <StackPanel Orientation="Vertical">
        <Button Content="Button1" />
        <Button  Content="Button2" />
    </StackPanel>

Horizontal Orientation

    <StackPanel Orientation="Horizontal">
        <Button Content="Button1" />
        <Button  Content="Button2" />
    </StackPanel>

If you notice the screenshots, you will find that the width of the button is automatically controlled by the WPF framework. Thats why the buttons are stretched. But if you wanna control the width, you can play with the HorizontalAlignment property of the control. The default alignment is Stretched. Specifying a width for the control along with the HorizontalAlignment property allows you to have total control on the size and location of the control.

<StackPanel Orientation="Vertical">
  <Button Content="Button1" />
  <Button Content="Button2" HorizontalAlignment="Left" />
  <Button  Content="Button3" HorizontalAlignment="Right" />
  <Button  Content="Button4" HorizontalAlignment="Center" />
  <Button  Content="Button5" HorizontalAlignment="Stretch" />
</StackPanel>

We can see this layout in action in loads of places. For example, the search tool that comes with windows has employed this layout.

Although this layout lets the us relax on alignments, we cannot place two controls parallel to each other (this layout is not intented to do so. we have another layout for this, GridLayout). Also this layout cannot wrap controls when the controls overflow (again this layout is not intented to do so. we have another layout for this, WrapPanel).

Browsing about UI guideline, I got a superb link. Its a must read for UI designers. Also take up the quiz when you are done with the link.

Recently, I was trying to write UnitTest for a panel. The panel had a ComboBox and the target method (method that needs to be tested) was populating the ComboBox with some DataSource, which is a collection of string. In my unit test driver (written in NUnit with NMock), I tried to check the item’s collection. It was always returning me null despite me adding some items to it. Even the SelectedItem and SelectedIndex were all returning me null. When I had a look in to the WinForms dll using reflector, I came to know about itemscollection .

It seems that this member will not be populated unless the ComboBox is painted in a layout.

 

So next time, when you are writing a unit test for controls, make sure that you create testcases that are testable (unlike me). Thanks to my colleague who pointed out a SO link that clearly talks about this.