There used to be really great designer support for Windows 8.0 apps in Visual Studio 2012. In the Device Panel, you could move to different VisualStates
within the VisualStateManager.VisualStateGroups
on your page and it would update the appropriate properties at design time.
In 8.1, the VisualState
s are no longer based on specific snapped layouts, but you can still use the VisualStateManager
and update based on the screen width
.
Q: How can I get these changes to update at design time?
Here's a simple example of a change that works at runtime, but not design time.
MainView.xaml.vb:
<!-- language: lang-vb -->Private Sub MainView_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
AddHandler Me.SizeChanged, AddressOf WindowSizeChanged
ApplyViewState(Me.Width, Me.Height)
End Sub
Private Sub WindowSizeChanged(sender As Object, e As SizeChangedEventArgs)
ApplyViewState(e.NewSize.Width, e.NewSize.Height)
End Sub
Private Sub ApplyViewState(ByVal viewWidth As Double, ByVal viewHeight As Double)
If viewWidth < 350 Then
VisualStateManager.GoToState(Me, "SmallLayout", True)
Else
VisualStateManager.GoToState(Me, "RegularLayout", True)
End If
End Sub
MainView.xaml:
<!-- language: lang-xaml --><Page x:Name="PageRoot"
x:Class="WinStoreMvvmTemplate.View.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="Red" x:Name="ContentGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="RegularLayout"/>
<VisualState x:Name="SmallLayout">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ContentGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Page>
Here's a view at Design Time: (incorrect)
Here's a view at Run Time: (correct)