Resizable width only while still autoresize height

GoXam
#1

I want my nodes to be manually resizable only in the width. The height should be autosized according to the content of the node. I have been able to get the width only resize to work. However, once the node has been manually resized, the height no longer autoresizes if the content size changes. Do you have any suggestions how to handle this?

In the SpotPanelStyle I have set Resizable=“True” and ResizableElementName=“Shape”. In the NodePanelStyle I have set Sizing=“Auto”. In the Diagram’s ResizingTool I have set "MinSize=“0 NaN” and MaxSize=“9999 NaN”.

<DataTemplate x:Key="MyKey">
                <go:SpotPanel Style="{StaticResource SpotPanelStyle}">
                    <go:NodePanel Style="{StaticResource NodePanelStyle}">
                        <go:NodeShape x:Name="Shape" Style="{StaticResource NodeShapeStyle}" 
                                      Width="{Binding Path=Data.Width, Mode=OneWayToSource}"/>
                        <DockPanel Margin="0" DataContext="{Binding Path=Data}"
                                   Width="{Binding Path=Width, Mode=OneWay}">                            
                            ...
                        </DockPanel>
                    </go:NodePanel>
                </go:SpotPanel>
            </DataTemplate>
#2

The panel gets a particular "forced" width because the ResizingTool sets the element's Width property. Doing so also removes that data Binding on NodeShape.Width. (Although since it is OneWayToSource I suppose that doesn't matter.)

If you were to remove that constraint, by setting the Width to NaN, I think the panel would get its normal width again. But you probably only want to do that when the content is changed somehow – presumably you know when that might happen, because the system certainly can’t decide that for you.

#3

I think I did not explain the problem very well. The issue that I am having is with the height no longer autoresizing after a manual resize.

This is what my node looks like to start.

After manual resize where only the width is allowed to change. Which is what I want.

Then add ports to the node, which should change the height only.

You see the element inside the node shape has autosized the height as it should, however the nodeshape did not. It is OK that the width does not autoresize after a manual resize. But, I want the height to always autoresize and never manual resize. The width stuff is working fine, it is the height issue that is the problem.

I did try data binding the height also, but it did not make any difference.

<DataTemplate x:Key="MyKey">
                <go:SpotPanel Style="{StaticResource SpotPanelStyle}">
                    <go:NodePanel Style="{StaticResource NodePanelStyle}">
                        <go:NodeShape x:Name="Shape" Style="{StaticResource NodeShapeStyle}" 
                                      Width="{Binding Path=Data.Width, Mode=OneWayToSource}"
                                      Height="{Binding Path=Data.Height, Mode=OneWay}"/>
                        <DockPanel x:Name="InstructionElement" Margin="0" DataContext="{Binding Path=Data}"
                                   Width="{Binding Path=Width, Mode=OneWay}"
                                   Height="{Binding Path=Height, Mode=OneWayToSource}">                            
                                ...
                        </DockPanel>
                    </go:NodePanel>
                </go:SpotPanel>
            </DataTemplate>
#4

Oh, I see. You want to keep the manually specified Width, but you want to leave the Height unspecified so that it can grow/shrink as needed.

I haven’t tried this to be sure, but I think you could customize the ResizingTool by overriding DoResize:
protected override void DoResize(Rect newr) {
base.DoResize(newr);
var elt = this.AdornedElement;
if (elt != null) elt.Height = Double.NaN;
}

Install your custom resizing tool by creating an instance of it and replacing the value of Diagram.ResizingTool, either in XAML or in code.

#5

Thanks Walter! That worked!