1

ベクター画像で遊んでいます。私はそれらの作成に成功しましたが、それらを使用していくつかのアニメーションを作成したいと考えています. 1 つの例外を除いて非常にうまく機能する画像を格納するボタン スタイルを作成しました。マウスオーバー時に画像を拡大しようとしています。私のコードは正常に動作しますが、左上隅に対して画像を拡大しています。つまり、一番上と一番左の点は静止したままで、画像は下と右に拡大します。一番下の中心点を固定したままにして、画像を各方向に水平に拡大し、上に拡大したいと思います。ご覧のとおり、トリガーを使用して実際に Viewbox を展開して、物事を実現しています。これを達成するための助けをいただければ幸いです。

<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>
4

1 に答える 1

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 によって宣言された可能なレンダリング変換の中心点を取得または設定します。

同様の問題の解決策については、この投稿を参照してください: ScaleTransform を左上隅ではなく中央から開始します。

于 2013-09-21T14:01:42.427 に答える