When writing a custom ControlTemplate (XAML) for a Win 8 Metro control we need to use the VisualStateManager to update the control according to VisualState transitions. I see the below sample all over MSDN, but I can't find where the VisualStateGroup "CommonStates" is documented and what other VisualStates are defined other than "PointerOver" and "Normal"? Do you have to go dig in the SDK to find the default ControlTemplate for a button? If so, where?
<ControlTemplate TargetType="Button">
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<!--Take one half second to transition to the PointerOver state.-->
<VisualTransition To="PointerOver"
GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<!--Change the SolidColorBrush, ButtonBrush, to red when the
Pointer is over the button.-->
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonBrush"
Storyboard.TargetProperty="Color" To="Red" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
</Grid.Background>
</Grid>
</ControlTemplate>
You can go to the design view of your xaml file and with the Button control selected - right click/Edit Template/Edit Current - will get you the default template extracted. Normally controls should be annotated with attributes that indicate which visual states should be used in the template like below, but I can't see them when I just navigate to definition of a control like Button.
[TemplateVisualState(GroupName="CommonStates", Name="Normal")]
[TemplateVisualState(GroupName="CommonStates", Name="PointerOver")]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With