Resizing Cutom Node Template w/ Multiple Paths

GoXam
1

I have a group of custom shapes for the nodes in my drawing, each consisting of multiple paths, and can’t figure out how to resize the shapes. Here is a sample data template:


<DataTemplate x:Key="shapeTemplate">
        <StackPanel go:Part.SelectionElementName="Shape" go:Part.SelectionAdorned="True" go:Part.ResizeElementName="Shape"
                            go:Node.LocationElementName="Shape" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">
            <go:NodePanel x:Name="Shape" Sizing="Auto" HorizontalAlignment="Center" VerticalAlignment="Center">
                <go:NodePanel.ToolTip>
                    <TextBlock Text="{Binding Path=Data.Text}" />
                </go:NodePanel.ToolTip>
                <Rectangle Fill="Transparent" />
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 11.521,2.520 L 2.701,11.340"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 3.420,12.061 L 0.180,13.860 L 1.800,10.440 L 3.420,12.061 Z M 0.180,13.860 L 1.800,10.440 L 0.180,13.860 Z"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 0.180,6.839 L 2.880,6.839"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 13.861,6.839 L 11.161,6.839"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 11.880,2.160 L 9.901,3.959"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 2.160,2.160 L 4.140,3.959"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 7.021,0.180 L 7.021,2.879"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 9.901,9.900 L 11.880,11.700"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 7.021,13.681 L 7.021,10.980"/>
                <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" Data="F1 M 7.021,10.800 L 8.460,10.620 L 9.541,9.900 L 10.441,8.820 L 10.981,7.560 L 10.981,6.120 L 10.441,4.860 L 9.541,3.780 L 8.460,3.060 L 7.021,2.879 L 5.580,3.060 L 4.500,3.780 L 3.600,4.860 L 3.060,6.120 L 3.060,7.560 L 3.600,8.820 L 4.500,9.900 L 5.580,10.620 L 7.021,10.800"/>
            </go:NodePanel>
        </StackPanel>
    </DataTemplate>

I’ve tried changing the options on the stretch attribute for each path, but those distort the images into a mess of lines… How can I resize these images properly?

Thanks
Ryan

2

You don’t want to use a NodePanel. A Grid does just fine. And there’s no need for a StackPanel, unless there were other elements that you elided for this question.

<DataTemplate x:Key="shapeTemplate"> <Grid go:Part.SelectionAdorned="True" go:Part.Resizable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"> <FrameworkElement.ToolTip> <TextBlock Text="{Binding Path=Data.Text}" /> </FrameworkElement.ToolTip> <Rectangle Fill="Transparent" /> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 11.521,2.520 L 2.701,11.340"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 3.420,12.061 L 0.180,13.860 L 1.800,10.440 L 3.420,12.061 Z M 0.180,13.860 L 1.800,10.440 L 0.180,13.860 Z"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 0.180,6.839 L 2.880,6.839"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 13.861,6.839 L 11.161,6.839"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 11.880,2.160 L 9.901,3.959"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 2.160,2.160 L 4.140,3.959"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 7.021,0.180 L 7.021,2.879"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 9.901,9.900 L 11.880,11.700"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 7.021,13.681 L 7.021,10.980"/> <Path Stretch="Fill" StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" Data="F1 M 7.021,10.800 L 8.460,10.620 L 9.541,9.900 L 10.441,8.820 L 10.981,7.560 L 10.981,6.120 L 10.441,4.860 L 9.541,3.780 L 8.460,3.060 L 7.021,2.879 L 5.580,3.060 L 4.500,3.780 L 3.600,4.860 L 3.060,6.120 L 3.060,7.560 L 3.600,8.820 L 4.500,9.900 L 5.580,10.620 L 7.021,10.800"/> </Grid> </DataTemplate>
Furthermore you could combine all of those separate Paths into a single Path.

3

Copying the XAML you posted seems to work for some but not all of the shapes I have. Here is one that isn’t coming out properly when the stretch attribute is switched to fill:


<DataTemplate x:Key="Compressor">
        <Grid go:Part.SelectionAdorned="True"
              go:Part.Resizable="True"
              go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">
            <FrameworkElement.ToolTip>
                <TextBlock Text="{Binding Path=Data.Text}" />
            </FrameworkElement.ToolTip>
            <Rectangle Fill="Transparent" />
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 171.458,63.938 L 148.217,63.938 L 148.217,85.736 L 171.458,85.736"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 1.453,174.371 L 313.866,174.371 L 313.866,156.932 L 1.453,156.932 L 1.453,174.371"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 140.953,122.063 L 140.953,27.611"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 140.953,100.265 L 148.217,100.265 L 148.217,49.409 L 140.953,49.409 L 140.953,100.265"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 123.514,124.965 L 123.514,156.932"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 140.953,27.611 L 1.453,1.453 L 1.453,148.213 L 140.953,122.063"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 18.892,145.312 L 18.892,156.932"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 296.428,156.932 L 296.428,1.453"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 191.813,156.932 L 191.813,1.453"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 171.458,88.637 L 177.276,88.637 L 177.276,59.578 L 171.458,59.578 L 171.458,88.637"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 177.276,85.736 L 191.813,85.736 L 191.813,63.938 L 177.276,63.938"/>
            <Path Stretch="None" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 296.428,1.453 L 191.813,1.453 L 191.813,104.625 L 296.428,104.625 L 296.428,1.453"/>
        </Grid>
    </DataTemplate>

Would combining the paths into 1 fix this? if so, how would I do that?

Thanks
Ryan

4

I guess you either need to learn about the Geometry Path markup syntax (Path Markup Syntax - WPF .NET Framework | Microsoft Learn), or you need to use a design tool such as Expression Blend.

With a couple of trivial changes, this seemed to work for me:

<DataTemplate x:Key="Compressor"> <Grid go:Part.SelectionAdorned="True" go:Part.Resizable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"> <FrameworkElement.ToolTip> <TextBlock Text="{Binding Path=Data.Text}" /> </FrameworkElement.ToolTip> <Rectangle Fill="Transparent" /> <Path Stretch="Fill" StrokeThickness="2.9" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 171.458,63.938 L 148.217,63.938 L 148.217,85.736 L 171.458,85.736 M 1.453,174.371 L 313.866,174.371 L 313.866,156.932 L 1.453,156.932 L 1.453,174.371 M 140.953,122.063 L 140.953,27.611 M 140.953,100.265 L 148.217,100.265 L 148.217,49.409 L 140.953,49.409 L 140.953,100.265 M 123.514,124.965 L 123.514,156.932 M 140.953,27.611 L 1.453,1.453 L 1.453,148.213 L 140.953,122.063 M 18.892,145.312 L 18.892,156.932 M 296.428,156.932 L 296.428,1.453 M 191.813,156.932 L 191.813,1.453 M 171.458,88.637 L 177.276,88.637 L 177.276,59.578 L 171.458,59.578 L 171.458,88.637 M 177.276,85.736 L 191.813,85.736 L 191.813,63.938 L 177.276,63.938 M 296.428,1.453 L 191.813,1.453 L 191.813,104.625 L 296.428,104.625 L 296.428,1.453"/> </Grid> </DataTemplate>
I assume you had used Stretch=“None” just to get it to show correctly at all.

If you don’t need it to be interactively resizable by the user, then you can remove the go:Part.Resizable attribute or set it to “False”.