Big Visible Cruise WPF Enhancement

Having some fun with Ben Carey's Big Visible Cruise app. BVC is a WPF app that looks at CruiseControl (.NET, Ruby, and Java versions) and displays a radiator dashboard of the status of projects. As each project is building, the indicator will turn yellow then green if it suceeds or red if it fails. It's all very cool and I jumped all over this so we could have a visible display of our projects in the office.

Here's the default look that Ben provided:

I submitted a request to be able to control the layout and he reciprocated with a layout option (using skins in WPF). Here's the updated layout he provided:

I had a problem because with only a few (8 in my case) projects, the text was all goofy. The layout was all cool but I wanted something a little flashier and better to read, so some XAML magic later I came up with this:

Here's a single button with some funky reflection:

Okay, here's how you do it. You need to modify two files. First here's the stock LiveStatusBase.xaml file. This file is the base for displaying the bound output from the CruiseStatus for a single entry:

  <DataTemplate x:Key="SimpleStatusDataTemplate">
    <Border BorderBrush="Black" BorderThickness="1">
      <TextBlock TextAlignment="Center"
                 Padding="3"
                 Background="{Binding Path=CurrentBuildStatus, Converter={StaticResource BuildStatusToColorConverter}}"
                 Text="{Binding Path=Name, Converter={StaticResource BuildNameToHumanizedNameConverter}}" />
    </Border>
  </DataTemplate>

It's just a TextBlock bound to the data source displaying the name of the project and using the background color for the status of the build. Here's the modifications I made to make it a little more sexy:

    <DataTemplate x:Key="SimpleStatusDataTemplate">
    &lt;Grid Margin="3"&gt;
        &lt;Grid.BitmapEffect&gt;
            &lt;DropShadowBitmapEffect /&gt;
        &lt;/Grid.BitmapEffect&gt;
        &lt;Rectangle Opacity="1" RadiusX="9" RadiusY="9" Fill="{Binding Path=CurrentBuildStatus, Converter={StaticResource BuildStatusToColorConverter}}" StrokeThickness="0.35"&gt;
            &lt;Rectangle.Stroke&gt;
                &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                    &lt;GradientStop Color="White" Offset="0" /&gt;
                    &lt;GradientStop Color="#666666" Offset="1" /&gt;
                &lt;/LinearGradientBrush&gt;
            &lt;/Rectangle.Stroke&gt;
        &lt;/Rectangle&gt;
        &lt;Rectangle Margin="2,2,2,0"
          VerticalAlignment="Top"
          RadiusX="6"
          RadiusY="6"
          Stroke="Transparent"
          Height="15px"&gt;
            &lt;Rectangle.Fill&gt;
                &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                    &lt;GradientStop Color="#ccffffff" Offset="0" /&gt;
                    &lt;GradientStop Color="transparent" Offset="1" /&gt;
                &lt;/LinearGradientBrush&gt;
            &lt;/Rectangle.Fill&gt;
        &lt;/Rectangle&gt;
        &lt;Grid Margin="5"&gt;
            &lt;TextBlock TextWrapping="Wrap" TextAlignment="Center"
                       HorizontalAlignment="Center" VerticalAlignment="Center"
                       FontSize="32" FontWeight="Bold" Padding="10,10,10,10"
                       Foreground="Black" FontFamily="Segoe Script, Verdana"
                       Background="{Binding Path=CurrentBuildStatus, Converter={StaticResource BuildStatusToColorConverter}}"
                       Text="{Binding Path=Name, Converter={StaticResource BuildNameToHumanizedNameConverter}}"&gt;
            &lt;/TextBlock&gt;
        &lt;/Grid&gt;
    &lt;/Grid&gt;

&lt;/DataTemplate&gt;

I added a grid. The top rectangle is to define the entire area for each project (filling it in with the build status color) and the next one is the highlight (using a LinearGradientBrush) on the button. Then the TextBlock with the name of the project and it's build status gets filled in.

Now here's the stock BigVisibleCruiseWindow.xaml (the main window):

  <DockPanel>
&lt;Border DockPanel.Dock="Bottom"&gt;
  &lt;DockPanel LastChildFill="False"&gt;
    &lt;TextBlock DockPanel.Dock="Left"  Text="Big Visible Cruise" FontSize="16" FontWeight="Bold"  Padding="10,10,10,10"  Foreground="White" FontFamily="Segoe Script, Verdana" /&gt;
    &lt;Button DockPanel.Dock="Right" Content="Options..." FontSize="9" Margin="10" IsEnabled="False" /&gt;
  &lt;/DockPanel&gt;
&lt;/Border&gt;

&lt;Viewbox DockPanel.Dock="Top" Stretch="Fill"&gt;
  &lt;ItemsControl ItemsSource="{Binding}" Style="{DynamicResource LiveStatusStyle}" /&gt;
&lt;/Viewbox&gt;

</DockPanel>

The main window used a DockPanel and displayed some addition things (there's a button there for choosing options but it's non-functional). Here's my changes:

    <Grid>
        <ItemsControl ItemsSource="{Binding}" Style="{DynamicResource LiveStatusStyle}" />
    </Grid>

I just simply replaced the DockPanel with a Grid.

That's it! Feel free to experiment with different looks and feels and maybe submit them to Ben as he could include them in maybe a set of skins to use.

Note: You need to download the code from the repository as the 0.5 release Ben put out doesn't include the skins.