03. Vector Graphics query tool (Symbol Unicode) and symbolunicode

03. Vector Graphics query tool (Symbol Unicode) and symbolunicode

Currently, in software development, vector icons are used in many places. In the development of Metro Apps, you can use Windows

System icons (02 and used by buttons in the Universal app), including Segoe UI Symbol, Segoe MDL2 Assets (newly added in Windows 10 ),

Segoe UI Emoji.

However, during development, a problem occurs: many icons in the "character ing table" that comes with the system are too small to be resized.

It is not convenient to browse, so I wrote a Unicode query tool for vector graphics (written in WPF), involving Unicode

Transcoding technologies.

 

The built-in "character ing table ":

 

1. Running Effect of "vector graphics query tool:

1) Main Window:

 

2) The Segoe UI Emoji window can be opened simultaneously:

 

Segoe UI Symbol window:

 

Segoe MDL2 Assets window:

 

 

2. The Byte relationships occupied by different encodings:

1) ASCII code: an English letter (case-insensitive) occupies the space of one byte, and a Chinese character occupies the space of two bytes.

UTF-8 encoding: an English character is equal to one byte, and a Chinese character (including traditional Chinese) is equal to three bytes.

Unicode encoding: an English character equals two bytes, and a Chinese character (including traditional Chinese characters) equals two bytes.

Symbol: English Punctuation occupies one byte, and Chinese Punctuation occupies two bytes. For example, the English period "." occupies the size of 1 byte and the Chinese period "." The size of 2 bytes.

 

2) Example: unicode in code and xml:

<Label Content = "Example:" Grid. row = "5"/> <StackPanel Orientation = "Horizontal" Grid. row = "5" Grid. column = "1"> <! -- When writing Unicode characters in an xml file, you must use the transcoding format --> <TextBlock FontFamily = "Segoe UI Symbol" Text = "& # xE189;"/> <! -- On the C # page, assign values using code --> <TextBlock FontFamily = "Segoe UI Symbol" x: Name = "txtSample" Margin =, 0, 0 "/> </StackPanel>

 

In the C # code (the same as the C ++ representation), the unicode writing format starts with '\ U' (note that u is in lower case ), the following is a hexadecimal number greater than 4 bits. The format must be correct:

 txtSample.Text = "\uE189";

 

Display Effect:

 

 

If the format is incorrect, compilation is not performed:

 

 

3. traverse all fonts installed on the current Windows System:

1) code in MainWindow. xaml on the homepage:

<Label Content = "All fonts:" Grid. row = "1"/> <ComboBox x: Name = "fullFamily" Grid. row = "1" Grid. column = "1"> <ComboBox. itemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel/> </ItemsPanelTemplate> </ComboBox. itemsPanel> <ComboBox. itemTemplate> <DataTemplate> <TextBlock Text = "{Binding}" Margin = "," Background = "Transparent"/> </DataTemplate> </ComboBox. itemTemplate> </ComboBox> <Label Content = "Open the query window:" Grid. row = "3"/> <ListBox x: Name = "listBox" Grid. row = "3" Grid. column = "1"> <ListBox. itemTemplate> <DataTemplate> <TextBlock Text = "{Binding}" MouseLeftButtonDown = "TextBlock_MouseLeftButtonDown" Margin = "30,5, 0, 0 "Background =" Transparent "/> </DataTemplate> </ListBox. itemTemplate> </ListBox>

 

2) C # Page code:

Private void MainWindow_Loaded (object sender, RoutedEventArgs e) {FontFamilyMapCollection ffCollection; // traverses all fonts on the current system. See MSDN: // https://msdn.microsoft.com/zh-cn/library/system.windows.media.fontfamily.aspx foreach (FontFamily fontFamily in Fonts. SystemFontFamilies ){
// The "icon font" is displayed in ListBox, and "All fonts" are displayed in ComboBox if (fontFamily. source = "Segoe UI Symbol" | fontFamily. source = "Segoe MDL2 Assets" | fontFamily. source = "Segoe UI Emoji") {ffCollection = fontFamily. familyMaps; listBox. items. add (fontFamily. source);} fullFamily. items. add (fontFamily. source) ;}}// select the corresponding "icon font" and jump to the "View window" private void TextBlock_MouseLeftButtonDown (object sender, MouseButtonEventArgs e) {string fontName = (sender as TextBlock ). text; SymbolWindow sw = new SymbolWindow (); // use the static attribute to pass the SymbolWindow as a parameter. currentFontFamily = new FontFamily (fontName); // The selected font sw. show ();}

 

4. Browsing window:

1) In the SymbolWindow. xaml file, set x: Name of the window to myWindow:

