We Keep Coding

How to make "generic" a togglebutton animation (that affects another control) in a template?

I'm hiding/showing a stackpanel with an animation using a Togglebutton defining this animation as follows:
<StackPanel Orientation="Horizontal">
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" >
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard x:Name="HideGrid">
<DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="0" To="520" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="ShowGrid">
<DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="520" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<TextBlock Margin="4">Show/Hide</TextBlock>
</StackPanel>
This is the stackpanel to which Storyboard.TargetName="stackPanelName" is referencing:
<StackPanel x:Name="stackPanelName">
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Name</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding Name}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Surname</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding Surname}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Phone number</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding PhoneNumber}"/>
</StackPanel>
</StackPanel>
This works perfectly, but i have to use this kind of togglebutton in several places and i'd like not to put <ToggleButton.Triggers>...</ToggleButton.Triggers> again and again for each togglebutton i have to use.
So i'm trying to define a template in a style...something like this:
<Style TargetType="{x:Type ToggleButton}" x:Key="tgButtonStyle1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2" Background="{TemplateBinding Background}" Storyboard.TargetName="{TemplateBinding Name}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="0" To="320" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="320" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
And then:
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" Style="{Binding tgButtonStyle1}" Storyboard.TargetName="stackPanelName">
The key here is that in the trigger at <DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" ....> i'm using a templatebinding thinking that it would "catch" the value specified at <ToggleButton.... Storyboard.TargetName="stackPanelName" .../>.
But it has no effect at all, no animation.
What am i doing wrong? Is there something left to do?
Thanks.

Design ListPicker Blend/Xaml

I am using a ListPicker, but have a hard time getting the design to work. I have included the test I have done:
<ControlTemplate x:Key="listpicker_style" TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Highlighted">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxForegroundBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource TransparentBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Rectangle Fill="#FFEAC726" HorizontalAlignment="Left" Height="52" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,43,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" Margin="7,-3,-7,3">
<StackPanel>
<TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8" />
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</StackPanel>
</UserControl>
</Border>
</Grid>
</StackPanel>
</ControlTemplate>
Basicly what I want to achieve is to create a listpicker that looks like a scroll. When you click it the scroll expands and shows the entire options. Therefore I am not interested in using the full-screen look.
I have also done other tries with similar bad success where I used designed usercontrols as the scrolls top and bottom for animations. But the design of the listpicker has been impossible to do.
My question is therefore if somebody has a design of the listpicker, using usercontrols, such that I can override them or if you can direct me towards how to manipulate the listpicker correctly. I have used blend, experssion design, Illustrator and XAML, so any method for designing the listpicker using either of them would be much appreciated!
Visual Example
So the idea is something like this:
Such that the text is inside the scroll, when you click it, the scroll expands with a list inside you can scroll to choose elements.
UserControl
Usercontrol of a scroll
Pictured Overview
The selected Item:
Click the element and a list appears:
This is how a listpicker works I want to design it as a scroll, either all from scratch or using the tool listpicker description, is what I am looking for. I have however not succeeded in making the expanding look nice.

I have made it the most simple I can. The idea is the following: the Translate and Scale properties are animated between states, others like Height, etc aren't. So Let's create the Layout like the following:
<StackPanel Width="500">
<Grid x:Name="HeaderGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped"/>
<Grid VerticalAlignment="Top" x:Name="ContentGrid" Height="400" Background="BlanchedAlmond" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Tapped="TextBlock_Tapped"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
</ItemsControl.Items>
</ItemsControl>
</ScrollViewer>
</Grid>
<Grid x:Name="BottomGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
</StackPanel>
Now let's add some visual states to the page, control or what you need
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded"/>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BottomGrid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And finally the codebehind for the change of states
private void HeaderGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
CheckState();
}
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
var value = (sender as FrameworkElement).DataContext;
CheckState();
}
private void CheckState()
{
if ((ContentGrid.RenderTransform as CompositeTransform).ScaleY > 0)
VisualStateManager.GoToState(this, "Collapsed", true);
else
VisualStateManager.GoToState(this, "Expanded", true);
}
Now you can add fade on the text when appears and disappears, and change the colors for images, etc. But the idea is solved.

