Kubernetes client UAP development-custom control's right arm and right arm

Kubernetes client UAP development-custom control's right arm and right arm
Preface

The last time we talked about the App's genie: custom controls. This time, let's continue with this topic to talk about two useful assistants for custom controls:

• Selector-TemplateSelector
• Converter-Converter

These two things can help custom controls to be used more easily and easily, so they must be mastered.

Value Converter

You may not be familiar with this because when we introduce Data Binding in MSDN, we will always introduce Data conversion. For example, this webpage:

Http://msdn.microsoft.com/library/windows/apps/xaml/hh464965.aspx/

The final StringFormatter is.

In the blog Park UAP, we use several Converter. Each Converter is actually a cs class derived from the IValueConverter interface. They are all stored in the ControlHelper directory of the CNBlogs. Shared Project. Let's use two of them as an example.

Bool/Visibility Conversion

Let's look at this Code:

public class BoolToVisibilityConverter : IValueConverter{        public object Convert(object value, Type targetType, object parameter, string language)        {            return (bool)value ? Visibility.Visible : Visibility.Collapsed;        }        public object ConvertBack(object value, Type targetType, object parameter, string language)        {            throw new NotImplementedException();        }}

Function directly converts the bool value to the Visibility enumeration value and binds it to an element of a control. For example, in XAML:

<Style TargetType="local:FavoriteAuthorControl">        <Setter Property="Template">            <Setter.Value>

......

                            <TextBlock Grid.Column="0" Text="" FontFamily="Segoe UI Symbol" Foreground="Red" Visibility="{Binding Converter={StaticResource BoolToVisiblityConverter}, Path=HasNew}"/>

……            </Setter.Value>        </Setter></Style>

The above section of XAML is the style description of a custom control. The control itself is the "follow blogger" control on the "favorites" page. The purpose is to: When the HasNew field value is true, A red star is displayed on the left of the blogger's profile picture, indicating that the blogger has published a new blog. If you have followed the blogger, you can click to view his new blog. When HasNew is false, you do not need to go in and read a circle without a new blog and leave with disappointment.

Some people may say: in the code of FavoriteAuthorControl. cs, I directly take the HasNew value to see whether it is true or false, and then directly write Visibility = Visiable or Collapsed with the code.

You can do this, of course, but there are a few inconveniences:

1) You need to write code

2) The person reading your program does not know the logic if he does not read your code.

3) You need to Name the TextBlock (x: Name = ...) Then use GetChildTemplate ("… ") To obtain the control, and then specify its Visibility value.

4) In other controls, you still need to write code to do something similar.

The benefits of using our recommended methods are obvious:

1) bind it to XAML, no code

2) This converter can be reused.

3) There is no need for more definitions and can be solved at one time in the binding phase (this is also one of the advantages of WPF), so performance does not need to be considered.

4) Excellent readability

Bool/string Converter

Let's take another example to consolidate the code:

