У меня есть кнопка с изображением в нем, и это разрабатывается следующим:
<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>
Проблема состоит в том, что ширина не изменяется, когда моя мышь переходит. (Или по крайней мере - ширина изображения не делает...),
Я полагаю, что существует "масштаб", преобразовывают, я могу использовать для увеличения кнопки и всего, что это - содержание? как я сделал бы это здесь...?
Спасибо.
Ваш шаблон кажется довольно минималистичным, но я предполагаю, что вы только начинаете работать с ним, однако это поможет вам начать работу с использованием 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