{"id":1894,"date":"2017-10-11T09:32:09","date_gmt":"2017-10-11T09:32:09","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=1894"},"modified":"2021-01-23T16:25:10","modified_gmt":"2021-01-23T16:25:10","slug":"spreadsheet-localization","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/spreadsheet-localization\/","title":{"rendered":"Spreadsheet Localization"},"content":{"rendered":"<p>In this blog post we will demonstrate how to customize the spreadsheet control so users can input in another language. We build a budget table whose data is in Korean. We will also use the latest localization capabilities of the component to add some auxiliary forms, which UI is also in Korean.<\/p>\n<p>The sample uses WPF but the same methods of the control are available in <a href=\"https:\/\/mindfusion.dev\/spreadsheet-winforms.html\">Spreadsheet for WinForms.<\/a><\/p>\n<div id=\"attachment_1899\" style=\"width: 589px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/wpf-spreadsheet-korean.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1899\" class=\"size-full wp-image-1899\" src=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/wpf-spreadsheet-korean.png\" alt=\"A spreadsheet in Korean\" width=\"579\" height=\"391\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/wpf-spreadsheet-korean.png 579w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/wpf-spreadsheet-korean-300x203.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/wpf-spreadsheet-korean-444x300.png 444w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/a><p id=\"caption-attachment-1899\" class=\"wp-caption-text\">A spreadsheet in Korean<\/p><\/div>\n<p><strong>I. General Settings<\/strong><\/p>\n<p>We create a new WPF project in <a href=\"https:\/\/www.visualstudio.com\/\">Visual Studio<\/a> and name it \u201cBudgetAllocation\u201d. You can drag and drop the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/spreadsheetwpf\/index.htm?T_MindFusion_Spreadsheet_Wpf_WorkbookView.htm\">WorkbookView<\/a> control from the Toolbox if you have installed the <a href=\"https:\/\/mindfusion.dev\/spreadsheet-wpf.html\">Spreadsheet for WPF component<\/a> or the <a href=\"https:\/\/mindfusion.dev\/wpf-pack.html\">WPF Pack.<\/a> Another option is to add the required dll-s manually:<\/p>\n<ul>\n<li>MindFusion.Spreadsheet.Wpf<\/li>\n<li>MindFusion.Licensing<\/li>\n<li>MindFusion.Common<\/li>\n<\/ul>\n<p>In the XAML tag we add a mapping to the Spreadsheet control:<\/p>\n<pre>xmlns:ss=\"http:\/\/mindfusion.dev\/spreadsheet\/wpf\"\n<\/pre>\n<p>Then, in the XAML file we create an instance of the MindFusion.Spreadsheet.Wpf.WorkbookView that holds a MindFusion.Spreadsheet.Wpf.Workbook:<\/p>\n<p>&lt;ss:WorkbookView x:Name=&#8221;workbookView&#8221;&gt;<br \/>\n&lt;ss:Workbook x:Name=&#8221;workbook&#8221; \/&gt;<br \/>\n&lt;\/ss:WorkbookView&gt;<\/p>\n<p>The next step is to add a new Worksheet to the Workbook and make it the active sheet:<\/p>\n<pre> \nvar activeSheet = workbook.Worksheets.Add();\nworkbookView.ActiveWorksheet = activeSheet;\nactiveSheet.BeginInit();\n......\nactiveSheet.EndInit();\n<\/pre>\n<p>With that we have completed the general settings for the project and is time to pay attention to the localization.<\/p>\n<p><strong>II. Localization<\/strong><\/p>\n<p>Spreadsheet for WPF can be localized to support different language through external XML files and the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/spreadsheetwpf\/index.htm?P_MindFusion_Spreadsheet_Wpf_Workbook_Locale_0.htm\">Locale<\/a> property of the Workbook class. In our sample we will use Korean. First, let\u2019s tell the control that we want to type in Korean:<\/p>\n<pre>workbook.Locale = new CultureInfo(\"ko-KR\"); \n<\/pre>\n<p>We need to change the default Font for the spreadsheet to one that does support Korean, we\u2019ve chosen Malgun Gothic:<\/p>\n<pre>var globalStyle = activeSheet.CellRanges[0, 0, activeSheet.Columns.Count - 1, activeSheet.Rows.Count - 1].Style;\nglobalStyle.FontName = \"Malgun Gothic\";\n<\/pre>\n<p>The next step is to localize the UI of all forms that might appear when the user interacts with the spreadsheet. That happens through an XML file that we load and assign to the workbook:<\/p>\n<pre> var file = @\"..\/..\/Localization\/Localization.KR.xml\";\n       if (file != null &amp;&amp; File.Exists(file))\n            workbook.SetLocalizationInfo(file);\n<\/pre>\n<p>The component provides ready to be used UI localization files for 6 of the most common languages in the world. In our case we use the file for Korean. You will find those files in a subfolder called Localization on your hard driver, in the installation folder of the control.<\/p>\n<p>Once we\u2019ve finished localizing the spreadsheet it\u2019s time to add some data:<\/p>\n<p><strong>III. Data<\/strong><\/p>\n<p>Specifying data for each cell is very easy, it is made through the Data property of the Cell instance:<\/p>\n<pre>activeSheet.Cells[\"A2\"].Data = \"\ube44\uc728\ub85c\uc11c\uc758 \uc790\uae08 \ubd84\ubc30\";\n<\/pre>\n<p>A cell can contain a formula, and it is specified this way:<\/p>\n<pre>activeSheet.Cells[\"F4\"].Data = \"=SUM(B4:E4)\";\n<\/pre>\n<p><strong>IV. Appearance<\/strong><\/p>\n<p>The different cells and cell ranges in our spreadsheet have different formats and we set them through the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/spreadsheetwpf\/index.htm?P_MindFusion_Spreadsheet_Wpf_Cell_Style_0.htm\">Style<\/a> property:<\/p>\n<pre>activeSheet.Cells[\"A3\"].Style.FontBold = true;\nactiveSheet.Cells[\"A3\"].Style.Background = new SolidColorBrush(Color.FromRgb(240, 240, 240));\nactiveSheet.Cells[\"A3\"].Style.BorderBottomBrush = new SolidColorBrush(Color.FromRgb(220, 220, 220));\nactiveSheet.Cells[\"A3\"].Style.BorderRightBrush = new SolidColorBrush(Color.FromRgb(220, 220, 220));\n<\/pre>\n<p>You can style a range of cells as well:<\/p>\n<pre>var heading = activeSheet.CellRanges[\"A2:G2\"];\n\nvar headingStyle = heading.Style;\nheadingStyle.FontBold = true;\nheadingStyle.VerticalAlignment = MindFusion.Spreadsheet.Wpf.VerticalAlignment.Middle;\n....\n<\/pre>\n<p>Cells can be merged:<\/p>\n<pre>heading.Merge();\n<\/pre>\n<p>Cells that render numbers can be formatted according to your needs:<\/p>\n<pre>var salesStyle = activeSheet.CellRanges[1, 5, 4, 5].Style;\nsalesStyle.FontBold = true;\nsalesStyle.Format = \"#,##0.00;(#,##0.00)\";\n<\/pre>\n<p>For some cells we use conditional formatting \u2013 that means we style them differently based on their data value:<\/p>\n<pre>\/\/ Set a conditional format\nvar format1 = salesStyle.ConditionalFormats.Add();\nformat1.Type = ConditionalFormatType.CellValue;\nformat1.Operator = ComparisonOperator.LessThan;\nformat1.First = \"35\";\nformat1.Style.Background = new SolidColorBrush(Color.FromArgb(255, 255, 120, 85));\nformat1.Style.Background.Freeze();\n<\/pre>\n<p>In this case we raise alert by painting red those cells whose value is less than 35 in cells that have column index 1 to 4 and row index 5.<\/p>\n<p><strong>V. Context Menu<\/strong><\/p>\n<p>We add a context menu to the Workbook control in XAML this way:<\/p>\n<p>&lt;ss:WorkbookView.ContextMenu&gt;<br \/>\n&lt;ContextMenu MenuItem.Click=&#8221;ContextMenu_Click&#8221;&gt;<br \/>\n&lt;MenuItem Header=&#8221;Delete Cells Form&#8230;&#8221; \/&gt;<br \/>\n&lt;MenuItem Header=&#8221;Insert Cells Form&#8230;&#8221; \/&gt;<br \/>\n&lt;MenuItem Header=&#8221;Worksheet Rename Form&#8230;&#8221; \/&gt;<br \/>\n&lt;\/ContextMenu&gt;<br \/>\n&lt;\/ss:WorkbookView.ContextMenu&gt;<\/p>\n<p>The ContextMenu has 3 items that allow the user to delete or insert cells as well to rename the worksheet. Let\u2019s look at the event handler of the Click event:<\/p>\n<pre>\/\/handle clicks on the context menu\nprivate void ContextMenu_Click(object sender, RoutedEventArgs e)\n   {\n       var menu = sender as ContextMenu;\n       var index = menu.Items.IndexOf(e.OriginalSource);\n\n       switch (index)\n       {\n           case 0:\n               {\n                    new DeleteCellsForm(workbook).ShowDialog();\n                    break;\n                 }\n            case 1:\n                 {\n                     new InsertCellsForm(workbook).ShowDialog();\n                     break;\n                 }\n             case 2:\n                 {\n                     new WorksheetRenameForm(workbook, \"New name\").ShowDialog();\n                     break;\n                 }\n          }\n    }\n<\/pre>\n<p>We recognize the menu item that was clicked based on its index. After that we show the appropriate form. The <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/spreadsheetwpf\/index.htm?T_MindFusion_Spreadsheet_Wpf_StandardForms_InsertCellsForm.htm\">InsertCellsForm<\/a>, <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/spreadsheetwpf\/index.htm?T_MindFusion_Spreadsheet_Wpf_StandardForms_DeleteCellsForm.htm\">DeleteCellsForm<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/spreadsheetwpf\/index.htm?T_MindFusion_Spreadsheet_Wpf_StandardForms_WorksheetRenameForm.htm\">WorksheetRenameForm<\/a> are all found in the MindFusion.Spreadsheet.Wpf.StandardForms namespace and we have to add a reference to the MindFusion.Spreadsheet.Wpf.StandardForms.dll. Once we do that, since we\u2019ve set the localization info to point to a Korean file, those forms also show in Korean:<\/p>\n<div id=\"attachment_1902\" style=\"width: 654px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/insert-cells-form.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1902\" class=\"size-full wp-image-1902\" src=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/insert-cells-form.png\" alt=\"Spreadsheet UI in Korean\" width=\"644\" height=\"475\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/insert-cells-form.png 644w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/insert-cells-form-300x221.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/insert-cells-form-407x300.png 407w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><p id=\"caption-attachment-1902\" class=\"wp-caption-text\">Spreadsheet UI in Korean<\/p><\/div>\n<p>With that our sample is ready. You can download the full source code together with the localization file and the necessary component libraries from here:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/samples\/wpf\/spreadsheet\/BudgetAllocation.CS.zip\"> Download Spreadsheet Localization Sample in WPF<\/a><\/p>\n<p><em>About Spreadsheet for WPF:<\/em> A native WPF component that allows developer to add to their applications functionality similar to those of Microsoft Excel. The diverse features of the component include smart API, rich styling options, support for numerous import\/export formats, custom DB functions, formula and charts. Find out more about <a href=\"https:\/\/mindfusion.dev\/spreadsheet-wpf.html\">MindFusion Spreadsheet for WPF here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post we will demonstrate how to customize the spreadsheet control so users can input in another language. We build a budget table whose data is in Korean. We will also use the latest localization capabilities of the &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/spreadsheet-localization\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[74,163],"tags":[485,483,486,487,484],"class_list":["post-1894","post","type-post","status-publish","format-standard","hentry","category-sample-code","category-spreadsheet","tag-data-table-localization","tag-spreadsheet-localization","tag-spreadsheet-styling","tag-wpf-budget-app","tag-wpf-spreadsheet"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-uy","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=1894"}],"version-history":[{"count":7,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1894\/revisions"}],"predecessor-version":[{"id":2638,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1894\/revisions\/2638"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}