Blog garden client (Universal App) Development essay, universalapp

Blog garden client (Universal App) Development essay, universalapp
Preface

Almost all mobile apps provide users with a set Page (Setting Page or Preference Page) to meet the public demands of an App. Although there is a saying that the best App does not need to be set, the best option is to present everything to the user by default. However, for most developers, such a realm cannot be simply achieved; and for some "setting control" users, it seems that there is nothing missing when no page is set. Therefore, for most apps, setting pages is a must.

This article will introduce the interface design of the settings page for Windows and Windows Phone respectively, and finally introduce the unified implementation and data storage of their background.

Setting Interface Design for Windows apps

In a Windows App, the page entry is unified in the charm bar. You can call up the charm bar by swiping your finger from the right of the touch screen or by swiping the mouse from the lower right corner of the screen, then go to the default settings page.

<StackPanel Style = "{StaticResource SettingsFlyoutSectionStyle}"> <TextBlock Text = "read Settings" Style = "{StaticResource TitleTextBlockStyle}"/> <TextBlock Margin = "0, 0, "Text =" in the read Settings section, you can set all reading-related settings "Style =" {StaticResource BodyTextBlockStyle} "/> <ToggleSwitch Margin ="-6, 0, 0, 0 "x: name = "ReadingModeToggle" Header = "reading mode" HorizontalAlignment = "Left" HorizontalContentAlignment = "Left" OffContent = "Daytime mode" OnContent = "nighttime mode" Toggled = "Daytime"/> </StackPanel>

In this way, a simple SettingFlyout page is implemented. So how to call up this page in the App? Add the following code to the App. xaml. cs file:

#if WINDOWS_APPusing Windows.UI.ApplicationSettings;#endif

Add the following in the OnLaunched method:

# If WINDOWS_APP SettingsPane. getForCurrentView (). commandsRequested + = (s, args) => {Add an About command to the settings pane var preference = new SettingsCommand ("set", "set", (handler) => new PreferenceSettingsFlyout (). show (); args. request. applicationCommands. add (preference) ;};# endif

In this way, when you open the application, we add the option column in the Setting Pane on the right, and you can open it for Setting.

Toggled = "ReadingModeToggle_Toggled" calls the specific implementation method of the background. The relevant content of this part will be mentioned later.

About (About)

On the (About) page, you can place information About the App and the author's contact information. The specific implementation is similar to the Option/Preference page.

Privacy Statement)

This item is special. All apps that have applied for network permissions, including internetClient, internetClientServer, and privateNetworkClientServer permissions, must provide a privacy statement. Developers can create a special page on their own websites or blogs to place the app's privacy statement, and provide a redirection entry in the settings column, this ensures that the App is reviewed when it is submitted.

As you only need to jump to the link, the implementation of the privacy statement is relatively simple. First, add the following content in the OnLaunched method of App. xaml. cs:

# If WINDOWS_APP var privacy = new SettingsCommand ("privacy statement", "privacy statement", GetPrivacyPolicyAsync); args. Request. ApplicationCommands. Add (privacy); # endif

Provide an entry to the privacy statement and add the following methods to App. xaml. cs:

#if WINDOWS_APP        private async void GetPrivacyPolicyAsync(Windows.UI.Popups.IUICommand command)        {            await Windows.System.Launcher.LaunchUriAsync(new Uri("http://www.microsoft.com/privacystatement/zh-cn/core/default.aspx"));        }#endif

That is, it can be implemented. Replace the URL with the privacy statement address suitable for the App.

 

Setting Interface Design for Windows Phone App

Windows Phone App and Windows App have two differences in setting the interface:

1. Windows Phone does not provide a unified setting portal.

2. The Windows Phone App does not require a mandatory privacy statement.

Therefore, developers need to provide their own portal and page for the setting interface. Take the UAP Windows Phone version in the blog Park as an example. First, we add SettingPage. xaml to the project.

