WPF - сделайте закругленную кнопку больше при наведении указателя мыши

Question

Я создал закругленную кнопку, используя следующий код.

<Button Width="100" 
     Height="100"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid> 
       <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
        <Ellipse.Fill> 
         <RadialGradientBrush> 
          <GradientStop Offset="0" 
              Color="Lime" /> 
          <GradientStop Offset="1" 
              Color="Lime" /> 
          <GradientStop Offset="1" 
              Color="Gold" /> 
          <RadialGradientBrush.Transform> 
           <TransformGroup> 
            <ScaleTransform ScaleY="0.65" /> 
           </TransformGroup> 
          </RadialGradientBrush.Transform> 
         </RadialGradientBrush> 
        </Ellipse.Fill> 
       </Ellipse> 
       <ContentPresenter HorizontalAlignment="Center" 
            VerticalAlignment="Center"/> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Мне нужно сделать эту кнопку немного большой, когда наведите курсор мыши. Я также искал это сообщество и Google. Но я не мог найти способ сделать это.

Answer 1

Вам необходимо применить ScaleTransform при визуализации, когда мышь над кнопкой.
Стиль Триггеры это способ сделать это:

<Button Width="100" Height="25" Content="Press me!"> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/> 
         <Setter Property="RenderTransform"> 
          <Setter.Value> 
           <ScaleTransform ScaleX="1.2" ScaleY="1.2"/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button> 

Обратите внимание, что вы должны изменить RenderTransformOrigin в масштабе от центра вместо левого верхнего угла.

Answer 2

В WPF нет события «наведения мыши», но если «mouseover» также хорошо, я должен быть в состоянии помочь с моим ответом. Я просто не в состоянии проверить в коде, но это здесь должно быть решение вашей проблемы:

<Button Width="100" Height="100"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid> 
       <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
        <Ellipse.Fill> 
         <RadialGradientBrush> 
          <GradientStop Offset="0" 
              Color="Lime" /> 
          <GradientStop Offset="1" 
              Color="Lime" /> 
          <GradientStop Offset="1" 
              Color="Gold" /> 
          <RadialGradientBrush.Transform> 
           <TransformGroup> 
            <ScaleTransform ScaleY="0.65" /> 
           </TransformGroup> 
          </RadialGradientBrush.Transform> 
         </RadialGradientBrush> 
        </Ellipse.Fill> 
       </Ellipse> 
       <ContentPresenter HorizontalAlignment="Center" 
            VerticalAlignment="Center"/> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
    <Button.Style> 
     <Style TargetType="{x:Type Button}"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Height" Value="150"/> 
        <Setter Property="Width" Value="150"/> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Button.Style> 
</Button> 

Я просто доступ Trigger через Button.Style и изменить там тогда свойства.

Answer 3

Более того, есть две вещи, которые можно сделать, изменяя аспект управления XAML:

1: Изменить свое состояние: каждый элемент управления имеет множество состояний (парения, отпущена, нажата ,. ..), привязанный к свойствам (цвет фона, размер рендеринга, ...), привязанный к его классу. В зависимости от элемента управления, который вы пытаетесь изменить, вы можете изменить многое, просто изменив параметр подэлемента (скажем, размер вашего эллипса, внутри кнопок).

2: Сделайте индивидуальную анимацию: иначе, это называется раскадровки, где вы определяете анимационные клавиши. Эти анимации, запускаемые с помощью триггера, очень полезны, потому что это не просто простые интерполяции между двумя состояниями, а реальный дизайн движения.

Для обеих этих методов вам, вероятно, придется изменить или создать собственный шаблон управления тура для кнопок.