Преобразование масштаба в xaml (в шаблоне управления) на кнопке для выполнения «масштабирования» - PullRequest
Новая
       34

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

6 голосов
/ 09 апреля 2010

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

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

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

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

Спасибо.

1 Ответ

16 голосов
/ 09 апреля 2010

Ваш шаблон выглядит довольно минимальным, но я предполагаю, что вы только начинаете его использовать, однако это поможет вам начать использовать 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" к <Storyboard..., если вы решили применить преобразование к границе, а не к кнопке). 

<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 является первым дочерним элементом группы.

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

НТН

...