Additional Border

GoXam
1

Hi,
I want a Userdefined Border (Visible, Color and width) around each Node.
How to do it?
Make a Border in each NodeTemplate, something with Adorner…

Any Idea or Example?

2

Sure, you could use a Border in your DataTemplate and data bind the properties that you want to control. Or you could use something else – it depends on what the purpose and usages will be.

3

Oh, I thought you could post me an example with an user defined Adorner - if there is one?

4

There are examples of Adorners throughout the web. How you define your node templates is completely up to you – you can use pretty much whatever you want that WPF or Silverlight supports.

5

Ok, I that’s all clear.
I thought there is an GoWpf-Way of Adorners too - since you have an extra Layer and so on.
Than I do it the “normal” way.

6

Well, GoXam does have Adornments, its own mechanisms for adding independent Parts to a Part. There are some examples of custom selection Adornments – search for “SelectionAdornmentTemplate”.

7

Hi Walter,
I have modified my Template with an additional Border.

    <DataTemplate x:Key="Time">
        <go:SpotPanel Style="{StaticResource SpotPanelStyle}"
                      go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" ToolTip="{Binding Path=Data.ItemHint}">
            <Border BorderBrush="{Binding Path=Data.BorderBrush}" BorderThickness="{Binding Path=Data.BorderThickness}">
                <go:NodePanel Sizing="Fixed" go:SpotPanel.Main="true">
                    <go:NodeShape go:NodePanel.Figure="BpmnEventTimer"
                                  Stroke="{Binding Path=Data.Highlight, Converter={StaticResource StrokeColorConverter}}"
                                  StrokeThickness="{Binding Path=Data.Highlight, Converter={StaticResource StrokeThicknessConverter}}"
                                  Fill="Aqua"
                                  Height="64" Width="64"
                                  Opacity="{Binding Path=Data.Opacity}" />
                    <TextBlock Style="{StaticResource TextBlockStyle}"
                               Text="{Binding Path=Data.Text, Mode=TwoWay}" Margin="0,16,0,0" />
                    <!--<TextBlock Style="{StaticResource TextBlockStyle}" FontSize="8" Margin="0,36,0,0"
                           Text="{Binding Path=Data.DurationText}" />-->
                </go:NodePanel>
            </Border>
        </go:SpotPanel>
    </DataTemplate>

But if I set the BorderBrush and BorderThickness (with RaisePropertyChanged of course) the Node doesn’t update. If I move it a bit then it’s showing the Border. Diagram.UpdateLayout doesn’t help.

What can I do?

8

Do you make all of your data changes within a transaction?

9

Hi Walter,
since my hole program is based on the FlowGrammer-Demo I have no Idea how to use a Transaction.

10

Hi Walter,
I have tried:

    public void SetBorderOnItem(string idItem, Brush brush)
    {
        ToolNodeData toolNodeData = FindItem(idItem);
        if (toolNodeData != null)
        {
            SequenceDiagram.StartTransaction("Show Border");
            toolNodeData.BorderBrush = brush;
            SolidColorBrush solidColorBrush = brush as SolidColorBrush;
            if (solidColorBrush != null && solidColorBrush.Color.Equals(Colors.Transparent))
            {
                toolNodeData.BorderThickness = new Thickness(0);
            }
            else
            {
                toolNodeData.BorderThickness = new Thickness(5);
            }
            SequenceDiagram.CommitTransaction("Show Border");
        }
    }

But it doesn’t work.

11

That code, by itself, looks fine. Although I think if it isn’t important to have the BorderThickness property in your model data, it would be more natural to have the Border.BorderThickness data bound to itself with a converter, not to the data.

I’m curious about the design of your node template. Why have a SpotPanel? Why does it have only one element? Maybe you should remove the SpotPanel and move any Part/Node attached properties down to the Border.

12

I used the SpotPanel because it is the Base of all Items in the Flowgrammer-Demo.
Can you tell me where I can find documentation which Panel type I use in which situation?

13

SpotPanel is useful for positioning elements relative to the bounds of the main element, according to the given Spot; NodePanel is useful for positioning/resizing the main element around the other elements of the panel.

The GoXamIntro talks about typical usages for the GoXam panel classes; the WPF documentation talks about the standard panel classes, most of which are useful in Nodes and Links too. The GoXam API documentation of course gives some more details.

The Flowgrammer sample uses the SpotPanel to position the port elements relative to the NodePanel holding both a Shape and a TextBlock.

14

Thank you.