Image size when changing parents

Rick · 01 May 2015, 19:44

I have a border control as a parent to the grid and when I set the rowspan and colspan it sizes correctly. Then I change it's parent to a canvas and now the size is very very very small. I can barely see it, but it's there. How can I keep the width/height to be the same size as it was when the grid was it's parent?

06 May 2015, 02:05

I recommend you start reading this tutorial about Layout and Panels.

Basically each container determines how children are measured and arranged, so the same element can look different depending on which container you place it in.

Grid lets the children to fill the entire cell where they are placed. Canvas instead, asks the children to use the minimum required size.

But you can specify the size of an element explicitly by setting the Width and Height properties of an element:

Ptr<Border> border = *new Border();
border->SetWidth(gridBorder->GetActualWidth());
border->SetHeight(gridBorder->GetActualHeight());

Rick · 11 May 2015, 18:06

So when I try the ActualWidth/Height in C# with VS it works when the window starts and isn't maximized. When I max the window and everything scales correctly (even the rect's that are inside the inventory grid) the icon size is still the original starting size. Should ActualWidth adjust when the window gets maximized and scales up? Haven't had a chance to test this with Noesis so instead I'm testing with VS and normal WPF as I have access to that currently.

14 May 2015, 11:55

ActualWidth/Height properties are recalculated everytime an element is measured and arranged. This occurs when a property that affects layout (Width, Height, Margin, Horizontal/VerticalAlignment, ...) are changed in this element, or when the element's container changes its size, so children need to be repositioned.

But ActualWidth/Height are not affected by transforms, for example, when elements are inside a Viewbox:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Viewbox Margin="100" HorizontalAlignment="Left">
        <Border Width="100" Height="200">
            <Grid x:Name="grid" Background="Silver"/>
        </Border>
    </Viewbox>
    <StackPanel HorizontalAlignment="Left" Margin="10">
        <TextBlock Text="{Binding ActualWidth, ElementName=grid}" FontSize="30"/>
        <TextBlock Text="{Binding ActualHeight, ElementName=grid}" FontSize="30"/>
    </StackPanel>
</Grid>

In the previous example, the "grid" will always measure the same size, as its container (Border) has a fixed Width (100) and Height (200).

If this is your case, you have to apply the same scale transform that is applied to the "grid" to the icon:

Noesis::Math::Matrix4f transformToGrid = rootCanvas->TransformToDescendant(grid);
Ptr<Border> border = *new Border();
border->SetWidth(gridBorder->GetActualWidth() * transformToGrid[0][0]);
border->SetHeight(gridBorder->GetActualHeight() * transformToGrid[1][1]);

Rick · 15 May 2015, 16:33

Do you happen know the C# equivalent to that? I practice things in C#/VS and it looks like TransformToDescendant() in C# returns a GeneralTransform. I'm not a big math guy but I do seem to recall Matrix holding position, rotation, scale right? So I assume what you are doing is taking the scale part of the matrix and applying that?

15 May 2015, 16:38

Yes, I was just using the scale values from the matrix to calculate the appropriate size for the border that will be placed directly in the root canvas.

Image size when changing parents

Image size when changing parents

Re: Image size when changing parents

Re: Image size when changing parents

Re: Image size when changing parents

Re: Image size when changing parents

Re: Image size when changing parents

Who is online