I often look back at the old days of programming. A computer couldn’t do much so not much was expected. But things have changed. I now spend more and more time trying to build a decent looking user interface. I read a few weeks ago, and I wish I could find the quote, something along the lines of A designer shoots bullets, a developer throws them. I am not a designer, so I am throwing bullets at the screen rather than shooting them, and I am sure that they are having the same effect as throwing them – not much.
Nevertheless, you need a UI of some sorts, so I built one. Here is a screen shot of where it is at now.
There are a few things to say about this ribbon bar. Microsoft has produced a Ribbon Bar but the licensing is far too restrictive to be of much use. In any case, they don’t have one for WPF. So you have to build your own. This obviously needs more styling before it is completed, but we will look at some of the details of the ribbon as it stands at the moment.
First, it is a separate control. You could build it all on the main form, but I think it is better to separate your controls into separate classes – it is standard OO good practice. At the moment I am trying out Expression Blend 2.5 June 2008 Preview. I have had a few issues with it, it sometimes hangs or crashes Visual Studio. But I am running the Beta of Visual Studio 2008 SP1, and I think the release version of SP1 might fix this. This was released in the last few days.
Expression Blend is primarily a designer’s tool. And I find it easier to do some of the work in Blend and some in Visual Studio. Having two large monitors really helps if you are using these two together.
When you create a new user control Blend defaults to using a grid as the layout container. In this case I could have used a different container, but it doesn’t really matter, at least I don’t think it does. I left it as a grid. Within the grid I have a Tab Control, and I will add some styling to the tab headers when I get to the stage of trying to make it pretty. At the moment the only tab with any content is the Songs tab because this is where all the editing will go.
Within this tab control I have a Stackpanel aligned horizontally, These contain File, Edit, Font and Arrange sections. Each of thse sections contains a grid. The first two, File and Edit, have four columns and three rows. The bottom row contains a border which contains a TextBlock which spans all the columns and is horizontally aligned to the centre. The border is set with a colour, a thickness and a radius for the rounded corners.
In the top row, in each column, is a button. The button contains an image. And below the button is a Textblock with the text of the control, eg New, Open etc. The button and the textblock are also contained within a border which spans all four columns and two rows, and has a border colour and thickness, and rounded corners.
The nice thing about WPF is that any control, well most controls, can contain almost any content you want. In winforms a button had a text property. If you wanted a button with an image you needed to create your own button by subclassing the button class, or building some button like properties and events into an image. WPF is different. Controls have a property called Content and you can put almost anything into it. For example, you could have the content of a button be another button. I don’t know why you would do that, but you could. You are also able to edit the individual components of the button to style it in all manner of ways. There is a lot information about WPF styling on the web.
The font section contains some interesting features. The first combo box is a list of fontstyles. This is the xaml to set the fontstyle combo.
<ComboBox IsSynchronizedWithCurrentItem="True"
ItemsSource="{x:Static Fonts.SystemFontFamilies}"
x:Name="cmbFont" HorizontalAlignment="Stretch"
VerticalAlignment="Center" Margin="10,0,5,0"
BorderBrush="{x:Null}" Style="{DynamicResource ComboBoxStyle1}"
Width="Auto" FontSize="14">
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontFamily="{Binding}"
FontSize="14"
Height="20" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
There are a few things to notice here. The Items source binds the combo box to the System Fonts. Then the Itemspanel declares a template, ItemsPanelTemplate which contains a Virtualizing StackPanel. This means that items are arranged in a stack. You can leave this out and it will include it by default, but not until after it has retrieved all the data. By specifically declaring the Virtualizing Stack Panel the list loads faster. Although I seem to remember a warning about this. I need to look further into it. The interesting thing is the TextBlock. The ItemTemplate says that the items in the combo box will be rendered using a Textblock. The text of the text block is bound to its parents datasource, hence Text=”{Binding}” And the font used in the Textblock is bound to the font family of the datasource. So each item in the combo box is rendered in the specific font.
Combo boxes and List boxes are much more versatile in WPF than winforms.
A similar thing happens with the font colours. There is a button whose event handler is wired to a popup control. When the button is clicked the popup appears. The popup contains a listbox. A separate class contains a dictionary of colours. Specifically I have declared a Dictionary<string, Brush>/. Brush is used in WPF to declare the colours which will be used to render items, paint backgrounds, borders etc. So the string is the colour name, and the brush is, for example Brushes.Black. When the listbox is populated a new ListBoxItem is created for each item in the dictionary. The Item is the string and the colour of the item is the Brush colour.
The next thing to do is to wire up some events. More on that next time.