Class NightModeLabelConverter: IValueConverter {public object Convert (object value, Type targetType, object parameter, string language) {bool bValue = (bool) value; if (bValue) {return "Daytime mode";} else {return "nighttime mode";} public object ConvertBack (object value, Type targetType, object parameter, string culture) {throw new NotImplementedException ();}}

Use this in XAML:

<AppBarButton x:Name=”btn_Mode”Label=”{Binding Converter={StaticResource NightModeLabelConverter}, Path=Settings.NightMode”/>

In this binding process, check the value of the NightMode in Setting. If it is True, "Daytime mode" is displayed below the button. If it is false, "nighttime mode" is displayed ".

Template selector TemplateSelector

The template selector is rarely used, because there are very few documents to introduce it. So far we have not found it. It is also an occasional opportunity to know such a thing and it is very useful! I remember several interviews and we all asked this question: if one piece of news has images and the other has no images, How do you prepare to display these two controls? As shown in, there is an image above (marked with a red rectangle), and there is no image below.

Namespace CNBlogs. controlHelper {class Identifier: DataTemplateSelector {public DataTemplate dtHasImage {get; set;} public DataTemplate dtNoImage {get; set;} protected override ememplate identifier (object item, DependencyObject container) {CNBlogs. dataHelper. dataModel. news news = item as CNBlogs. dataHelper. dataModel. news; if (string. isNullOrEmpty (news. topicIcon) {return dtNoImage;} return dtHasImage ;}}}

In the Shared project, there is a NewsControlTemplateSelector. cs under the ControlHelper directory. It is derived from the DataTemplaterSelector parent class and defines two ememplates: dtHasImage and dtNoImage, which correspond to two situations with or without images respectively. Then, in the SelectTemplateCore Rewriting Method, obtain the news instance to determine whether the TopicIcon exists. If yes, dtHasImage is returned; otherwise, dtNoImage is returned.

In MainPage. xaml, use:

<Page.Resources>......        <DataTemplate x:Key="NewsNoImageTemplate">            <local:NewsTitleTextControl/>        </DataTemplate>        <DataTemplate x:Key="NewsHasImageTemplate">            <local:NewsTitleTextImageControl/>        </DataTemplate>......</Page.Resources>

First, go to Page. two templates are defined in Resource and two different Key values are given. One is called "NewsNoImageTemplate" and the other is called "NewsHasImageTemplate", which correspond to two custom controls respectively: newsTitleTextControl and NewsTitleTextImageControl (in Theme \ Generic. one defined in xaml has only the title text, and the other has the title text and the right image ).

In the News shorttitem ListView, write as follows:

<PivotItem Margin="0" Tag="news">......                <ListView.ItemTemplateSelector>                    <ControlHelper:NewsControlTemplateSelector                        dtHasImage="{StaticResource NewsHasImageTemplate}"                        dtNoImage="{StaticResource NewsNoImageTemplate}"/>                </ListView.ItemTemplateSelector>        </ListView></PivotItem>

ListView. ItemTemplateSelector is used to define the template used to display the current news. Note the following syntax:

1) ControlHelper: NewsControlTemplateSelector corresponds to the class name of the first cs code

2) dtHasImage/dtNoImage correspond to two return values in cs code

3) StaticResource NewsHasImageTemplate corresponds to x: Key = "NewsHasImageTemplate" in Page. Resources, and indirectly corresponds to custom control templates with images.

That is, the control <-> resource file <-> selector. The relationship between the three is easy to confuse, especially the name, which is so easy to make mistakes that they do not remember what they correspond to at last. It is recommended that the Control end with Control, such as NewTitleTextControl; the Key of the resource file end with Template, such as NewsNoImageTemplate; the selector starts with dt, such as dtNoImage. In this case, if there is an image, the Selector will return dtHasImage, corresponding to the StaticResource NewHasImageTemplate in the resource on this page, so that the NewsTitleTextImage custom control is used to display the news.

Summary

Now that we have mastered the first converter, we don't need to write code in every control, so we can bind it directly in XAML. Having mastered the second selector, we can fully break down the page logic and granular them to a reasonable extent, without having to consider how to display two or more styles with one control.

However, you should note that the PostControl Control mentioned in the previous "App Genie" Article sometimes needs to display the author's profile picture, and sometimes needs to display "already read", etc, if you want to create five controls, it is wrong to use TemplateSelector to choose them. The basic principle is: In a ListView, if two or more styles are selected, use TemplateSelector. On the two pages, use the TemplateBinding external configuration to specify whether to display an element, for example, AuthorAvatar. visibility = {TemplateBinding ShowAvatar}. When using it, you can directly specify Visable or Collapsed on two pages, so that you can use one control to handle five cases.

In Windows Phone 8.1 and Windows 8.1, there is no difference at all, so we put these cs in the shared project so that they can be shared between two projects.

 

Share code and change the world!

 

Windows Phone Store App link:

Bytes

Windows Store App link:

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

GitHub open source link:

Https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

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

 

MS-UAP