<Effecx: Name = "effect_main" SelectionChanged = "effect_selectionchanged"> <effectitem Margin = "0" Tag = "setting"> <effectitem. header> <TextBlock Style = "{StaticResource effecttitlefont}" Text = ""/> </effectitem. header> <StackPanel Orientation = "Vertical" Margin = "20"> <ToggleSwitch Header = "blog title/abstract" OffContent = "show only title" OnContent = "show title and abstract" isOn = "{Binding DefaultDisplaySummary, mode = TwoWay} "/> <TextBlock Text =" (click New) "Foreground =" {ThemeResource CNBlogsAttributionColor} "FontSize =" 14 "Margin =" 0,-5, 0, 10 "/> <ToggleSwitch Header =" when you click the blog title "OffContent =" read body "OnContent =" show/hide abstract "IsOn =" {Binding ClickTitleForSummary, mode = TwoWay} "/> <TextBlock Text =" (refresh takes effect) "Foreground =" {ThemeResource CNBlogsAttributionColor} "FontSize =" 14 "Margin =" 0,-5, 0, 10 "/> </StackPanel> </shorttitem> <shorttitem Margin =" 0 "Tag =" about "> <shorttite M. header> <TextBlock Style = "{StaticResource effecttitlefont}" Text = "about"/> </effectitem. header> <StackPanel Margin = "20" HorizontalAlignment = "Center"> <Image x: name = "image_Logo" Height = "100" Margin = "" Source = "ms-appx: // Assets/Logo.100.Blue.png" Opacity = "0"> <Image. projection> <PlaneProjection/> </Image. projection> </Image> <StackPanel x: Name = "sp_aboutContent" Opacity = "0"> <TextBlock Margin = "0, 1 0 "HorizontalAlignment =" Center "Style =" {StaticResource SettingPageTextHeader} "Text =" "/> <TextBlock Margin =" "HorizontalAlignment =" Center "Style =" {StaticResource settingPageTextHeader} "Text =" Windows Phone client "/> <TextBlock HorizontalAlignment =" Center "FontSize =" 14 "Style =" {StaticResource SettingPageTextHeader} "Text =" Powered By Microsoft "/> "/> <TextBlock x: name = "tbkVersion" Text = "1.0" Hori ZontalAlignment = "Center" FontSize = "14" Style = "{StaticResource SettingPageTextHeader}"/> <HyperlinkButton x: Name = "btn_RateMe" Margin = "0, 40, 0, 10 "Content =" Give praise "Style =" {StaticResource SettingPageHyperlinkButtonText} "HorizontalAlignment =" Center "Click =" btn_RateMe_Click "/> <TextBlock Margin =" 30 "FontSize =" 14 "FontFamily =" Segoe WP "TextWrapping =" Wrap "Foreground =" {ThemeResource CNBlogsSummaryColor} "> <Run Text = "This is a sample application of the Universal App. It is developed using the WindowsRT SDK and supports Windows Phone 8.1. "/> <Run Text =" another application with the same name is also published on Windows 8.1. The two share a set of underlying code. "/> </TextBlock> </StackPanel> </javastitem>

Through the above Code framework to implement settings and content filling on the page, you can easily set the page effect.

