4. Compatible with older versions

FDS One of the most common problems is how to communicate with Fall Creators Update Previous versions are compatible , In fact, it's quite simple to do ,ColorfulBox And that's what happened Creators Update And Fall Creators Update Compatibility between .

4.1 Use HamburgerMenu Instead of NavigationView

UWP Community Toolkit Medium HamburgerMenu It's the most common way to make hamburger navigation menu before , Upgrade to 2.0 After the release, it will judge the running Windows edition , If it is Fall Creators Update Load based on NavigationView Of ControlTemplate, Otherwise, load the default ControlTemplate. Control source code is as follows :

if (menu.UseNavigationViewWhenPossible && HamburgerMenu.IsNavigationViewSupported)
{
ResourceDictionary dict = new ResourceDictionary();
dict.Source = new System.Uri("ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/HamburgerMenu/HamburgerMenuNavViewTemplate.xaml");
menu._previousTemplateUsed = menu.Template;
menu.Template = dict["HamburgerMenuNavViewTemplate"] as ControlTemplate;
}

4.2 Conditions of use XAML

Reveal Style only in Fall Creators Update Provided in the , If XAML Used in Reveal style , The project in Fall Creators Update The previous version will report the following error :“Cannot find a Resource with the Name/Key ButtonRevealStyle [Line: 396 Position: 9]””.

It can be used in this case Conditions XAML.

Conditions XAML Provide in XAML Use... In the tag ApiInformation.IsApiContractPresent A way to solve this problem . It is from Creators Update Start offering . To use conditions XAML,Visual Studio The minimum version of the project must be set to build 15063(Creators Update) Or later , And the target version is set to a higher version than the minimum version .

In this case , Can be in XAML Add conditional namespace to :

xmlns:fcu="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,5)"
xmlns:cu="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,5)"

Then use the conditional namespace prefix to set the properties :

<Button fcu:Style="{StaticResource ButtonRevealStyle}"/>

The above paragraph XAML in Style="{StaticResource ButtonRevealStyle}" Only in Fall Creators Update Enter into force , Does not affect previous versions .

4.3 Use version adaptation code

about Creators Update Previous version , have access to ApiInformation class establish Version adaptation code .

if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 5))
{
var frameworkElement = Window.Current.Content as FrameworkElement;
return frameworkElement.ActualTheme;
}
else
{
var frameworkElement = Window.Current.Content as FrameworkElement;
return frameworkElement.RequestedTheme;
}

ApiContract The major version number of is shown in the table below , from RTM From the beginning to the autumn, the new version numbers of the creators are 1 To 5.

5. Other common problems

5.1 Why? Acrylic and Reveal No entry into force

In several cases, these two effects don't work ,AcrylicBrush Become solid and opaque Brush, Applied ButtonRevealStyle The button on the screen becomes a normal button .

  • The computer is low on power , Or it's on “ Power saving mode ”;
  • Run on low end hardware ;
  • stay “ Set up \ Individualization \ Color ” It's closed in “ Transparent effect ” Options .

In addition, there is a common situation : In the inactive Windows 10 On Acrylic and Reveal It's not going to work . About and Windows7 It cannot be turned on when it is not activated Aero equally .

5.2 Misuse Acrylic

Acrylic It's hard to use , Generally speaking Acrylic Should only be used as a background in the menu 、 Pop up mask or Flyout etc. , The background of the main area of the program cannot be used Acrylic. If it is used in the context of the whole application Acrylic, In addition to making the whole application very eye-catching ( And the programmer's self satisfaction ) There's no positive significance outside .

As an exception ,Widget Or lightweight applications can be used in the context of the entire application Acrylic, Like calculator applications .

Don't use it again Acrylic Where to use Accent Color As words Foreground, I can't see clearly .WindowsTemplateStudio I also made a mistake on this point .

5.3 Misuse Reveal

Simply speaking :

  • Should only be used on operational elements Reveal.
  • Do not use on isolated elements Reveal.
  • Do not use on large areas of elements Reveal.
  • Static element ( For example, text and background ) Should not be used Reveal.
  • You shouldn't let Reveal Interfere with important information .

Not in static element 、 Isolated element 、 Use on large area elements Reveal, It's not about performance . Lighting has always been a dream element for designers , It has its application scenarios , It should not lead to misuse UI messy .Reveal The biggest effect is to prompt a group of elements for their operational areas , for example ListView,NavigationView, Or a borderless button on a calculator application . If the whole UI They all use Reveal, On the contrary, it is a kind of interference to important information .

6. How to evaluate Fluent Design System

6.1 In the past

Zune and WP Era , Limited to device performance and screen size , Microsoft proposed MetroUI, Flat design is advocated 、 Remove redundant decorative elements , It's beautiful and easy to use .

