WPF - how to determine why this XAML style code is not working?

Question

Any advice how to fault find to work out why the Grid.Resources styles in this XAML is not making any difference it seems to the end result?

Note I'm using Charting from the WPFToolkit so to adjust how a chart looks it seems one has to apply the style areas (suggested by someone on the forum).

So my question is generically, noting I'm trying to adjust the look of a 3rd party graph, how can I debug/fault-find to understand what's going wrong? Is there a debugging trick? For example when I increased the BorderThickness to 30 I couldn't see a difference. What I'm really after is the equivalent of FireBug for HTML/CSS, which lets you understand/view what CSS is being applied to what elements.

EDIT: So I really (I think) want to be able to walk the object tree of the graph, and referring back to the template changes put in the Grid.Resources area, see why they didn't occur.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" mc:Ignorable="d" x:Name="Splash" x:Class="MyInternetUsage.SplashWindow"
        Title="SplashWindow" Height="421" Width="570">
    <DockPanel>
        <StackPanel VerticalAlignment="Top" DockPanel.Dock="Top" Orientation="Horizontal">
            <Button Content="Configure" HorizontalAlignment="Left" Margin="0" Width="78" VerticalAlignment="Center" Name="ConfigureButton" Click="ConfigureButton_Click" />
            <Button Content="Start" Name="StartButton" Width="78" Click="StartButton_Click" />
            <Button Content="Stop" Name="StopButton" Width="78" Click="StopButton_Click" />
        </StackPanel>

        <Grid>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Label Content="Summary" Grid.Column="0"/>

            <GridSplitter HorizontalAlignment="Right" 
                VerticalAlignment="Stretch" Grid.Column="1" ResizeBehavior="PreviousAndNext"
                Width="5" Background="#FFBCBCBC"/>

                <Grid Grid.Column="2">
                <Grid.Resources>
                    <Style x:Key="GooglePolylineStyle" TargetType="Polyline">
                        <Setter Property="StrokeThickness" Value="30"/>
                    </Style>

                    <Style x:Key="GoogleLineDataPointStyle" TargetType="chartingToolkit:LineDataPoint">
                        <Setter Property="Background" Value="#0077CC" />
                        <Setter Property="BorderBrush" Value="White"/>
                        <Setter Property="BorderThickness" Value="30"/>
                        <Setter Property="IsTabStop" Value="False"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                                    <Grid x:Name="Root" Opacity="1">
                                        <ToolTipService.ToolTip>
                                            <StackPanel Margin="2,2,2,2">
                                                <ContentControl Content="{TemplateBinding IndependentValue}" 
                                            ContentStringFormat="{}{0:MMMM d, yyyy}"/>
                                                <ContentControl Content="{TemplateBinding DependentValue}" 
                                            ContentStringFormat="Visits {0:###,###,###}"/>
                                            </StackPanel>
                                        </ToolTipService.ToolTip>
                                        <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" 
                                         Stroke="{TemplateBinding BorderBrush}" 
                                         Fill="{TemplateBinding Background}"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

                </Grid.Resources>
                <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Label Content="Real Time Graph" VerticalAlignment="Top" Grid.Row="0" />
                    <chartingToolkit:Chart Grid.Row="1" 
                                           Name="RTGraph" 
                                           BorderThickness="0" >

                    </chartingToolkit:Chart>
                </Grid>

        </Grid>



    </DockPanel>
</Window>

Answer 1

See output window in VS. All binding errors logged in this window. Also, tool Snoop alow to see bindings with errors.

Answer 2

If this is a WPF application, i would like to suggest one silly thing. Excuse me for that. Please copy and paste the same code into a silverlight application and then inspect the element using Firebug.

Also, in your code snippet, i think you need to give :

TargetType="{x:Type Polyline}"

TargetType="{x:Type chartingToolkit:LineDataPoint}"

If you want these styles to be applied on the target type automatically, then remove the x:Key.

Also, you can find a list of useful WPF utilities @ http://www.simple-talk.com/dotnet/.net-tools/essential-tools-for-the-wpf-novice/

Answer 3

As SeeSharp says, Snoop allows you to view the object tree at runtime (and change values and see results etc). However, I think your problem here might be that you're not explicitly applying the style on the <chartingToolkit:Chart /> object.

Try one of the following to see if it makes a difference:

Apply style on object:

<chartingToolkit:Chart
    ...
    Style="{DynamicResource GoogleLineDataPointStyle}"
    ...
    >

Or remove the key from the style so that it only has a TargetType attribute (should make it the default style for all objects of that type:

<Style TargetType="chartingToolkit:LineDataPoint">
    ...
</Style>

Answer 4

Since you've given the styles an x:Key. you need to explicitly set the style property of your items to use that style as a resource.

Have you tried removing the x:Key properties from your style, and moving your style declaration from the grid and into the chart?