Windows 8 Metro App development [4] pop-up screen (Flayouts)

1. Create a custom control

To make the code easy to manage, I define the pop-up screen as a custom control. That is, it contains a xaml file and related code files. Shows how to create a custom control:

Select the user control and enter a name.

Is the created image

I saved the control file SearchFlayout IN THE Flayouts folder.

Add the following code to the xaml file:

 

<UserControl x: Class = "DevDiv_AppBar.Flayouts.SearchFlayout" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: local = "using: DevDiv_AppBar.Flayouts" xmlns: d = "http://schemas.microsoft.com/expression/blend/2008" xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc: Ignorable = "d" d: DesignHeight = "300" d: DesignWidth = "400"> <Grid> <Popup x: name = "SearchPopup" IsLightDismissEnabled = "True" Width = "350" Height = "130"> <StackPanel Background = "Black"> <Border Background = "# 85bd" BorderThickness =" 4 "> <StackPanel Orientation =" Horizontal "Margin =" 10 "> <TextBlock Text =" Enter the search content: "VerticalAlignment =" Center "Margin =" 0, 0, 150 "/> <TextBox Name =" searchDataBox "Height =" 40 "Width =" "FontSize =" 20 "/> </StackPanel> <Button Click =" SearchButtonClick "HorizontalAlignment = "Center" Margin = "10"> Search </Button> </StackPanel> </Border> </StackPanel> </Popup> </Grid> </UserControl>

 

In the code, you must note that the attribute IsLightDismissEnabled = "True" of Popup ". This indicates whether the pop-up screen disappears when you click or touch any position on the screen, excluding the position of Popup. When Popup is used as a pop-up screen, this attribute must be set to True, because this is in line with the basic pop-up screen (flyout) user experience.

As shown in, we can also see what the custom control looks like in the designer
In the above Code, note that the Popup control must be used to create a pop-up screen. The content in the Popup control depends on your needs. I used TextBlock, TextBox, And Button controls here. Of course, there is also a StackPanel container control.

In this way, the xaml file is basically finished. Next, we will write the C # code of the control.

2. Write custom control code
Here, the custom control mainly implements two functions: the display control itself and the user interaction operations provided by the response control. You can see the following two function Show methods are mainly used to display the display. SearchButtonClick is a search button event in a custom control.
Note: There is a line of code in the Show method, which is used to calculate the position to be displayed on the current pop-up screen, it will be explained later (because Microsoft does not provide a good method to obtain the display location in the current version, you need to calculate it by yourself. I hope this problem can be solved after the official version of windows 8 is released)
FlyoutHelper. ShowRelativeToAppBar (SearchPopup, page, appbar, button );

 

public void Show(Page page, AppBar appbar, Button button)  {      SearchPopup.IsOpen = true;                 FlyoutHelper.ShowRelativeToAppBar(SearchPopup, page, appbar, button);  } private void SearchButtonClick(object sender, RoutedEventArgs e)   {      SearchPopup.IsOpen = false;  } 

3. Locate the pop-up control (screen)
Here I created a FlyoutHelper class, which defines a static method ShowRelativeToAppBar. This method calculates the correct position of the Popup displayed on the related buttons. In this way, you need to input the Popup control, the Page containing the AppBar, The AppBar control, and the clicked button. This method is not good, but it is the only method I found that can obtain the exact position of flyout. The Code is as follows:

namespace DevDiv_AppBar.Flayouts{    class FlyoutHelper    {        public static void ShowRelativeToAppBar(Popup popup, Page page, AppBar appbar, Button button)        {            Func<UIElement, UIElement, Point> getOffset = delegate(UIElement control1, UIElement control2)            {                return control1.TransformToVisual(control2).TransformPoint(new Point(0, 0));            };            Point popupOffset = getOffset(popup, page);            Point buttonOffset = getOffset(button, page);            popup.HorizontalOffset = buttonOffset.X - popupOffset.X - (popup.ActualWidth / 2) + (button.ActualWidth / 2); popup.VerticalOffset = getOffset(appbar, page).Y - popupOffset.Y - popup.ActualHeight;            if (popupOffset.X + popup.HorizontalOffset + popup.ActualWidth > page.ActualWidth)            {                popup.HorizontalOffset = page.ActualWidth - popupOffset.X - popup.ActualWidth;            }            else if                (popup.HorizontalOffset + popupOffset.X < 0)            {                popup.HorizontalOffset = -popupOffset.X;            }        }    }}

The Code locates the Popup on the top of the corresponding AppBar button. If the Popup disappears from the left or right of the screen, the Popup will be located again, because the code is disgusting, I will not elaborate on it. I hope this problem will be solved after the official version of windows 8 is released.


4. Use the pop-up screen in the program
Add the control you just defined to MainPage. xaml. The Code is as follows.
Add the namespace to using: DevDiv_AppBar.Flayouts to use the control defined in Flayouts.
The following code adds a custom control.
<Flyouts: SearchFlayout x: Name = "SearchFlayout"/>
Although the pop-up screen is not displayed immediately, we also need to declare the custom control as part of the main program layout.

 

<Page    x:Class="DevDiv_AppBar.MainPage"    IsTabStop="false"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:DevDiv_AppBar"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    xmlns:flyouts="using:DevDiv_AppBar.Flayouts"    mc:Ignorable="d">        <Grid Background ="PaleGoldenrod">        <Image HorizontalAlignment="Left" Height="200" Margin="495,215,0,0" VerticalAlignment="Top" Width="295" Source="Assets/icon.png"/>        <flyouts:SearchFlayout x:Name="SearchFlayout"/>    </Grid></Page>

 

5. display the pop-up Screen
Now the code is basically compiled, and the rest of the task is to display the pop-up screen when you click the search button on the AppBar.
I added the following code to MainPage. xaml. cs:
Associate the method with the Click event of the Search button of the AppBar.

 

private void AppBarButtonClick(object sender, RoutedEventArgs e){    if (e.OriginalSource == AppBarSearchButton)    {        SearchFlayout.Show(this, this.BottomAppBar, (Button)e.OriginalSource);    }}

 

Address: broken ship brother; http://www.devdiv.com/_DevDiv%E5%8E%9F%E5%88%9B_Windows_8_Metro_App%E5%BC%80%E5%8F%91%E4%B9%8B%E5%BC%B9%E5%87%BA%E7%94%BB%E9%9D%A2_Flayouts_-thread-130867-1-1.html