Use Windows 8 to develop Metro-style applications 6

Next, let's start the development of our Metro-style applications.

----------------------------------- I am a gorgeous split line -----------------------------------------

21. Add application bar
 
A) Some navigation in the blog reader application occurs when a user selects a project in the UI. However, on the split page, we must provide a way for users to go to the detailed information view of blog articles.
We can place a button somewhere on the page, but this will affect the core application experience, that is, reading. Instead, we put the button in the application column. The application column is displayed only when the user needs it.
The application bar is a part of the UI. By default, it is hidden. You can display or hide the screen bar when you sweep from the edge of the screen or interact with the application.
It can display navigation, commands, and tools to users. The application bar can be displayed at the top and bottom of the page, or at the top and bottom of the page.
I suggest you place the navigation in the top application bar and tools and commands in the bottom application bar.
 
B) to add an application bar in XAML, We need to specify An appbar control to the topappbar or bottomappbar attribute of the page.
We will add a top application bar, which contains a button to navigate to the details page. The standardstyles. XAML file contains various application bar button styles for common scenarios.
We will use these styles as a guide for creating button styles. We place the style in the page. Resources Section of splitpage. XAML,
The Code is as follows:

View code

<Page. Resources> <! -- Set of items displayed on this page --> <collectionviewsource X: Name = "itemsviewsource" Source = "{binding items}"/> <style X: key = "webviewappbarbuttonstyle" targettype = "button" basedon = "{staticresource appbarbuttonstyle}"> <setter property = "automationproperties. automationid "value =" webviewappbarbutton "/> <setter property =" automationproperties. name "value =" view web page "/> <setter property =" content "value =" & # xe12b; "/> </style> </page. resources> <page. topappbar> <AppBar padding = "10, 0, 10, 0 "> <grid> <button click =" viewdetail_click "horizontalalignment =" right "style =" {staticresource webviewappbarbuttonstyle} "/> </GRID> </AppBar> </page. topappbar>

C) You can set issticky and isopen attributes to control how and when the application bar is displayed and disappears.
You can also open or hide application columns by handling opened and closed event responses.
To navigate the details page, modify splitpage. XAML. CS:

View code

private void ViewDetail_Click(object sender, RoutedEventArgs e)        {            FeedItem selectedItem = this.itemListView.SelectedItem as FeedItem;            if (selectedItem != null && this.Frame != null)            {                this.Frame.Navigate(typeof(DetailPage), selectedItem);            }        }

D) view results:

 

Click the red area to display the details page:

 

22. Add animations and Transitions
 
A) in XAML, animation is basically just a way to change the attribute value of an object. In our blog reader application, we use animations to make the UI fit in different la S and directions.
We will discuss this in the next part, but first, we need to understand how animation works.
To use an animation, we need to place it in a storyboard. When the storyboard is running, the attributes change according to the animation requirements.
Storyboard can contain one or more animations. Each animation specifies a target object, the attributes to be modified on the object, and the new values of the attributes.
In our blog reader application, we have a listview named itemlistview.
The following is an animation that changes the visibility attribute of itemlistview to visible when the storyboard is running. The Code is as follows:

View code

  <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="itemListView" Storyboard.TargetProperty="Visibility">                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>                        </ObjectAnimationUsingKeyFrames>                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>                        </ObjectAnimationUsingKeyFrames>                    </Storyboard>

B) add a subject animation.
Windows 8 uses animations and transitions to improve the UI experience. We want to share the same experience in the application to conform to the Windows 8 style.
Fortunately, we can use built-in theme animations and theme transitions in applications to match theme animations and theme transitions in Windows 8.
You can find them in the windows. UI. XAML. Media. animation namespace.
A theme animation is a predefined animation. We can place it in a storyboard.
Popinthemeanimation slides the Web View from right to left during page loading. Adding the value of the fromhorizontaloffset attribute will improve the effect.
Here, we put popinthemeanimation into the storyboard and make it a resource in detailpage. XAML.
Because the return buttons and titles are in the same position on each page, we do not need to include them,
So we set the animation target to the border around our web content. In this way, border and all the content in it will be animated.
The Code is as follows:

View code

<Page. Resources> <! -- Set of items displayed on this page --> <collectionviewsource X: Name = "itemsviewsource" Source = "{binding}"/> <storyboard X: name = "popinstoryboard"> <popinthemeanimation storyboard. targetname = "contentviewborder" fromhorizontaloffset = "400"/> </storyboard> </page. resources>

On the code hiding page, we start storyboard in the onnavigatedto method, so that when you navigate to the details page, you can apply the bullet animation to border.
The updated onnavigatedto code is as follows:

View code

    protected override void OnNavigatedTo(NavigationEventArgs e)        {            Storyboard sb = this.FindName("PopInStoryboard") as Storyboard;            if (sb!=null)            {                sb.Begin();            }            // Add this code to navigate the web view to the selected blog post.            FeedItem feedItem = e.Parameter as FeedItem;            if (feedItem != null)            {                this.contentView.Navigate(feedItem.Link);                this.DataContext = feedItem;            }        }

The result is: the blue border is moved from left to right, and finally displayed.

C) to use a theme animation, we still have to put it into a storyboard, and then control the storyboard when a specific event occurs.
Sometimes, we can use theme transition to set animations for UI elements. The topic transition is a complete animation set,
Or a storyboard that can be attached to a pre-encapsulated behavior of the UI element. Here,
We use contentthemetransition to set an animation for the title text of a blog article in splitpage. XAML.
Contentthemetransition is used with contentcontrol, and is automatically triggered when the control content is changed.
The Code is as follows:

View code

     <Grid x:Name="itemDetailGrid" >                <Grid.RowDefinitions>                    <RowDefinition Height="Auto"/>                    <RowDefinition Height="*"/>                </Grid.RowDefinitions>                <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextStyle}">                    <TextBlock.Transitions>                        <TransitionCollection>                            <ContentThemeTransition/>                        </TransitionCollection>                    </TextBlock.Transitions>                </TextBlock>                <Border x:Name="contentViewBorder" BorderBrush="Gray" BorderThickness="2"                         Grid.Row="1" Margin="0,15,0,20">                    <Grid>                        <WebView x:Name="contentView" />                        <Rectangle x:Name="contentViewRect" />                    </Grid>                </Border>            </Grid>

We add contentthemetransition to the transitioncollection, and then set the latter to the transitions attribute value of textblock.
When the content of textblock is changed, contentthemetransition is automatically triggered and run. The animation is predefined and can be run without any operation.
We only need to attach it to textblock.

To be continued, please wait...

 

Reprinted please indicate the source: http://www.cnblogs.com/refactor/