Масштаб преобразовывает в xaml (в controltemplate) на кнопке для выполнения “масштабирования”

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

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

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

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

Спасибо.

6
задан Matt B 8 April 2010 в 23:35
поделиться

1 ответ

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

ScaleTransform можно применить к свойству RenderTransform либо самой кнопки, либо только границы вашего шаблона. Это может быть TransformGroup , если вы хотите сделать больше, чем просто масштабирование (то есть составное преобразование, состоящее из других преобразований, таких как Translate, Rotate, Skew), но для простоты и, например, для чего-то вроде следующего применяет одно значение 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:

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

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

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

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

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

HTH

16
ответ дан 8 December 2019 в 14:42
поделиться
Другие вопросы по тегам:

Похожие вопросы: