Node with textbox, rotating doesn't position textbox properly

GoXam
1

Hello,

I have a node with an image and a textbox. Some images are not in a square shape but when I rotate the node the texbox should not rotate with the image of course. However as the height of the image changes on rotation, the texbox should move accordingly, which it doesn’t. The textbox simply stays fixed at its location and the image gets drawn at the same position.

Node without rotation:

Node with rotation:

In the latter case, the textbox should still be displayed below the image. This is my node template:

<DataTemplate x:Key="ComponentNodeTemplate">
    <StackPanel Style="{StaticResource StatusStackPanelStyle}"
            go:Part.SelectionElementName="VisualComponent"
            go:Part.Rotatable="True"
            go:Part.Visible="{Binding Path=Data.IsVisible}"
            go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
            go:Part.LayerName="{Binding Path=Data.Layer.Id}"
            go:Part.RotateAdornmentTemplate="{StaticResource RotationAdornmentTemplate}"
            go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
            go:Node.LocationSpot="Center">

        <go:SpotPanel Width="Auto"
                    HorizontalAlignment="Center"
                    go:Part.SelectionAdorned="False"
                    MouseLeftButtonDown="Node_MouseLeftButtonDown"
                    MouseEnter="Node_MouseEnterComponent"
                    MouseLeave="Node_MouseLeaveComponent"
                    Name="VisualComponent">
            <go:NodePanel Sizing="Auto"
                        go:Node.PortId="Component"
                        go:SpotPanel.Main="True">
                <StackPanel>
                    <Grid Width="{Binding Path=Data.IconSize.Width}"
                        Height="{Binding Path=Data.IconSize.Height}">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Image Source="{Binding Path=Data.Icon}"
                            Stretch="UniformToFill"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"></Image>
                    </Grid>
                </StackPanel>

            </go:NodePanel>
            <!-- here are some ports defined -->
            ...

        </go:SpotPanel>
        <TextBlock Text="{Binding Path=Data.ComponentName}"
                HorizontalAlignment="Center"
                FontSize="13"
                FontWeight="DemiBold"
                Style="{StaticResource StatusNodeTextStyle}"
                Visibility="{Binding Path=Data.ShowText, Converter={StaticResource BoolToVisibilityConverter}}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Analyzing the node I realized that despite rotating the image, the element’s height stays the same value and thus, of course, the text stays at the same position.

2

Yes, that’s because the RotatingTool is modifying the RenderTransform of the chosen element.

You could override RotatingTool.DoRotate to modify the LayoutTransform of the RotatingTool.AdornedElement.

3

Thanks, it worked

4

I’m sorry I have to get back to this. While the rotation works user initiated, when I load the project and apply the nodes source with the model, that contains an already rotated node, the rotation is only done via RenderTransform. I do add the rotating tool before I add the elements so I expected the rotation to use my LayoutTransform but it doesn’t. Now, what can I do about that?

5

Don’t bind the go:Part.RotationAngle property, but bind directly on your rotated element.

6

Do you have an example on how to do that?

7

No, but I assume it would be like the binding one does for any WPF element, outside of GoXam.

8

Alright, now I added a RotateTransform to my SpotPanel and bound the angle to my property and reduced the DoRotate in the RotatingTool to only setting the property and this works. Thank you.