"Windows 10 App development" follows system theme Colors

Source: Internet
Author: User

Sometimes, you want some colors in your application to be the same as the system theme colors, and synchronize when the system theme color changes.

The implementation process is not complex, mainly used in the Uisettings class, it exposes a Getcolorvalue method, access to this method, you can get the specified color value (represented by a color structure). The type that represents the color to get is agreed by an enumeration called Uicolortype. As shown in Ultra HD below.

There may be friends in the call Getcolorvalue method will use the value of Background, in fact, this value is not the system theme color, is the background color of the window, the default is returned is white. The system theme color is the value Accent (that is, the so-called accent color).

In addition, we will see good N to start with Accent values, such as ACCENTDARK1, AccentLight2 and so on. These values mean that the Accent value is deepened or shallow. For example, if the Accent value returns blue, then AccentLight1 represents a slightly lighter blue color relative to the Accent value; AccentLight2 a little bit lighter; AccentLight3 a little more. As for how shallow and how deep, this is your own research.

Here to see the actual results, for the sake of decency, first to get a UI.

        <GridHorizontalAlignment= "Center"VerticalAlignment= "Center">            <grid.rowdefinitions>                <RowDefinitionHeight= "Auto"/>                <RowDefinitionHeight= "Auto"/>            </grid.rowdefinitions>            <RectangleName= "Rect"Width= "+"Height= "+"Margin= " the"Stroke= "Red"strokethickness= "3"/>            <TextBlockMargin= " a"Grid.Row= "1"Text= "Pay attention to the rectangle above." "FontSize= "+"/>        </Grid>

This piece of XAML is not complex, if you do not understand, you can consult any. The main element is the rectangle, and we'll let its fill color follow the system's theme color.

So, a big partner will ask, how can my app be notified when the system theme color changes? Don't be nervous, you see, Uisettings class has a colorvalueschanged event, which is right, if the system theme color changes, it will trigger this event. So, smart you must know the back of the train of thought, yes, is to respond to this event, to fill the rectangle brush to change the color.

However, one thing you have to seriously note is that this event is called on another thread, so if you want to access the UI element, don't forget to bring the Dispatcher.

Like this.

Uisetting =Newuisettings (); Uisetting. Colorvalueschanged+=oncolorvalueschanged; Private Async voidOncolorvalueschanged (uisettings sender,Objectargs)            {Color bg, FG; BG=sender.            Getcolorvalue (uicolortype.accent); awaitDispatcher.runasync (Windows.UI.Core.CoreDispatcherPriority.Normal, ()={SolidColorBrush Brush= rect. Fill asSolidColorBrush; if(Brush = =NULL) {Brush=NewSolidColorBrush (); } brush. Color=BG;        }); }

The code is easy, but the effect is sexy. Don't believe you try.

Isn't it sexy?

Program code

"Windows 10 App development" follows system theme Colors

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.