<ListView x: Name = "listBox" ItemTemplate = "{StaticResource template}"> <ListView. ItemsPanel> <ItemsPanelTemplate> <! -- The Items panel width is bound to the window width, which is arranged according to the window changes. Prevent display as a single row --> <WrapPanel Orientation = "Horizontal" Width = "{Binding ActualWidth, ElementName = myWindow}"/> </ItemsPanelTemplate> </ListView. itemsPanel> </ListView>

 

2) in this. Loaded event, call the FontItem. EnumeratorFontFamily (CurrentFontFamily) Static Method to put the relevant font

Convert all Unicode codes to corresponding characters:

/// <Summary> /// serves as the slave MainWindow. parameters passed by xaml // </summary> public static FontFamily CurrentFontFamily; private void Segoe_UI_Symbol_Loaded (object sender, RoutedEventArgs e) {// FontFamily ff = new FontFamily ("Segoe MDL2 Assets"); if (CurrentFontFamily! = Null) {this. FontFamily = CurrentFontFamily; this. Title = "current font:" + CurrentFontFamily. Source; listBox. ItemsSource = FontItem. EnumeratorFontFamily (CurrentFontFamily );}}

 

 

5. FontItem class definition, used to display the binding and Unicode transcoding:

1) convert hexadecimal unicode to byte array, and then call Encoding. Unicode. GetChars (array); Method to convert

Corresponding characters:

// Unicode conversion to "symbol" character representation // For example, 0xE189 is converted to byte [] {137,225} byte [] bytes = new byte [] {(byte) Key, (byte) (Key> 8)}; string Character = ByteToString (bytes );

 

// Convert the binary number to the public static string ByteToString (byte [] array) {var enc = Encoding. unicode; var chars = enc. getChars (array); return new string (chars );}

Full code of the FontItem. cs file:

Class FontItem {public string key {set; get;} public string value {get; set;} public string font {set; get ;} public static List <FontItem> EnumeratorFontFamily (FontFamily family) {Dictionary <int, FontItem> fonts = new Dictionary <int, FontItem> (); var typefaces = family. getTypefaces (); foreach (Typeface typeface in typefaces) {// corresponds to the physical font GlyphTypeface glyph in the font file; typeface. tryGetGlyphTypefa Ce (out glyph); // obtain the nominal ing between the Unicode bitwise and the symbolic index based on the definition of the font "CMAP" table. IDictionary <int, ushort> characterMap = glyph. characterToGlyphMap; foreach (KeyValuePair <int, ushort> kvp in characterMap) {// Console. writeLine (String. format ("{0 }:{ 1}", kvp. key, kvp. value); int Key = kvp. key; // kvp is not used. value // if the Value is greater than 0 xffff (empty character, displayed as a small box), the out-of-loop if (Key> 0 xffff) // 0 ~ 65535 {break;} // Method 1: Unicode is converted to a "symbol" character representation // For example, 0xE189 to byte [] {137,225} byte [] bytes = new byte [] {(byte) Key, (byte) (Key> 8 )}; string Character = ByteToString (bytes); // Method 2: Unicode is converted to the "symbol" Character // It can be used to convert Unicode with keys less than 65535. If it is greater than 65535, it will throw: // "System. overflowException: The value is too large or too small. // char c = Convert. toChar (Key); // string Character = c. toString (); // filter out empty characters if (! String. IsNullOrEmpty (Character )&&! String. IsNullOrWhiteSpace (Character )&&! Fonts. keys. contains (Key) // remove duplicate) {fonts. add (Key, new FontItem {key = Key. toString ("X4"), font = Character}) ;}} return fonts. values. toList ();} // converts the binary number to the public static string ByteToString (byte [] array) {var enc = Encoding. unicode; var chars = enc. getChars (array); return new string (chars );}}View Code

 

 

Download tool directly (Based on. net framework 4.5)

Source code download

 

 

 

References and related reading:

How to: Enumerate Installed Fonts

Character judgment in a font file

Baidu Encyclopedia: Unicode