Fancying up my code...

So, one of the reasons that I did eventually want to get a real WPF project up and running was also to make "prettier" looking UI's with less effort. Many of the websites and tutorials give shallow examples that scream to how easy it is. So today I thought I would jazz up one of my DevTracker elements as a test. One of the few screens I had up and running was a viewer to see the list of my active projects, any many of the sites show some cool things you can do. Originally it had no data template and so it simply displayed the name of the class that was in the list... obviously that was useless. The code looked like this:
        <ListView 
            Name="ProjectListView" 
            ItemsSource="{Binding Path=ProjectList}"
        />
This created a ListView object which was bound to a member in my view model class called ProjectList which contained... you guessed it! A list of Projects in the database. Though as I said above, with just this, all it does is display the results of calling ToString() on the object which returns the name of the class, so every entry would look the same :)

So the second step was to get it to the point I had already done in a number of other WPF examples I had done which is to make every element in the list show a meaningful value from the object itself. So it evolved to the following:
        <ListView 
            Name="ProjectListView" 
            ItemsSource="{Binding Path=ProjectList}"
        >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Title}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
So, now we have added a template for the objects inside the list view. So with this code, everything displayed as a TextBlock object with the text bound to the Title property of each element in the list. Better. But boring. This, however is as far as I had ever taken one of these. Most of the examples on the web have templates with multiple elements of multiple types and usually incorporate graphics. So I decided tonight was a good night to dabble and I changed it to this:
        <ListView 
            Name="ProjectListView" 
            ItemsSource="{Binding Path=ProjectList}"
            Height="150"
            Background="LightGray"
        >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Image VerticalAlignment="Center" Grid.Column="0" Source="Resources/Folder.bmp"/>
                        <StackPanel HorizontalAlignment="Stretch" Background="BurlyWood" Orientation="Horizontal" VerticalAlignment="Center" Height="25" Grid.Column="1" Margin="15,5,15,5" >
                            <TextBlock Text="{Binding Path=Title}"/>
                            <TextBlock Margin="5,0,0,0"> (</TextBlock>
                            <TextBlock Text="{Binding Path=CodeName}"/>
                            <TextBlock Margin="0,0,5,0">) - </TextBlock>
                            <TextBlock Text="{Binding Path=Description}"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
So, now the template contains a grid. Using the grid because I discovered that I cannot have multiple child nodes in the DataTemplate tag... I could have used other objects that support children like Grids, StackPanels, etc... Then I created a cheesy bitmap of a folder and shoved it in. If I keep this layout I may bind the image to a variable so that it can be changed (perhaps a unique logo for each project). And then I have a Stack panel which displays more information than the original one did.

I didn't spend a lot of time trying to acquire any nice looking colour schemes as I will revisit this later, but the outcome is a lot nicer than the plain unformatted version... and yes my folder icon is that thing that looks like a big cartoon boot :)

And the conclusion... it is easier to work with than this would have been in Windows Forms or Java, especially with all of the combinations inside that original ListView, though honestly, most of this simply wasn't available before WPF and can be accomplished in code as opposed to in XAML.

I still have some beef behind all of the hype with XAML. As an example, one site I was looking at samples on, did roughly the same thing and then at the proclaimed that they had accomplished all of this without "writing a single line of code". That sort of mentality is bogus... firstly XML/XAML in my opinion is still code, and XAML does an even poorer job of hiding the code; ListView.DataTemplate? The way we accessed the DataTemplate property seems an awful lot like C# rammed into an XML tag to me. And we are simply using attributes in the XML tag instead of setting the properties in the code behind. To instantiate those objects takes roughly the same code and almost the exact same syntax as it could be done in C#... to illustrate my point, that first list view in XAML was roughly:
<ListView Name="ProjectListView" ItemsSource={Binding Path=ProjectList}/>
or I could do this in C# as:
var ProjectListView = new ListView(){ ItemsSource=ProjectList};

I'm sorry, but at the end of the day... if you aren't a developer, both of those are going to look cryptic, and if you are a developer, both of those are going to look like code. And very similar code at that (and amusingly in this example, the C# "code" is fewer keystrokes than the XML "non-code"). As a fair statement, I chose a VERY simple example and more time and code savings exist with more advanced applications... just attempting to illustrate that the XML portion of the XAML is still very much code.

But I digress, I can't really complain, it WAS less code for that whole big example than it would have been had I done it in C# directly and it did work awfully well. When I get this to the point where I actually want to sit down and start making this look pretty, I think it will turn out very well and with very minimal effort.