Resize custom datemplate

GoXam
1

Hello. Again.

I’m working with a custom datatemplate. Actually it draw linkks between nodes perfectly but i need do resizable, but i don’t know how do it.

The datatemplate is:

        <Canvas Margin="0,0,0,0" HorizontalAlignment="Left" Height="65" VerticalAlignment="Top" Width="67"
                go:Part.SelectionElementName="Shape"
                go:Part.SelectionAdorned="True"
                go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
                go:Node.Rotatable="True"                    
                go:Part.Resizable="True"                     
                go:Node.LocationSpot="0.5 0.35">
            
                <Path Data="M30.499998,0.5 L456.5,0.5 C473.06854,0.50000167 486.5,4.9771538 486.5,10.5 L486.5,21.499998 L13.499997,21.499998 C9.3578625,21.500002 5.4117947,21.779823 1.8226429,22.285851 L0.5,22.498236 L0.5,10.5 C0.49999821,4.9771538 13.931456,0.50000167 30.499998,0.5 z" Stretch="Fill" Grid.ColumnSpan="3" UseLayoutRounding="False" Grid.RowSpan="3" Height="10" Width="64">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="1.003,0.717" StartPoint="-0.005,0.692">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="#FF282828" Offset="1"/>
                            <GradientStop Color="#FF5A5A5A" Offset="0.175"/>
                            <GradientStop Color="#FFD0D0D0" Offset="0.333"/>
                            <GradientStop Color="#FFFAFAFA" Offset="0.46"/>
                            <GradientStop Color="#FFD0D0D0" Offset="0.581"/>
                            <GradientStop Color="#FFA6A6A6" Offset="0.825"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>


                <Path Data="M30.499998,0.5 L456.5,0.5 C473.06854,0.50000167 486.5,4.9771538 486.5,10.5 L486.5,21.499998 L13.499997,21.499998 C9.3578625,21.500002 5.4117947,21.779823 1.8226429,22.285851 L0.5,22.498236 L0.5,10.5 C0.49999821,4.9771538 13.931456,0.50000167 30.499998,0.5 z" Stretch="Fill" Grid.ColumnSpan="3" UseLayoutRounding="False" Grid.RowSpan="3" Height="10" Canvas.Top="52.483" Width="64" Canvas.Left="0.009" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="-179.811"/>
                    </Path.RenderTransform>
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="1.003,0.717" StartPoint="-0.005,0.692">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="#FF282828" Offset="1"/>
                            <GradientStop Color="#FF5A5A5A" Offset="0.175"/>
                            <GradientStop Color="#FFD0D0D0" Offset="0.333"/>
                            <GradientStop Color="#FFFAFAFA" Offset="0.46"/>
                            <GradientStop Color="#FFD0D0D0" Offset="0.581"/>
                            <GradientStop Color="#FFA6A6A6" Offset="0.825"/>
                        </LinearGradientBrush>

                    </Path.Fill>
                </Path>


                <Rectangle Height="44" Stroke="Black" Canvas.Top="9" Width="64"
                      go:Node.PortId="" Cursor="Hand"
                      go:Node.ToSpot="0 0.35" go:Node.FromSpot="1 0.35"
                      go:Node.LinkableFrom="True" go:Node.LinkableTo="True"
                 >

                    <Rectangle.Fill>
                        <LinearGradientBrush EndPoint="1.362,0.246" MappingMode="RelativeToBoundingBox" StartPoint="-0.216,0.268">
                            <GradientStop Color="Black" Offset="0.927" />
                            <GradientStop Color="#FF0A0A0A" Offset="0.069" />
                            <GradientStop Color="#FFEFEFEF" Offset="0.22"/>
                            <GradientStop Color="White" Offset="0.681"/>
                            <GradientStop Color="White" Offset="0.44"/>
                        </LinearGradientBrush>

                    </Rectangle.Fill>
                </Rectangle>

                <Rectangle Height="{Binding filledHeight,Converter={StaticResource rtcFilledConverter}}" Stroke="Black" Canvas.Top="{Binding filledHeight,Converter={StaticResource rtcTopConverter}}"

<span =“Apple-tab-span” style=“white-space:pre”> Width=“64”<span =“Apple-tab-span” style=“white-space:pre”> RenderTransformOrigin=“0.5,0.5”>
<Rectangle.RenderTransform>

</Rectangle.RenderTransform>
<Rectangle.Fill>





                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Height="14" Canvas.Left="7" TextWrapping="Wrap" Text="{Binding filledHeight, Converter={StaticResource rtcPercentajeConverter}}" Canvas.Top="23" Width="50" FontSize="13.333" TextAlignment="Center" />
            
        </Canvas>               
    </DataTemplate>

I’m reading the online examples, but in all are basic predefinited shapes, so i was read the “piping” example, but the custom shape does not resize.
How can i do this?

Thank you in advance.

2

Set the go:Part.ResizeElementName on the root element to refer to the FrameworkElement that you want the user to resize.

3

Thankyou Walter. I wanna resize the canvas totaly.

I will probe this now.

Thank you very much.

4

I was probed, i’m doing something wrong…

I need resize all canvas, all rectangles… all datatemplate is a node, and so, i need resize all elements. But if i resize the canvas, only resize the canvas, no the deep elements.

Need encapsulate down go:NodePanel> go:NodeShape ??

Thanks in advance

5

You need to define your Node DataTemplate so that happens naturally.
In this case you cannot use a Canvas element for doing Panel layout.

I suggest you learn more about WPF (or is it Silverlight) panels.
You should be able to get the right behavior in the Visual Studio or Blend designer window without involving GoXam.