Home > Blockchain >  How to make Grid automatic height work when content has scale transformation?
How to make Grid automatic height work when content has scale transformation?

Time:08-28

I have a Grid with a UserControl inside. I have applied 50% scale transformation for UserControl, but my Grid height is remains high as would be with 100% UserControl scale.

<Grid Background="Orange">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <local:BlockControl
        Grid.Column="0"
        MouseDown="BlockControl_MouseDown" 
        DataContext="{Binding Block}">
        <local:BlockControl.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            </TransformGroup>
        </local:BlockControl.RenderTransform>
    </local:BlockControl>
    <TextBlock
        Grid.Column="1"
        Text="{Binding Block.FunctionFullName}"/>
</Grid>

Can I do something about this in pure XAML? (without code behind)

I guess this question is answered somewhere, but I can't find/form the question to search for with my english skills level.

CodePudding user response:

Use LayoutTransform instead of RenderTransform.

<local:BlockControl.LayoutTransform>
    <TransformGroup>
        <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
    </TransformGroup>
</local:BlockControl.LayoutTransform>

The difference of the two is well explained in Transforming a FrameworkElement

Use the LayoutTransform property when scaling, rotating, or skewing and you need the parent of the element to adjust to the transformed size of the element.

  • Related