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
Related
I am developing a universal Windows 10 app. I want to customize a textbox to remove its default border hover and background.
My problem is that I do not know how to customize on the Universal Windows Platform.
Here is the code that I am using:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!--layoutroot where all page content is placed-->
<Grid x:Name="layoutRoot" Background="#1BA1E2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="12,0,12,0">
<!--Title Page-->
<TextBlock Text="Login Here" Foreground="White" FontSize="40" Padding="60,80,60,80"/>
<!--username-->
<Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
<TextBox PlaceholderText="Username" Name="Username" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Username_GotFocus"/>
</Border>
<!--Password-->
<Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
<TextBox PlaceholderText="Password" Name="Password" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Password_GotFocus"/>
</Border>
<!--Button login-->
<Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
<TextBlock Text="Log In" Foreground="White" Margin="0" Padding="200,5,0,5"/>
</Border>
</StackPanel><!--end StackPanel-->
</Grid><!--end Grid layoutRoot-->
</Grid>
Here is a screenshot of my UI problem:
When I put the mouse pointer over a textbox, it changes the border and the background.
To customize TextBox, we can edit TextBox styles and templates.
Firstly, we can open "Document Outline" in Visual Studio by open "View" → "Other Windows" → "Document Outline".
Then in "Document Outline" select the TextBox we want to modify, for example, select "Username" and right click, then select "Edit Template" → "Edit a Copy...".
This will popup a "Create Style Resource" dialog. And by default it will generate the default style under Page.Resources like:
<Page.Resources>
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
...
</Style>
</Page.Resources>
After this we can edit the style and template to achieve what we want.
The hover style is defined in "PointerOver" VisualState.
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
To remove its default border and background, we can just delete the animation target BorderBrush and Background like:
<VisualState x:Name="PointerOver">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
And the "Focused" VisualState is the same.
Besides, form the default template, you can find TextBox has already had a Border in it.
<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/>
So we can just add CornerRadius="10" in this Border:
<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" `CornerRadius="10"`/>
And then use this new style in TextBox without additional Border like:
<StackPanel Grid.Row="0" Margin="12,0,12,0">
<!-- Title Page -->
<TextBlock FontSize="40" Foreground="White" Padding="60,80,60,80" Text="Login Here" />
<!-- username -->
<TextBox Name="Username" Margin="5" Background="Transparent" BorderBrush="White" GotFocus="Username_GotFocus" PlaceholderText="Username" Style="{StaticResource TextBoxStyle1}" />
...
</StackPanel>
If you want to apply this style to all TextBoxs in the Page, you can remove x:Key="TextBoxStyle1" in the Style and don't set the Style property of TextBox:
<Page.Resources>
<Style TargetType="TextBox">
...
</Style>
</Page.Resources>
With this, the style will apply to all TextBoxs in the Page automatically.
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.
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 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 made a user control to expand on click and there are 7 of them in a grid with columns. When i click on the last one it goes out of the screen. I want to animate that if it expands then it should move to grid.column 1 and then when it collapse it goes back to its own grid.
Code:
<Grid x:Name="GrdVwSearchResults" Grid.Row="2" Margin="120,70,0,0" >
<Grid.Resources>
<Storyboard x:Name="moveBackAnimation" >
<DoubleAnimation x:Name="moveBackDoubleAnimation" EnableDependentAnimation="True" Storyboard.TargetName="usrFlight5" Storyboard.TargetProperty="Col" From="4" To="1" Duration="0:0:0.5"/>
</Storyboard>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight2" Grid.Column="1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight3" Grid.Column="2" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight4" Grid.Column="3" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight5" Grid.Column="4" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight6" Grid.Column="5" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
<usercontrol:Top3SearchResultDisplay x:Name="usrFlight7" Grid.Column="6" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
</Grid>
I'm not sure how you're using this, but here is an animation that would provide a "popup" look and feel to the object.
<Storyboard x:Name="PopupFlight">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="usrFlight7">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>7</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="usrFlight7">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="500"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="usrFlight7">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>10</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="usrFlight7">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>3</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
If you want to animate changes of an element's row or column in a Grid, the best way is to use the VisualStateManager. You can enable FluidLayout to animate layout changes such as row, grid, etc. This can be done very easily in Expression Blend.
Here's a brief example of the XAML of a Grid with 6 columns with a button in the last column, which will animate to the first column when you click it. For more advanced state changes you probably want to change the state in code, but this is using a behavior to change the state in XAML:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
x:Class="TestingWPF.MainWindow"
Title="MainWindow"
Height="350"
Width="525">
<Grid x:Name="LayoutRoot">
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Default"/>
<VisualState x:Name="Expanded">
<Storyboard>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="button">
<EasingInt32KeyFrame KeyTime="0" Value="0"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="button" Content="Button" Grid.Column="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Expanded"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</Window>