Преобразование масштаба в XAML (в контрольной таблице) на кнопке для выполнения «зумма»

Question

У меня есть кнопка с изображением в нем, и это стиль следующего:

<ControlTemplate x:Key="IconButton" TargetType="Button">
            <Border>
                <ContentPresenter Height="80" Width="80" />
            </Border>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Opacity">
                            <DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" />
                            <DoubleAnimation From="0.5" To="1" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Width">
                            <DoubleAnimation From="80" To="95" Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

Кнопка выглядит следующим образом:

            <Button Template="{StaticResource IconButton}" Name="btnExit">
                <Image Source="Images/Exit.png" />
            </Button>

Проблема в том, что ширина не меняется, когда моя мышь перевернет. (Или, по крайней мере, - ширина изображения не ...)

Я верю, что есть «масштаб», который я могу использовать для увеличения кнопки и все это содержимое? Как бы я сделал это здесь ...?

Спасибо.

Answer 1

Ваш шаблон, кажется, довольно минимален, но я предполагаю, что ваша только начинается на нем начало, однако это поможет вам начать с использованием совокупности, а не анимация ширины.

То ScaleTransform. может быть применен к Rendertransform Свойство либо самой кнопки или только границы вашего шаблона. Это может быть Трансформация Если вы хотите сделать больше, чем просто масштаб (то есть составное преобразование, состоящее из других трансформаций, таких как перевод, вращение, перевод), но для того, чтобы сохранить его простым, а для примеров, ради чего-то вроде следующее применяет одно значение ScaleTransform к кнопке:

<Button Template="{StaticResource IconButton}" Name="btnExit">
    <Button.RenderTransform>
        <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
    </Button.RenderTransform>
    <Image Source="Images/Exit.png" />
</Button>

Или это применить к границе контрольной таблицы:

<ControlTemplate x:Key="IconButton" TargetType="Button">
    <Border Background="Blue" x:Name="render">
        <Border.RenderTransform>
            <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
        </Border.RenderTransform>
        <ContentPresenter Height="80" Width="80" />
    </Border>
    ...
    ...

Далее вы захотите изменить триггер наземных машин, чтобы нацелить, чтобы свойство и ширину вы захотите нацелиться на свойство Scalex ScaleTransform. Следующая раскадровка будет масштабировать кнопку 2,5 раза в направлении X (добавить TargetName="render" к <Storyboard... Если вы решили применить преобразование к границе, в отличие от кнопки).

<EventTrigger RoutedEvent="Mouse.MouseEnter">
    <BeginStoryboard>
        <Storyboard TargetProperty="RenderTransform.ScaleX">
            <DoubleAnimation To="2.5" Duration="0:0:0.2" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Если вы должны были использовать трансформацию с несколькими преобразованиями, вы бы изменили ценность TargetProPerty для чего-то вроде RenderTransform.(TransformGroup.Children)[0].ScaleX Предполагая, что ScaleTransform является первым ребенком группы.

Это должно поднять вас и работать с тем, что вам нужно, и вы можете взять его, куда вы хотите оттуда ...

Емкость