Блог Сергея Пугачёва

В Silverlight 4 кроме большого числа основополагающих улучеший, появилось много маленьких и незаметных новых возможностей, о которых часто не говорят, но, которые, бывают очень полезны. Одну такую новую возможность мы сегодня и рассмотрим. Говорю я про новый класс трансформаций, а именно про составную трансформацию – CompositeTransform.

Раньше, если мы хотели, скажем, повернуть визуальный элемент на X градусов, наклонить и масштабировать его, нам требовалось объявлять группу трансформаций и задавать каждую трансформацию отдельно. Кроме всего прочего это налагало трудности при создании анимаций, так как приходилось задавать для каждой трансформации имя или обращаться к ней по индексу. Код, задающий несколько трансформаций, выглядел примерно так:

<Button Content="TransformGroup" Width="150" Height="50">
  <Button.RenderTransform>
    <TransformGroup>
      <ScaleTransform ScaleX="1.2" ScaleY="1.5" CenterX="75" CenterY="25"/>
      <SkewTransform AngleX="-10" AngleY="-5" CenterX="75" CenterY="25"/>
      <RotateTransform Angle="-10" CenterX="75" CenterY="25"/>
    </TransformGroup>
  </Button.RenderTransform>
</Button>

* This source code was highlighted with Source Code Highlighter.

Теперь же, в случае использования CompositeTransform мы можем объявить одну трансформацию вместо группы. При этом визуально результат будет аналогичным, но мы пишем более чистый и компактный код:

<Button Content="CompositeTransform" Width="150" Height="50">
  <Button.RenderTransform>
    <CompositeTransform CenterX="75" CenterY="25"
               ScaleX="1.2" ScaleY="1.5"
               SkewX="-10" SkewY="-5"
               Rotation="-10"/>
  </Button.RenderTransform>
</Button>

* This source code was highlighted with Source Code Highlighter.

Разница в коде ещё более заметна, если мы задаём трансформации используя, скажем, язык C#:

TransformGroup tg = new TransformGroup();

ScaleTransform scale = new ScaleTransform();
scale.ScaleX = 1.2;
scale.ScaleY = 1.5;
scale.CenterX = 75;
scale.CenterY = 25;
tg.Children.Add(scale);

SkewTransform skew = new SkewTransform();
skew.AngleX = -10;
skew.AngleY = -5;
skew.CenterX = 75;
skew.CenterY = 25;
tg.Children.Add(skew);

RotateTransform rotate = new RotateTransform();
rotate.Angle = -10;
rotate.CenterX = 75;
rotate.CenterY = 25;
tg.Children.Add(rotate);

* This source code was highlighted with Source Code Highlighter.

Тот же пример, но с использованием CompositeTransform:

CompositeTransform ct = new CompositeTransform();
ct.ScaleX = 1.5;
ct.ScaleY = 1.5;
ct.SkewX = -10;
ct.SkewY = -5;
ct.Rotation = -10;
ct.CenterX = 75;
ct.CenterY = 25;

* This source code was highlighted with Source Code Highlighter.

По мотивам CompositeTransform simplifies transforms in Silverlight 4 Beta [en]