Squarified Treemaps in XAML & C# using Microsoft Longhorn

<!-- When the root is a Window, it will act like a DockPanel in the way it arranges the child Elements of the root. -->
<NavigationWindow  
    xmlns="http://schemas.microsoft.com/2003/xaml"
    xmlns:def="Definition"
    def:Class="XAMLTreemaps.Window1"
    def:CodeBehind="Window1.xaml.cs" 
    Text="XAMLTreemaps" Visible="True"
    Activated="OnActivated" Deactivated="OnDeactivated"
    Loaded="OnWindowLoaded" SizeChanged="OnWindowSizeChanged"
    >
    <!--  The namespace + class name in the codebehind file and the def:Class attribute in the root of this document, must stay identical.  You can change them, but you must keep them in sync. -->
    
    <NavigationWindow.Resources>
        <Style def:Name="BackButton">
            <Button/>
            <Style.VisualTree>
                <Image def:StyleID="img" />
            </Style.VisualTree>
<!-- Note: this is currently using Images, in the future it should be done using vector shapes, not images -->
            <Style.VisualTriggers>
                <PropertyTrigger Property="IsEnabled" Value="false">
                    <Set PropertyPath="Image.Source" Value="Images/travelbackdisabled.png" Target="img" />
                </PropertyTrigger>
                
                <PropertyTrigger Property="IsEnabled" Value="true">
                    <Set PropertyPath="Image.Source" Value="Images/travelbacknormal.png" Target="img" />
                </PropertyTrigger>

                <PropertyTrigger Property="IsMouseOver" Value="true">
                    <Set PropertyPath="Image.Source" Value="Images/travelbackhot.png" Target="img" />
                </PropertyTrigger>
                
                <PropertyTrigger Property="Pressed" Value="true">
                    <Set PropertyPath="Image.Source" Value="Images/travelbackpressed.png" Target="img" />
                </PropertyTrigger>
            </Style.VisualTriggers>
        </Style>
        
        <Style def:Name="ForwardButton">
            <Button/>
            <Style.VisualTree>
                <Image def:StyleID="img" />
            </Style.VisualTree>

            <Style.VisualTriggers>
                <PropertyTrigger Property="IsEnabled" Value="false">
                    <Set PropertyPath="Image.Source" Value="Images/travelfwddisabled.png" Target="img" />
                </PropertyTrigger>
                
                <PropertyTrigger Property="IsEnabled" Value="true">
                    <Set PropertyPath="Image.Source" Value="Images/travelfwdnormal.png" Target="img" />
                </PropertyTrigger>

                <PropertyTrigger Property="IsMouseOver" Value="true">
                    <Set PropertyPath="Image.Source" Value="Images/travelfwdhot.png" Target="img" />
                </PropertyTrigger>
                
                <PropertyTrigger Property="Pressed" Value="true">
                    <Set PropertyPath="Image.Source" Value="Images/travelfwdpressed.png" Target="img" />
                </PropertyTrigger>
            </Style.VisualTriggers>
        </Style>
        <!-- Gradient used in NavBar Background when window is active -->
        <LinearGradientBrush def:Name="ActiveGradient">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="#FF4E4E4E"/>
                <GradientStop Offset="0.1" Color="#FF646464"/>
                <GradientStop Offset="0.2" Color="#FF767676"/>
                <GradientStop Offset="0.3" Color="#FF8E8E8E"/>
                <GradientStop Offset="0.4" Color="#FF9E9E9E"/>
                <GradientStop Offset="0.5" Color="#FFA5A5A5"/>
                <GradientStop Offset="0.6" Color="#FF9E9E9E"/>
                <GradientStop Offset="0.7" Color="#FF8E8E8E"/>
                <GradientStop Offset="0.8" Color="#FF767676"/>
                <GradientStop Offset="0.9" Color="#FF646464"/>
                <GradientStop Offset="1.0" Color="#FF4E4E4E"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        
        <!-- Gradient used in NavBar Background when window is inactive -->
        <LinearGradientBrush def:Name="InactiveGradient">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="#FF9CA1A2"/>
                <GradientStop Offset="0.1" Color="#FFA9ADAE"/>
                <GradientStop Offset="0.2" Color="#FFB3B8B9"/>
                <GradientStop Offset="0.3" Color="#FFBFC2C3"/>
                <GradientStop Offset="0.4" Color="#FFC7CACB"/>
                <GradientStop Offset="0.5" Color="#FFCBCECF"/>
                <GradientStop Offset="0.6" Color="#FFC7CACB"/>
                <GradientStop Offset="0.7" Color="#FFBFC2C3"/>
                <GradientStop Offset="0.8" Color="#FFB3B8B9"/>
                <GradientStop Offset="0.9" Color="#FFA9ADAE"/>
                <GradientStop Offset="1.0" Color="#FF9CA1A2"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

    </NavigationWindow.Resources>
    <!-- Workaround - shouldn't need hardcoded height. -->
    <Canvas ID="navBar" DockPanel.Dock="Top" Width="100%" Height="54px" >
        <Button Canvas.Left="0" ID="backButton" IsEnabled="False" Click="OnBackClicked" Style="{BackButton}"></Button>
        <Button Canvas.Left="38" ID="forwardButton" IsEnabled="False" Click="OnForwardClicked" Style="{ForwardButton}"></Button>
        
        <Text FontFamily="Arial" FontSize="26" FontWeight="Bold" 
              Canvas.Left="80" Canvas.Top="0" Foreground="white">Squarified Treemaps</Text>
        <Text FontFamily="Arial" FontSize="14" FontWeight="Bold" 
              Canvas.Left="140" Canvas.Top="28" Foreground="white">in XAML using Microsoft Longhorn</Text>

    </Canvas>
    <WindowNavigationContainer ID="wNavContainer" SourceUri="Pane1.xaml" Navigated="OnNavigated" >
    
    </WindowNavigationContainer>
</NavigationWindow>