Как использовать анимацию для изменения размера сетки?

Question

Я хотел бы увеличить (т.е. ScaleTransform) всю сетку в зависимости от свойства моего пользовательского класса.

Моя сетка

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="0">
        <TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding BoxId}" />
    </Viewbox>
    <Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="1" >
        <TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding ProdNr}" />
    </Viewbox>
</Grid>

Этоэто стиль, который я использовалПроблема в том, что масштабирования вообще не видно.Я протестировал код с другой анимацией (с изменением цвета фона), которая работала нормально.

<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <ScaleTransform />
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsReadyToUnload}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="2" Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" To="2" Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

Не могли бы вы дать мне какие-нибудь советы о том, как добиться правильного поведения при масштабировании?

Answer 1

Попробуйте прикрепить это к вашему ViewBox.

<Viewbox x:Name="viewbox" RenderTransformOrigin="0.5,0.5" ...>
    <Viewbox.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
        </TransformGroup>
    </Viewbox.RenderTransform> 

Также попробуйте изменить анимацию на это, назовите свой первый ViewBox viewbox .

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="viewbox">
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2"/>
</DoubleAnimationUsingKeyFrames>

Извините, не видел, что вы используете LayoutTransform.Вместо этого вы должны использовать RenderTransform, попробуйте изменить Setter Property, а также Storyboard.TargetProperty на RenderTransform, и это должно работать.

<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">    
    <Setter Property="RenderTransform">    
        <Setter.Value>    
            <ScaleTransform />    
        </Setter.Value>    
    </Setter>    
    <Style.Triggers>    
        <DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}" Value="True">    
            <DataTrigger.EnterActions>    
                <BeginStoryboard>    
                    <Storyboard>    
                        <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />    
                        <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />    
                    </Storyboard>    
                </BeginStoryboard>    
            </DataTrigger.EnterActions>    
        </DataTrigger>    
    </Style.Triggers>    
</Style>

Также, если вы хотите сохранить LayoutTransform, выпопробуйте изменить Grid на Canvas, это тоже может сработать.

Answer 2

Я сделал с тобой что-то похожее (сделано в коде события при наведении мыши):

DoubleAnimation animation = new DoubleAnimation();

animation.From = MenuBorder.Width;
animation.To = 170;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(350));
MenuBorder.BeginAnimation(WidthProperty, animation);

Здесь у меня есть сетка с рамкой внутри. Сетки с установлен на автоматический. Поэтому, похоже, это сетка, которую я анимирую, но это действительно граница внутри сетки, которую я анимирую.

Answer 3

Ваш Grid определяет пространство, которое разрешено занимать вашим ViewBox, поэтому вы должны анимировать свойства вашей Grid, а не ваши ViewBoxes.

Вы можете либо анимировать его высоту / ширину, либо применить к нему преобразование ScaleTransform.

Кроме того, LayoutTransform применяется перед рендерингом, а RenderTransform применяется после. Возможно, вы захотите попробовать RenderTransform вместо Layout с вашим существующим кодом, чтобы посмотреть, будет ли все ваши ViewBoxes расширяться за пределы разрешенной области.

Answer 4

Я думаю, что вы пытаетесь достичь, это изменить ширину / высоту ViewBox, и тогда содержимое будет соответственно масштабировано.

Answer 5

Вы должны добавить тип к анимации:

<DoubleAnimation Storyboard.TargetProperty="(Grid.LayoutTransform).(ScaleTransform.ScaleX)" To="2" Duration="0:0:0.5" />

Я бы установил значение ScaleX явно в элементе управления:

<ScaleTransform ScaleX="1" />