Conflict with animation. Elements with animation fade after open up the longlistselector again

<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding CardItems}" Name="cardsList" SelectionChanged="cardsList_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="220">
<Grid>
<Grid x:Name="cardBack" Height="200" Width="300" Visibility="{Binding visualBackSide, Mode=TwoWay}">
<Image Source="/Assets/BackCard.png"/>
<TextBox Background="Transparent" BorderBrush="Transparent" TextWrapping="Wrap" Height="140" Width="250" Text="{Binding CardFrontSide, Mode=TwoWay}" TextAlignment="Center" />
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
</Grid>
<Grid x:Name="cardFront" Height="200" Width="300" Visibility="{Binding visualFrontSide, Mode=TwoWay}">
<Image Source="/Assets/FrontCard.png"/>
<TextBox Background="Transparent" BorderBrush="Transparent" TextWrapping="Wrap" Height="170" Width="280" Text="{Binding CardBackSide, Mode=TwoWay}" TextAlignment="Center" />
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
</Grid>
<Grid.Resources>
<Storyboard x:Name="flipTo" >
<PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardFront">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardFront">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardBack">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="flipFrom">
<PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardFront" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardFront" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardBack">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardFront">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
</Grid>
<StackPanel>
<Button toolkit:TiltEffect.IsTiltEnabled="True" BorderThickness="0" Click="DeleteCard_Click" Style="{StaticResource ButtonPressedTransparent}">
<Image Source="/Assets/AppBarButtons/delete.png"/>
</Button>
<Button toolkit:TiltEffect.SuppressTilt="True" BorderThickness="0" Click="FlipCard_Click" Style="{StaticResource ButtonPressedTransparent}">
<Image Source="/Assets/AppBarButtons/refresh.png"/>
</Button>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
<phone:LongListSelector.ListFooterTemplate>
<DataTemplate>
<Button Content="Add new card" Width="200" Click="AddNewCard_Click"/>
</DataTemplate>
</phone:LongListSelector.ListFooterTemplate>
</phone:LongListSelector>
So, here's the animation that turns over the grid with image and the textbox on it.
Code behind
private void FlipCard_Click(object sender, RoutedEventArgs e)
{
var temp = sender as Button;
StackPanel stp = (StackPanel)temp.Parent;
StackPanel stp1 = (StackPanel)stp.Parent;
Grid all = (Grid)stp1.Children[0];
Grid cardBack = (Grid)all.Children[0];
Grid cardFront = (Grid)all.Children[1];
if (cardBack.Visibility == Visibility.Visible)
{
Storyboard sb = all.Resources["flipTo"] as Storyboard;
sb.Begin();
cardBack.Visibility = Visibility.Collapsed;
cardFront.Visibility = Visibility.Visible;
}
else
{
Storyboard sb = all.Resources["flipFrom"] as Storyboard;
sb.Begin();
cardBack.Visibility = Visibility.Visible;
cardFront.Visibility = Visibility.Collapsed;
}
}
But whenever I rotate two elements (or more (I use two elements while testing)) to different sides, I face the next problem: When the longlistselector opens up again, objects vanish from the screen. I set visibility correctly for all the objects though. Objects may vanish both as well as one , even if I don't touch the object, the same picture comes up when I add a new object: If I've turned over the previous one, the next one appears empty, like visibility property for both grids is set 'collapsed'. It's not, though.
I'm sorry, but i cant post images yet.

UserControl and Canvas - Vector Animation

