Node size change

GoXam
1

Hi

In EntityRelationships sample I use the following code ( in blue) to expand and collapse nodes.

This works great until I change the size of the node. At that point the collapse does not collapse the DataGrid but it does make the DataGrid not visible. Is there anything I can do to make the DataGrid collapse after a size change.

Thanks
Rich

public static void SetTableVisibility(Button expanderButton, Node tableNode)
{
// find the Node’s DataGrid
DataGrid grid = tableNode.FindNamedDescendant(“dataGrid”) as DataGrid;
if (grid == null)
return;

        Uri uri;
        ImageSource imgSource;
        Image myImage;

        if (grid.Visibility == Visibility.Collapsed)
        {
            grid.Visibility = Visibility.Visible;
            uri = new Uri("images/arrow_up.png", UriKind.Relative);
        }
        else
        {
            grid.Visibility = Visibility.Collapsed;
            uri = new Uri("images/arrow_down.png", UriKind.Relative);
        }
        imgSource = new BitmapImage(uri);
        myImage = (Image)expanderButton.FindName("Expander");
        myImage.Source = imgSource;
    }</font>
2

The ResizingTool sets the Width and Height of the resized element – i.e. the element named by Part.SelectionElementName, which defaults to the whole Part.VisualElement.

If you clear the values of those two properties, I bet the panel will be arranged at its natural size, which will not include the Collapsed DataGrid.

3

Hi Walter,

I tried the following:

I added the code in red to the xaml.


<Border Background=“LightSteelBlue” BorderBrush=“Gray” BorderThickness=“2”
CornerRadius=“3” MouseLeftButtonDown=“Border_MouseLeftButtonDown” SizeChanged=“Border_SizeChanged”
go:Part.SelectionElementName=“NodeBackground” go:Part.SelectionAdorned=“True” go:Part.Resizable=“True”

I then added the following in red to the previously referenced code.

public static void SetTableVisibility(Button expanderButton, Node tableNode, Border border)
{

        // find the Node's DataGrid
        DataGrid grid = tableNode.FindNamedDescendant("dataGrid") as DataGrid;
        if (grid == null) 
            return;

        Uri uri;
        ImageSource imgSource;
        Image myImage;

if (tableNode.SelectionElementName == “NodeBackground”)
{
border.Height = 0.0;
border.Width = 0.0;
}

        if (grid.Visibility == Visibility.Collapsed)
        {
            border.Height = 0.0;
            grid.Visibility = Visibility.Visible;
            uri = new Uri("images/arrow_up.png", UriKind.Relative);
        }
        else
        {
            grid.Visibility = Visibility.Collapsed;
            uri = new Uri("images/arrow_down.png", UriKind.Relative);
        }

        imgSource = new BitmapImage(uri);
        myImage = (Image)expanderButton.FindName("Expander");
        myImage.Source = imgSource;
    }
What I tried does not work, it makes the node not visible at all.

Can you tell me what I did wrong.

Thanks
Rich

4

By “clear the Width and Height properties”, I meant:

FrameworkElement element = theNode.SelectionElement;
element.ClearValue(FrameworkElement.WidthProperty);
element.ClearValue(FrameworkElement.HeightProperty);

Setting those properties to zero just sets them to zero, which as you found is not what you want.

It probably would also work to set those properties to Double.NaN, which is the default value. But I haven’t tried it.

By the way, which element has the x:Name=“NodeBackground”? Is that the element that you want users to resize?

5

Hi Walter,

Your question.
By the way, which element has the x:Name=“NodeBackground”? Is that the element that you want users to resize?

NodeBackground was a mistake and I removed the reference in the xaml code. With your three lines of code collapse is working for a node that has been resized.

Thanks
Rich