When the screen's orientation changes I call this:
string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();
// Trigger the Visual State Manager
bool success = VisualStateManager.GoToState(this, CurrentViewState, true);
In my XAML there is a simple GRID (deep in the page's hierarchy)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle x:Name="rect_1" Grid.Column="0" Fill="Blue"></Rectangle>
<Rectangle x:Name="rect_2" Grid.Column="1" Fill="Red"></Rectangle>
<Rectangle x:Name="rect_3" Grid.Column="2" Fill="Green"></Rectangle>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="rect_1"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Brown"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="rect_1"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
So it is 3 simple rectangles, but their colour never changes. All this is taken straight from the tutorial here:http://msdn.microsoft.com/en-us/library/windows/apps/dn495655.aspx The only difference is that my Grid is not the top element of the Page.
The problem might be that the first parameter of
VisualStateManager.GoToState(this, CurrentViewState, true);
is "this". But I have no clue what it should be, setting it to the grid or one of the rectangles is not allowed.
IList<VisualStateGroup> visualStateGroups = VisualStateManager.GetVisualStateGroups(this);
int count= visualStateGroups.Count;
count is 0.
I found out: VisualStateManager has to be the direct child of the direct child of Page.
<Page>
<Grid>
<VisualStateManager...>
</VisualStateManager...>
<!-- deep in the hierarchy somewhere -->
<Grid>
<Rectangle/>
<Rectangle/>
<Rectangle/>
</Grid>
</Grid>
</Page>
I tried adding it as the direct child of Page, but didn't work. I don't get at all what the logic is behind this.
Related
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.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like to ask how to implement the UI change based on the button click. At below screenshots shown 1,2,3 are the toggle buttons.
When user click button 1, then it will display Form B UI.
When user click button 2, it will display image.
Run this xaml code separately and try.
<Border Width="500" Height="400" BorderThickness="1" BorderBrush="Black">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="70"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.ColumnSpan="6" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormA" Text="Form A" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Top"></TextBlock>
<Border Name="FormBBoder" Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="1" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormB" Text="Form B" Grid.Column="1" Grid.Row="1" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<Border Name="FormCBoder" Grid.Column="0" Grid.Row="2" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,1,0"></Border>
<TextBlock Text="Form C" Name="FormC" Visibility="Collapsed" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<ToggleButton Content="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Column)" From="0" To="1" Duration="0:0:0" ></Int32Animation>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Row)" From="0" To="2" Duration="0:0:0" ></Int32Animation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="2" Grid.Column="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="3" Grid.Column="2">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
Result
Create a form with all the elements. Set visibility on the image and form b to collapsed. On button 1 create an event that changes form b visibility to visible. On button 2 create an event that changes image visibility to visible.
A simple example:
Code in xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<TextBlock Text="1st element" HorizontalAlignment="Center"></TextBlock>
<TextBlock x:Name="hiddenElement" Visibility="Collapsed" Text="hiddenElement" HorizontalAlignment="Center"></TextBlock>
<Button x:Name="btn" Content="Show 2nd element" Click="btn_Click"/>
</StackPanel>
</Window>
Code behind
private void btn_Click(object sender, RoutedEventArgs e)
{
hiddenElement.Visibility = Visibility.Visible;
}
This should give you a basic idea of what to do.
Use a TabControl
<TabControl>
<TabItem Header="1">
<!-- your content (Form A) here -->
</TabItem>
<TabItem Header="2">
<!-- your content (Form A,B) here -->
</TabItem>
<TabItem Header="1">
<!-- your content (Form A,B and image) here -->
</TabItem>
</TabControl>
Using the WPF TabControl
The WPF TabControl allows you to split your interface up into different areas, each accessible by clicking on the tab header, usually positioned at the top of the control.
WPF TabControl
I'm writing Windows Store app using C#/VS2013
When I modify a button image style to create an effect when the mouse pointer is over the button, I use the following:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image Source="/button_enabled.png" x:Name="Image" Height="50" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="/button_enabled.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="/button_over.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="/button_click.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This works perfectly fine when I'm using a mouse to navigate the cursor.
However, when I use the touch screen to tap the button (instead of using a mouse to click the button), it ALWAYS requires 2 separate clicks to register an action.
If I remove the PointerOver section, then everything works fine (both mouse clicking and touching/tapping), but I lose the mouse-over effect when using a mouse.
Anyone has ideas on why this is happening? Is this a bug in the PointerOver attribute?
Update
This is how the buttons are instantiated:
<Grid Grid.Column="1">
<Button Style="{StaticResource ButtonStyle}" Tag="Style1" HorizontalAlignment="Right" Margin="10,0,10,0" Click="Btn_Click" PointerReleased="Btn_Released" IsEnabled="True"/>
</Grid>
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>
I have a very simple xaml: (I only added a button to the basic app template)
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App1.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:common="using:App1.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">My Application</x:String>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- 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>
<!-- HERE IS THE BUTTON-->
<Button Opacity="0" Margin="110,153,0,169" Grid.Row="1" Height="306" Width="476"/>
<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>
</Grid>
</common:LayoutAwarePage>
My problem is that, although I've set the opacity of the button to 0, it is visible during the short animation when my app opens.
How can I make it invisible while the page is opening?
Sir, you need to use Visibility and set it to Collapsed
So,
<Button Visibility="Collapsed" Opacity="0" Margin="110,153,0,169" Grid.Row="1" Height="306" Width="476"/>
according to MSDN