Var uri = new Uri (string. Format ("ms-windows-store: navigate? Appid = {0} ", urrentApp. AppId); await Windows. System. Launcher. launchiliasync (uri );

The above version number can also be read from Package. appxmanifest using code:

<Identity Name="36385XiaowuHu.100280B26F648" Publisher="CN=60BC9EB8-6EF8-44C4-817C-FCE25D428B9B" Version="1.0.0.18" />

 

In the blog Al App, the entry to the settings page for Windows Phone is defined in the BottomAppBar.

<AppBarButton x: Name = "btn_Setting" Label = "set" Icon = "Setting" Click = "btn_Setting_Click"/>

Button. This is also the portal for setting pages for most Windows Phone apps.

<CommandBar. SecondaryCommands> <AppBarButton x: Name = "btnAbout" Label = "about this application" Click = "btnAbout_Click"/> </CommandBar. SecondaryCommands>

Private void btnLogon_Click (object sender, RoutedEventArgs e) {this. frame. navigate (typeof (SettingsPage), new DataModel. settingNavigationParameter () {targetparameter = target1_titemname. about, targetCss = 0 });}

You can directly jump to the corresponding page. In this way, in addition to the unified setting portal, you can add different shortcut portals to adapt to different pages on different pages, so that you can quickly find the corresponding setting options based on the current page. This is a good practical experience and user experience, that is, different settings are provided in different contexts. For example, in Reading Page, you can provide the "Set Font size" menu to enter the Setting Page; on the Write Comment Page, you can provide the "login" menu to enter the Setting Page.

Set page background implementation and data storage

All page setting operations, such as dragging ToggleButton and clicking Button, can be performed by entering the event method provided by the control. After setting, how does one save user settings so that each time a user opens an App, the last saved settings are applied?

In apps, the commonly used methods of saving data include XML serialization and Setting fields. The former is mainly used to save structured data and to save simple settings of data, we used the latter in the blog garden application.

In the namespace of CNBlogs. DataHelper. DataModel, we add Setting. cs to define the configuration data. For example, in the nighttime mode, add the following definitions to this class:

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using Windows.Storage;namespace CNBlogs.DataHelper.DataModel{    public sealed class CNBlogSettings : DataModelBase    {        private ApplicationDataContainer settings = Windows.Storage.ApplicationData.Current.LocalSettings;        const string SettingKey_NightModeTheme = "cnblog_night_mode_theme";        public bool NightModeTheme        {            get            {                var obj = this.settings.Values[SettingKey_NightModeTheme];                return obj == null ? false : (bool)obj;            }            set            {                this.settings.Values[SettingKey_NightModeTheme] = value;                base.OnPropertyChanged("NightModeTheme");            }        }    }}

The local storage of the simple field "NightModeTheme" is realized. To maintain consistency, you can also design the Setting class as a singleton mode.

In this way, in the event method provided by ToggleButton, we can modify the NightModeTheme field, and the Setting class will be responsible for reading and saving the content of this field.

Of course, can I modify the Setting field without using the C # code? Of course. Data Binding in XAML provides a more elegant solution. We only need to add the attribute "{Binding NightModeTheme, Mode = TwoWay}" in The XAML definition of ToggleButton corresponding to the night Mode, then you can bind the ToggleButton status to the value of the maid heme in the Setting class. Of course, what operations are performed based on the value of the NightModeTheme? For example, if you want to change the theme status in the night mode, you still need to implement the background code.

Summary

This article introduces the simple design of the Windows App and Windows Phone App settings interface, and provides the basic implementation of background code and data storage. With these features, the Universal App can have a page that looks like a decent setting. As for how to design a more user-friendly and "advanced" design interface, developers need to work hard to achieve it. For example, on the interface in our blog garden client, we have implemented a small animation that exceeds the user's expectation. Welcome to the discussion.

 

You can download the source code from here:

Https://code.msdn.microsoft.com/CNBlogs-Client-Universal-9c9692d1

Of course, you can download two apps directly to see the effect, but because the designer is involved late, the UI still needs to be improved, and we will continue to update the App.

Windows Phone Store App link:

Bytes

Windows Store App link:

Http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

There are no advertisements in a pure and clean App. Please feel free to use them.

Share code and change the world!

MSDN official documentation:

Quickstart: Add app settings (XAML)

Http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx

Guidelines for app settings

Http://msdn.microsoft.com/en-us/library/windows/apps/hh770544.aspx

Adding app settings (XAML)

Http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh770543.aspx

App certification requirements for the Windows Store

Http://msdn.microsoft.com/en-us/library/windows/apps/hh694083.aspx

Loading and saving settings

Http://msdn.microsoft.com/en-us/library/windows/apps/dn263230.aspx