Как стилизовать кнопку с помощью VisualStateManager

Question

Я хочу определить стиль некоторых кнопок моего приложения WPF на уровне окна. Вот код:

<Style x:Key="MainButtonStyle" TargetType="Button"> 
     <Setter Property="Width" Value="120"/> 
     <Setter Property="Height" Value="60"/> 
     <Setter Property="Margin" Value="5"/> 
     <Setter Property="Background" Value="White"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid x:Name="ButtonGrid"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 

           <VisualStateGroup.Transitions> 
            <!--Take one half second to transition to the MouseOver state.--> 
            <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" /> 
           </VisualStateGroup.Transitions> 

           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimation Duration="0" Storyboard.TargetName="ButtonGrid" Storyboard.TargetProperty="Background" To="Cyan"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimation Duration="0" Storyboard.TargetName="ButtonGrid" Storyboard.TargetProperty="Background" To="Red"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Что я хочу сделать, это определить некоторые свойства стиля кнопки, как ширина или цвет, а также установить VisualState на укрепите поведение кнопки на прессованные, MouseOver и т.д.

Но этот код не работает, поскольку после определения свойства «Шаблон» все другие свойства (Ширина, маржа и т. Д.) Забыты, что является правильным способом заставить его работать? Должен ли я определять все свойства кнопки внутри свойств «Grid» шаблона?

спасибо.

EDIT: РЕШЕНИЕ. НО Я НЕ ПОНИМАТЬ ПОЧЕМУ

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

Любой случай, проблема была в два раза:

Первое: Все свойства, установленные «MainButtonStyle» отлично работает, за исключением «Background», который, кажется перекрываться сетки в ControlTemplate, поэтому я имел чтобы установить свойство BackGround на Grid вместо установки его на кнопку ... Я не понимаю, почему это происходит.

Во-вторых: «Объект« StoryBoard.TargetProperty = »не может быть назначен объекту« Цвет », мне нужно было указать« StoryBoard.TargetProperty = «BackGround.Color», чтобы правильно назначить объект Color. И, как и раньше, я не понимаю, почему. Если в других элементах управления я могу установить свойство BackGround прямо на значение цвета, например «BackGround =« Красный », почему в StoryBoard мне нужно установить его« BackGround.Color = «Красный»?

Хорошо, теперь код рабочий:

<Style x:Key="MainButtonStyle" TargetType="Button"> 
     <Setter Property="Width" Value="120"/> 
     <Setter Property="Height" Value="60"/> 
     <Setter Property="Margin" Value="5"/>    
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid Background="White" x:Name="ButtonGrid"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard>            
             <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="ButtonGrid" Storyboard.TargetProperty="Background.Color" To="Cyan"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="ButtonGrid" Storyboard.TargetProperty="Background.Color" To="DarkSalmon"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Таким образом, есть решение, но если кто-то может объяснить лучше, почему я был бы признателен.

Answer 1

Когда вы определяете стиль для элемента управления и вы также переопределяете шаблон управления по умолчанию, кнопка больше не имеет своего макета по умолчанию. Он содержит только те элементы, которые вы определяете в шаблоне управления. В ВЫШЕ СЛУЧАЕ КНОПКА ТОЛЬКО СОДЕРЖИТ ОДИН ГРИД.