Style is applied incorrectly

Dec 23, 2012 at 9:58 AM

 

Hi,

First of all, great project!

However, I have a problem with the styling of my graph. I have successfully added the graph to my test project, but the styling of the vertexes and edges is inconsistent.

The result is shown here: http://web-shift.nl/image/Result.png

The main window has the following code (Mainwindow.xaml)

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:GraphSharpControls="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:graphLayout="clr-namespace:CodeAnalyzer.MyFlowChart" 
        xmlns:zoom="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions"      
		WindowStartupLocation="CenterScreen" Width="1000" Height="600" Title="Code Analyzer"
        x:Class="MainWindow"
    >
    <DockPanel>
        <DockPanel.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Resources/Styles/GraphLayout.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </DockPanel.Resources>
        <DockPanel>
            <Grid Height="50" DockPanel.Dock="Top">
                <Button Content="OPEN" Width="50" Height="50" Click="btnOpen_Click" /> 
            </Grid>         
			<zoom:ZoomControl Background="Transparent">
				<graphLayout:FlowChartGraphLayout x:Name="FlowChart" />
			</zoom:ZoomControl>
        </DockPanel>
    </DockPanel>
</Window>

And the following style (GraphLayout.xaml):

<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:GraphSharpControls="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:graphLayout="clr-namespace:CodeAnalyzer.MyFlowChart" 
        xmlns:zoom="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions" 
>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary>
            <DataTemplate DataType="{x:Type graphLayout:FlowChartVertex}">
                <TextBlock Text="{Binding Path=Name}" />
            </DataTemplate>

            <SolidColorBrush x:Key="HighlightedVertexBorderBrush" Color="Transparent" />
            <SolidColorBrush x:Key="HighlightedVertexBackgroundBrush" Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" />
            <SolidColorBrush x:Key="HighlightedVertexForegroundBrush" Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}" />
            <SolidColorBrush x:Key="SemiHighlightedSourceVertexBorderBrush" Color="Transparent" />
            <SolidColorBrush x:Key="SemiHighlightedSourceVertexBackgroundBrush" Color="#FF1DBA00" />
            <SolidColorBrush x:Key="SemiHighlightedTargetVertexBorderBrush" Color="Transparent" />
            <SolidColorBrush x:Key="SemiHighlightedTargetVertexBackgroundBrush" Color="#FFD6A51C" />
            <SolidColorBrush x:Key="HighlightedEdgeBrush" Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" />
            <SolidColorBrush x:Key="SemiHighlightedInEdgeBrush" Color="#FF1DBA00" />
            <SolidColorBrush x:Key="SemiHighlightedOutEdgeBrush" Color="#FFD6A51C" />

            <!-- Vertex control-->
            <Style TargetType="{x:Type GraphSharpControls:VertexControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type GraphSharpControls:VertexControl}">
                            <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}" 
							            BorderThickness="{TemplateBinding BorderThickness}"
							            CornerRadius="10,10,10,10"
							            Padding="{TemplateBinding Padding}">
                                <Grid>
                                    <TextBlock Text="{Binding Path=Name}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="GraphSharpControls:GraphElementBehaviour.HighlightTrigger" Value="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"/>
                <Setter Property="Background" Value="#FFE3E3E3"/>
                <Setter Property="BorderThickness" Value="5,3,5,3"/>
                <Setter Property="Padding" Value="10,5,10,5"/>
                <Setter Property="BorderBrush" Value="#FF393939"/>
                <Style.Triggers>
                    <Trigger Property="GraphSharpControls:GraphElementBehaviour.IsHighlighted" Value="True">
                        <Setter Property="BorderBrush" Value="{StaticResource HighlightedVertexBorderBrush}"/>
                        <Setter Property="Background" Value="{StaticResource HighlightedVertexBackgroundBrush}"/>
                        <Setter Property="Foreground" Value="{StaticResource HighlightedVertexForegroundBrush}"/>
                    </Trigger>
                    <Trigger Property="GraphSharpControls:GraphElementBehaviour.IsSemiHighlighted" Value="True">
                        <Setter Property="BorderBrush" Value="{StaticResource HighlightedVertexBorderBrush}"/>
                        <Setter Property="Background" Value="{StaticResource HighlightedVertexBackgroundBrush}"/>
                        <Setter Property="Foreground" Value="{StaticResource HighlightedVertexForegroundBrush}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.IsSemiHighlighted" Value="True"/>
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.SemiHighlightInfo" Value="Source"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" Value="{StaticResource SemiHighlightedSourceVertexBorderBrush}"/>
                        <Setter Property="Background" Value="{StaticResource SemiHighlightedSourceVertexBackgroundBrush}"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.IsSemiHighlighted" Value="True"/>
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.SemiHighlightInfo" Value="Target"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" Value="{StaticResource SemiHighlightedTargetVertexBorderBrush}"/>
                        <Setter Property="Background" Value="{StaticResource SemiHighlightedTargetVertexBackgroundBrush}"/>
                    </MultiTrigger>
                </Style.Triggers>
            </Style>

            <!--Edge control -->
            <Style TargetType="{x:Type GraphSharpControls:EdgeControl}">

                <Setter Property="GraphSharpControls:GraphElementBehaviour.HighlightTrigger" Value="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" />
                <Setter Property="MinWidth" Value="1" />
                <Setter Property="MinHeight" Value="1" />
                <Setter Property="Background" Value="Red" />
                <Setter Property="Foreground" Value="Silver" />
                <Setter Property="Opacity" Value="0.5" />
                <Style.Triggers>
                    <Trigger Property="GraphSharpControls:GraphElementBehaviour.IsHighlighted" Value="True">
                        <Setter Property="Foreground" Value="{DynamicResource HighlightedEdgeBrush}" />
                    </Trigger>
                    <Trigger Property="GraphSharpControls:GraphElementBehaviour.IsSemiHighlighted" Value="True">
                        <Setter Property="Foreground" Value="{DynamicResource HighlightedEdgeBrush}" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.IsSemiHighlighted" Value="True" />
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.SemiHighlightInfo" Value="InEdge" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Foreground" Value="{DynamicResource SemiHighlightedInEdgeBrush}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.IsSemiHighlighted" Value="True" />
                            <Condition Property="GraphSharpControls:GraphElementBehaviour.SemiHighlightInfo" Value="OutEdge" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Foreground" Value="{DynamicResource SemiHighlightedOutEdgeBrush}" />
                    </MultiTrigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>


What I found disturbing is that one vertex is shown correctly in terms of the label (pTravel), but this one does not have the right styling.
The others have the right styling, but do not have the label (I check if the Name property was set, and this was the case)

Any idea's?