Windows8 Time , Microsoft will MetroUI Put it on the table , It's still beautiful , But all kinds of problems emerged immediately :

  • MetroUI Cannot carry complex information , And because of the touch operation , All the elements are designed to be big , Lead to UI It's even more crude .
  • It's very natural and comfortable to operate on the touch screen ( Typical examples are lateral movement ) To the desktop mouse operation has become very awkward .
  • MetroUI It's a very difficult way UI, stay WP There are a lot of amazing applications in this era , But later, in order to increase the number of applications, Microsoft relaxed the verification of a large number of crude applications , It's much lower Metro The evaluation of .
  • Microsoft itself doesn't know how to use it MetroUI, Not to mention improving it .
  • To ensure that the desktop and mobile phones have the same pace , As a result, updates are slow .

These problems have always existed , It's just that there were few applications and few users in the past , And there's no cross device , There is no mandatory use Metro, So the problem is not obvious .Windows8 Let these problems explode at one go , All kinds of mistakes lead to an advanced society UI Slowly falling behind .

But that doesn't stop a lot of imitation MetroUI Desktop applications and websites for , In this respect MetroUI It was a success in itself .

Windows10 Time ,ModernUI Instead of MetroUI. At this time, the mobile phone market has been negligible , Gave up all kinds of things Metro After the characteristics of , Barely put together ModernUI stay Windows10 It works well on the desktop . But there is no characteristic ModernUI There is no one to imitate .

6.2 present situation

Microsoft needs to solve the problem now ModernUI All kinds of problems , He needs a device that can cross the border , sustainable development , Finely crafted , Adapt to a variety of input and output, but also very good-looking UI. Since I put forward FDS It's been a long time ,FDS It's just a wonderful vision , There's no brilliant app , And it's basically just now UWP A shiny skin , It didn't get better , There is a lot of dissatisfaction .

For example, I think Reveal The style of the button is so slow that it doesn't feel soft ,Pressed Animation in slow state , And after the mouse is released, the animation will be done slowly again , It took a few seconds to get back PointerOver state , This makes the whole operation seem unresponsive . The job of a button is to be quick , Only in this way can we give users a pleasant feeling of operation . If you look at this button style alone, it's not as good as ordinary buttons except for dazzling technology , I hope it can be improved in the future .

On the other hand , There are also problems with Microsoft's propaganda , Now a lot of media will continue to work Acrylic succeed in negotiation Aero Return to , Obviously Microsoft changed its name suck. , What's a bad name , Just make such a complicated English .

We have to criticize the renaming department again , Look at the past Lumia、Aero、Metro、Modern, Everyone is easy to read and remember ;Fluent Design System What the hell? .

Documentation ,Material Design There are very detailed specifications 、 Guiding principles , And there are documents for designers , and FDS It's too vague , Documentation is primarily for developers , Various specifications are distributed in UWP In the development document of .

I think for the time being , Before the designers get to know it all , Just behave and use the new one Style、Brush、 Control can make the application look good , Unfortunately, many people now claim to use it FDS In order to show off all kinds of new technology Control、 new Brush、 new Style Use it in a mess and be complacent . Even Microsoft's own applications are not competitive , For example, I used to make complaints about Tucao. Mail application , It has also published news and publicized in a high profile that it has adapted to FDS 了 , As a result, I didn't see much benefit , But I don't deal with a lot of old problems . I remember Windows8 When I first came out, I was very surprised by the official application , Unfortunately, there are a lot of official applications now, even the basic color and alignment are not done well , It's enough to be a negative textbook .

6.3 future

adopt FDS It can be seen from the five themes FDS One of the main purposes of is to link digital content to the real world through devices , It's a good vision . The video at the beginning of the article shows ParallaxView stay MR The effect of running in the network , The effect is much more interesting :

Even if it only runs on the desktop ,FDS It also inspired a lot of creativity . for example These designs :

Compared with that year MetroUI Lack of stamina on the table ,FDS There seems to be a long-term development plan , Although there are still various problems , I believe it will give us more surprises in the future .

7. Conclusion

Last article I promised to write as short as possible , But the topic of this article is a huge one , Even if the long story is short, it won't be much short , So it was published in two parts .

In fact, compared with a variety of new controls, new special effects , I would prefer FDS A large design criterion is given , A rigorous and diverse norm . In recent years Windows No longer strong , It seems that designers suddenly forget how to design on the desktop . Two days ago, I saw one running in the Windows The design of the system on the Internet , The first and second versions of the system remain “ determine 、 Cancel ” Button order for , The latest third edition suddenly became “ Cancel 、 determine ”, Probably because the big guys in the design team have changed in the past two years MacBook, But I usually watch it UI The documents are all Google and Apple Of , Who does Microsoft not show designers UI What about the guidance document ( If not This ancient document Words ).

It was about Metro I also wrote a lot , But it's all deleted . Blogging is to spread new knowledge , I don't want to worry about the dead Metro Cause a war of words . And I'm right FDS There's been a lot of nagging , It's more like a resentful wife if you write down .

I was also keen to use it on the desktop Metro, But right now, right now, right now WPF Upper use FDS No interest . Besides, the topic is discussion UWP Middle amount FDS, I don't really want to be involved WPF. It was mentioned in the comments of the last article FDS Several of these elements are in the WPF The realization of , If you are interested, please refer to .

8. Reference resources

Fluent Design System

