Question

鉴于以下代码，我原本期望红色和绿色框最终会在彼此旁边，但正如您在结果的屏幕截图中看到的那样，他们没有。相反，网格行的大小可以容纳它们的完整大小，即使有一个渲染变换可以将它们缩放到它们的高度的一半。

有没有办法让网格行实际调整大小并调整其内容？

我想要这个，因为我无法为行的高度设置动画，所以我想要为其内容的高度设置动画。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border Height="300"
                Grid.Row="0"
                Background="Red">
        <Border.RenderTransform>
            <ScaleTransform ScaleY="0.5" />
        </Border.RenderTransform>
    </Border>
    <Border Height="200"
                Grid.Row="1"
                Background="Green">
        <Border.RenderTransform>
            <ScaleTransform ScaleY=".5" />
        </Border.RenderTransform>
    </Border>
</Grid>

red vs green

Answer 1

正如Sheridan所说，RenderTransform只是在移动东西 - 独立于其他元素。巧妙的是，它完全硬件加速了。

让系统执行动画并影响布局有点棘手。你可能想要不进行纯粹的调整，而是使用渲染变换让一个元素移动到另一个元素之上，从而隐藏它。

但是，如果你真的想要真正调整内容的大小，这是一种方法。

首先，我在底部添加了一个高度为*的行，以允许您的自动行只使用他们需要的大小。其次，我创建了一个动画（使用Blend of course :)）并在其中命名关键帧，以便能够从后面的代码中访问它们。

最后我修改.cs文件中的动画，并运行动画 - 瞧！请注意，这不是硬件加速，但应该适用于简单的UI。

代码也可以在https://github.com/andyhammar/Wp81ResizeRowsTestApp

找到

<强>的.xaml

<Page.Resources>
    <Storyboard x:Name="AnimateRed">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="_redBorder">
            <EasingDoubleKeyFrame KeyTime="0" x:Name="redAnimationFromKeyFrame" Value="300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" x:Name="redAnimationToKeyFrame" Value="200">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Border 
        x:Name="_redBorder" 
        Height="300"
        Grid.Row="0"
        Background="Red">
    </Border>
    <Border 
        x:Name="_greenBorder" 
        Height="200"
        Grid.Row="1"
        Background="Green">
    </Border>

    <StackPanel 
        Grid.Row="2"
        VerticalAlignment="Bottom"
        HorizontalAlignment="Center"
        Orientation="Horizontal">
        <Button 
            x:Name="redSmallButton"
            Content="red small"
            Click="RedSmallButton_OnClick"/>
        <Button 
            x:Name="redLargeButton"
            Content="red large"
            Click="RedLargeButton_OnClick"/>
    </StackPanel>

</Grid>

<强> .xaml.cs

    private void RedSmallButton_OnClick(object sender, RoutedEventArgs e)
    {
        redAnimationFromKeyFrame.Value = 300;
        redAnimationToKeyFrame.Value = 200;
        AnimateRed.Begin();
    }

    private void RedLargeButton_OnClick(object sender, RoutedEventArgs e)
    {
        redAnimationFromKeyFrame.Value = 200;
        redAnimationToKeyFrame.Value = 300;
        AnimateRed.Begin();
    }

Answer 2

他们这样做，但我建议您改用LayoutTransform Property。不同之处在于LayoutTransform在调用Arrange和Measure方法之前执行，因此会考虑新的大小，RenderTransform是之后执行，因此它忽略了任何尺寸变化。

您可以在Scott Logic网站的LayoutTransform vs. RenderTransform - What's the Difference?页面上找到有关差异的完整说明。

<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Border Height="300" Grid.Row="0" Background="Red"> <Border.LayoutTransform> <ScaleTransform ScaleY="0.5" /> </Border.LayoutTransform> </Border> <Border Height="200" Grid.Row="1" Background="Green"> <Border.LayoutTransform> <ScaleTransform ScaleY=".5" /> </Border.LayoutTransform> </Border> </Grid>

为什么不使用带有高度的网格行自动调整尺度转换内容？

2 个答案: