Изменение размера сетки относительно горизонтального центра и вертикальной вершины

Question

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

<Style x:Key="DockButtonStyle" TargetType="Button"> 
    <Setter Property="Template"> 

     <Setter.Value> 

      <ControlTemplate TargetType="Button"> 

       <Border Margin="{TemplateBinding Margin}" 
         BorderThickness="0" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         Background="Transparent"> 

        <Grid HorizontalAlignment="Center" Name="OuterGrid"> 

         <Viewbox Height="65"> 
          <Viewbox.Style>         
           <Style TargetType="Viewbox"> 
            <Setter Property="RenderTransform"> 
             <Setter.Value> 
              <ScaleTransform /> 
             </Setter.Value> 
            </Setter> 

            <Style.Triggers> 
             <DataTrigger Binding="{Binding IsMouseOver, ElementName=OuterGrid}" Value="True"> 
              <DataTrigger.EnterActions> 
               <BeginStoryboard> 
                <Storyboard> 
                 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1.1" Duration="0:0:0.2" FrameworkElement.FlowDirection="RightToLeft" /> 
                 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1.1" Duration="0:0:0.2" FrameworkElement.FlowDirection="RightToLeft" /> 
                </Storyboard> 
               </BeginStoryboard> 
              </DataTrigger.EnterActions> 

              <DataTrigger.ExitActions> 
               <BeginStoryboard> 
                <Storyboard> 
                 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1.0" Duration="0:0:0.2" /> 
                 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" To="1.0" Duration="0:0:0.2" /> 
                </Storyboard> 
               </BeginStoryboard> 
              </DataTrigger.ExitActions> 
             </DataTrigger> 
            </Style.Triggers> 
           </Style> 
          </Viewbox.Style> 

          <Grid Name="VectorImageGrid" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent"> 

           <Path Fill="#FF555555"> 
            <Path.Style> 
             <Style TargetType="Path"> 

              <Style.Resources> 

               <Storyboard x:Key="GlowOn"> 

                <ColorAnimation Storyboard.TargetProperty="Fill.Color" 
                    From="#FF555555" 
                    To="Blue"   
                    Duration="0:0:0.5" 
                    AutoReverse="False"/> 
               </Storyboard> 

               <Storyboard x:Key="GlowOff"> 

                <ColorAnimation Storyboard.TargetProperty="Fill.Color" 
                    From="Blue" 
                    To="#FF555555" 
                    Duration="0:0:0.5" 
                    AutoReverse="False"/> 
               </Storyboard> 

              </Style.Resources> 

              <Setter Property="Fill"> 
               <Setter.Value> 
                <SolidColorBrush Color="Gray" Opacity="1"/> 
               </Setter.Value> 
              </Setter> 

              <Style.Triggers> 
               <DataTrigger Binding="{Binding IsMouseOver, ElementName=VectorImageGrid}" Value="True"> 

                <DataTrigger.EnterActions> 
                 <BeginStoryboard Storyboard="{StaticResource GlowOn}"/> 
                </DataTrigger.EnterActions> 

                <DataTrigger.ExitActions> 
                 <BeginStoryboard Storyboard="{StaticResource GlowOff}"/> 
                </DataTrigger.ExitActions> 

               </DataTrigger> 
              </Style.Triggers> 

             </Style> 
            </Path.Style> 

            <Path.Data> 
             <PathGeometry FillRule="Nonzero" Figures="M640,5105C370,5051 144,4858 50,4603 35,4560 17,4491 11,4450 2,4394 0,3918 2,2610 6,622 -2,813 85,635 180,443 347,302 565,228L635,205 1693,202C2549,200 2750,202 2744,212 2740,219 2722,243 2705,265 2659,323 2593,432 2554,514L2520,585 1612,590 705,595 649,618C535,664 437,771 409,882 388,963 388,4362 409,4435 448,4567 536,4658 675,4709 708,4721 826,4724 1365,4727 2092,4731 2068,4734 2114,4662 2158,4596 2163,4549 2169,4100 2175,3677 2175,3675 2198,3637 2211,3617 2243,3587 2268,3572L2315,3545 2750,3540C3131,3535 3191,3532 3230,3517 3281,3497 3306,3476 3329,3435 3343,3409 3345,3354 3348,3003L3351,2601 3388,2617C3454,2645,3580,2679,3661,2692L3741,2705 3738,3170 3735,3635 3699,3710C3633,3849 3554,3938 3056,4436 2496,4995 2415,5063 2253,5105 2174,5126 743,5126 640,5105z" /> 
            </Path.Data> 

           </Path> 

           <Path> 
            <Path.Style> 
             <Style TargetType="Path"> 

              <Style.Resources> 

               <Storyboard x:Key="GlowOn"> 

                <ColorAnimation Storyboard.TargetProperty="Fill.Color" 
                    From="DarkGreen" 
                    To="Green"   
                    Duration="0:0:0.3" 
                    AutoReverse="False"/> 
               </Storyboard> 

               <Storyboard x:Key="GlowOff"> 
                <ColorAnimation Storyboard.TargetProperty="Fill.Color" 
                    From="Green" 
                    To="DarkGreen" 
                    Duration="0:0:0.3" 
                    AutoReverse="False"/> 
               </Storyboard> 

              </Style.Resources> 

              <Setter Property="Fill"> 
               <Setter.Value> 
                <SolidColorBrush Color="DarkGreen" Opacity="1"/> 
               </Setter.Value> 
              </Setter> 

              <Style.Triggers> 
               <DataTrigger Binding="{Binding IsMouseOver, ElementName=VectorImageGrid}" Value="True"> 

                <DataTrigger.EnterActions> 
                 <BeginStoryboard Storyboard="{StaticResource GlowOn}"/> 
                </DataTrigger.EnterActions> 

                <DataTrigger.ExitActions> 
                 <BeginStoryboard Storyboard="{StaticResource GlowOff}"/> 
                </DataTrigger.ExitActions> 

               </DataTrigger> 
              </Style.Triggers> 

             </Style> 
            </Path.Style> 

            <Path.Data> 
             <PathGeometry FillRule="Nonzero" Figures="M3832,2319C3574,2297 3319,2177 3131,1989 2731,1588 2684,955 3021,499 3082,417 3216,288 3295,235 3870,-146 4641,50 4952,655 5050,848 5085,1006 5077,1225 5066,1528 4948,1794 4734,2000 4485,2239 4177,2348 3832,2319z M4140,1575L4140,1380 4335,1380 4530,1380 4528,1183 4525,985 4333,982 4140,980 4138,787 4135,595 3938,592 3740,590 3740,785 3740,980 3545,980 3350,980 3350,1180 3350,1380 3545,1380 3740,1380 3740,1575 3740,1770 3940,1770 4140,1770 4140,1575z" /> 
            </Path.Data> 

           </Path> 

          </Grid> 
         </Viewbox> 

        </Grid> 

       </Border> 

      </ControlTemplate> 

     </Setter.Value> 

    </Setter> 
</Style> 

Answer 1

Пожалуйста, пробуйте установить RenderTransformOrigin в 0.5, 1. Теперь он будет масштабироваться горизонтально от центра управления и вертикально снизу.

... 
<Viewbox Height="65"> 
    <Viewbox.Style>         
    <Style TargetType="Viewbox"> 

     <!-- Made the change here --> 
     <Setter Property="RenderTransformOrigin" Value="0.5, 1"/> 

     <Setter Property="RenderTransform"> 
     <Setter.Value> 
      <ScaleTransform /> 
      </Setter.Value> 
      </Setter> 
... 

Взятые из MSDN:

Получает или задает центральную точку любого возможного преобразования визуализации объявлен RenderTransform относительно границ элемента.

Посмотрите это сообщение для решения аналогичной проблемы: Make ScaleTransform start from Center instead of Top-Left Corner.