I want to do a usercontrol, that show and hide (visible & collapsed) a vector object in my project. For that a got a canvas element in my grid.
And truing to make an animation of 2 object Layer1 and Layer2.
<UserControl.Resources>
<Storyboard x:Key="ProgressAnimation" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer1" Storyboard.TargetProperty="Visibility">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="Visible"/>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer2" Storyboard.TargetProperty="Visibility">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:02" Value="Visible"/>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Next I make a trigger :
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="ProgressAnimationBeginStoryboard" Storyboard="{StaticResource ProgressAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
And insert my element in to Grid :
<Grid>
<Canvas x:Name="Layer1" Margin="74,112,78,40" Visibility="Collapsed">
<Path Data="########" Fill="#FF00FF99" Height="148.219" Canvas.Left="0" Canvas.Top="0" Width="147.623"/>
</Canvas>
<Canvas x:Name="Layer2" Margin="74,113,79,40" Visibility="Collapsed">
<Path Data="########" Fill="#FF00FF99" Height="147.36" Canvas.Left="0" Canvas.Top="0" Width="147.243"/>
</Canvas>
</Grid>
In MainForm insert that code to XAML :
<Grid>
<control:LoadingForm HorizontalAlignment="Center" VerticalAlignment="Center" Height="298" Width="304"/>
</Grid>
And that not work properly - got that error :
Error 1 The animation(s) applied to the 'Visibility' property calculate a current value of 'Visible', which is not a valid value for the property. J:\Projects\LoadingPj\LoadingPj\MainWindow.xaml 1 2 LoadingPj
Who can help me to understand my problem?
Thx.

Try to specify Visibility.Visible value explicitly:
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}" />
Seems like it was treated as a string value.

A different view for Snapped state (Metro app)

I have a simple app I'm making and I am having a little trouble with the different states (Full, Snapped, etc).
Below, is how my app looks in landscape, full screen view. As you can see, it has 2 grids. One left aligned, and 1 right aligned:
Now, when the user snaps my app to the left or right, I want only the second grid (on the right: Grid TWO) to be visible in snapped mode, like this:
How can we achieve this?
I have tried several things but my current code doesn't work either. I know it's wrong but here it is anyway:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Grid.Row="1" Margin="120, 30, 0, 0" HorizontalAlignment="Stretch">
<ListBox x:Name="theList" HorizontalAlignment="Left" Width="240" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem Content="{Binding Name, Mode=TwoWay}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox x:Name="theNote" Text="{Binding ElementName=theList, Path=SelectedItem.Content, Mode=TwoWay}" AcceptsReturn="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="245,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

you need the following:
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
You'll see that we're setting Grid1 to be hidden and Grid2 to be of a specific width. This will happen when the page is moved to "Snapped" state.

try to add this in the visualstate = 'snapped'
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOne" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

The second grid in your code snippet has a left margin of 120 pixels. The text inside it has a left margin of 245 pixels, to place it to the right of the list. Margins on nested objects will be additive, so the effective left margin for the text is 365 pixels (not even considering what else it's nested in). Unless you are also changing these margin values when the page is placed in snapped view, the text will be too far to the right to see. (Recall that snapped view is only 320 pixels wide!)
Here is a very simplified example of two grids on the page. Note that Grid2 has a large left margin to place it on the right of Grid1. The textboxes inside the grids have NO left margin.
<Grid x:Name="Grid1" Grid.Row="1" Margin="120,30,0,0" Width="240" HorizontalAlignment="Left">
<TextBox x:Name="theFirstNote" Text="This is grid 1." AcceptsReturn="True" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
<Grid x:Name="Grid2" Grid.Row="1" Grid.Column="1" Margin="370,30,0,0" HorizontalAlignment="Stretch">
<TextBox x:Name="theSecondNote" Text="This is grid 2." AcceptsReturn="True" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
When the VisualState changes to Snapped, not only do we have to change the visibility of Grid1, but we also have to change the margin of Grid2 so it's actually visible:
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid2" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="10,10,10,10"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>