Fluent Design System for UWP apps

Reveal highlight

Acrylic material

Connected animation

ParallaxView

Navigation view

Conditional XAML

How to evaluate Microsoft in Build 2017 As mentioned above Fluent Design System?

9. Source code

Fluent-Design-System-Sample

Colorful-Box

[UWP] How to use Fluent Design System ( Next ) More articles about

  1. [UWP] How to use Fluent Design System ( On )

    1. Preface Microsoft is in Build 2017 The new design language is published in Fluent Design System( hereinafter referred to as FDS), But the official website is just a pile of gorgeous words and a pile of animation . As for the UWP How to make it in China , How do you do it? , ...

  2. Microsoft's latest design Fluent Design System First experience

    Microsoft's latest design Fluent Design System First experience The pictures in this article are incomplete ! It's suggested to check the Zhihu column !!! https://zhuanlan.zhihu.com/p/30582886 original  2017-11- ...

  3. Smooth design Fluent Design System Lighting effects in the RevealBrush,WPF It can also be simulated !

    UWP Can use the smooth design effect is amazing , Write new UWP The program can make more beautiful UI La ! But the old WPF What to do with the project ? So I started to achieve a goal !   Can't wait to see the effect ▲ Is it very similar UWP in ...

  4. Microsoft Fluent Design System

    Reprinted from :http://www.ui.cn/detail/131217.html It was just at the Microsoft Build 2017 in , Microsoft announced its latest design language --"Fluen ...

  5. [UWP] Recommend a very good one Fluent Design Of bilibili UWP client : Bili

    UWP There are already several Bilibili The client of , One more recently : Bili - Microsoft Store The author of cloud fantasy is a very good designer UWP developer , I also learned a lot of design skills from him . It is also a teacher Bil ...

  6. DevExpress WinForms Use the tutorial :WinForms Fluent Design and Acrylic Effects

    In previous releases , Declare support for Fluent Design Form and Acrylic effects—— Designed to replicate Microsoft The next generation UI metaphor New functions . This paper mainly introduces how to realize this function , And make it clear ...

  7. stay gem5 Of full system Run under alpha Compiled test program running gem5 on ubuntu in full system mode in alpha

    background First, you need to full system Run under gem5, Search information and consult others through the Internet , It's finally running successfully , It's mostly about the Internet alpha The instruction set , And it's all in English , For your convenience , Now to summarize , I hope that's helpful . ...

  8. UWP Use Windows.Web.Http Under the namespace HttpClient Use post Method , Upload image server

    1. Select pictures from album /// <summary> /// 1.1 Select pictures from album /// </summary> /// <param name="send ...

  9. Android Design Under bag TextInputLayout and FloatingActionButton Simple use

    Finally introduced to Design It's the last thing in the bag . It's also very simple. , One is TextInputLayout. TextInputLayout As a parent container , Include a new EditText, You can give EditText Add meaning no ...

Random recommendation

  1. js Function() Constructors

    var scope="global";    function constructFunction(){        var scope="local";   ...

  2. mysql Installation free method

    I downloaded one on the official website mysql-installer-community-5.6.27.0.msi, Installation environment required , The test failed , so much trouble . After checking the information online, I downloaded a compressed package directly mysql-5.6.27-winx ...

  3. sublime 3 Shortcut key

    come from (http://dengo.org/archives/970) Sublime text 3 It's my favorite code editor , Dealing with code every day , You must sharpen your tools first , Master the basic code editor shortcut key , It makes your coding more efficient . ...

  4. PHP function - Check whether a value exists in an array

    function :in_array -- Check if there is a value definition in the array :bool in_array ( mixed needle, array haystack [, bool strict] ) stay haystac ...

  5. Weekly game -KIDx&#39;s Pagination classification : match 2015-08-02 08:23 7 Human reading Comment on (0) Collection

    KIDx's Pagination Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) S ...

  6. linux Service crond

    use the following command add entries to crontab should take effect right away. right away( immediately , immediately ) #c ...

  7. Explain profound theories in simple language Windows BATCH

    1. What is? Windows BATCH BATCH It's a batch file , Sometimes referred to as BAT, yes Windows A kind of runnable script on the platform , And *nix(Linux and Unix) Upper Shell Scripts and other scripts (Perl, ...

  8. DBA Tools ——DMV—— adopt sys.dm_exec_procedure_stats View stored procedure execution information

    original text :DBA Tools --DMV-- adopt sys.dm_exec_procedure_stats View stored procedure execution information about DBA Come on , You often need some information about the stored procedure of the mobile phone : How many times What is the implementation plan The balance of execution ...

  9. Javascript object-oriented programming — Inheritance and encapsulation

      front   said Javascript Is an object-based (object-based) Language , Almost everything you come across is an object . however , It's not really object-oriented programming (OOP) Language , Because it's not in grammar class( class ) ...

  10. UNIX Network programming —— Non blocking connect

    When in a nonblocking TCP Call on socket connect when ,connect Will immediately return a EINPROGRESS error , But what has been launched TCP Three handshakes go on . We then use select Check whether the connection is successful or failed ...