{"id":425,"date":"2013-07-08T09:09:19","date_gmt":"2013-07-08T09:09:19","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=425"},"modified":"2021-01-08T15:49:35","modified_gmt":"2021-01-08T15:49:35","slug":"custom-appearance-of-wpf-resource-view","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/custom-appearance-of-wpf-resource-view\/","title":{"rendered":"Custom appearance of WPF Resource view"},"content":{"rendered":"<p>Continuing from the previous <a href=\"http:\/\/mindfusion.dev\/blog\/?p=394\">post<\/a> we will now customize the appearance of the Resource view to achieve a more aesthetically pleasing presentation. The appearance of the view is customized by setting various properties of the Calendar.ResourceViewSettings object.<\/p>\n<p>We will build our presentation on the Silver theme by reducing the sharpness and contrast of colors and making the font uniform across the entire view. The customization process is divided to the following steps:<\/p>\n<p>Customize the view background.<\/p>\n<pre>calendar.ResourceViewSettings.CalendarStyle.Background = Brushes.White;<\/pre>\n<p>Customize the row headers.<\/p>\n<pre>calendar.ResourceViewSettings.ExpandableRows = false;\ncalendar.ResourceViewSettings.HeaderStyle.FontFamily = headerFont;\ncalendar.ResourceViewSettings.HeaderStyle.FontSize = 13;\ncalendar.ResourceViewSettings.HeaderStyle.Foreground = new SolidColorBrush(Color.FromArgb(255, 64, 64, 64));\ncalendar.ResourceViewSettings.HeaderStyle.Background = Brushes.White;\ncalendar.ResourceViewSettings.HeaderStyle.BorderBrush = borderBrush;\ncalendar.ResourceViewSettings.HeaderStyle.BorderThickness = new Thickness(0, 0, 0, 1);<\/pre>\n<p>Customize the view cells.<\/p>\n<pre>calendar.ResourceViewSettings.CellStyle.Background = Brushes.White;\ncalendar.ResourceViewSettings.CellStyle.BorderBrush = borderBrush;\ncalendar.ResourceViewSettings.WeekendStyle.Background = new SolidColorBrush(Color.FromArgb(255, 250, 250, 250));\ncalendar.ResourceViewSettings.WeekendStyle.BorderBrush = borderBrush;<\/pre>\n<p>Customize the view timelines.<\/p>\n<pre>calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.Background = Brushes.White;\ncalendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.BorderBrush = borderBrush;\ncalendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontFamily = headerFont;\ncalendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontSize = 13;\ncalendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontWeight = FontWeights.Normal;\ncalendar.ResourceViewSettings.BottomTimelineSettings.NowFillBrush = Brushes.Transparent;\ncalendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.Background = Brushes.White;\ncalendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.BorderBrush = borderBrush;\ncalendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontFamily = headerFont;\ncalendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontSize = 13;\ncalendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontWeight = FontWeights.Normal;\ncalendar.ResourceViewSettings.MiddleTimelineSettings.NowFillBrush = Brushes.Transparent;<\/pre>\n<p>Note that the <em>font<\/em>, <em>headerFont<\/em> and <em>borderBrush<\/em> variables are defined as follows:<\/p>\n<pre>FontFamily font = new FontFamily(\"Segoe UI\");\nFontFamily headerFont = new FontFamily(\"Segoe UI Light\");\nBrush borderBrush = new SolidColorBrush(Color.FromArgb(255, 224, 224, 224));<\/pre>\n<p>The final result is displayed below.<\/p>\n<p><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/07\/scheduling-resourceviewappearance.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-427\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/07\/scheduling-resourceviewappearance-300x183.png\" alt=\"scheduling-resourceviewappearance\" width=\"300\" height=\"183\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/07\/scheduling-resourceviewappearance-300x183.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/07\/scheduling-resourceviewappearance.png 935w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The complete sample project is available for download here:<br \/>\n<a href=\"https:\/\/mindfusion.dev\/_samples\/WpfPlannerResourceViewAppearance.zip\">https:\/\/mindfusion.dev\/_samples\/WpfPlannerResourceViewAppearance.zip<\/a><\/p>\n<p>You can get the trial version of MindFusion.Scheduling for WPF from this link:<br \/>\n<a href=\"https:\/\/mindfusion.dev\/WpfPlannerTrial.zip\">https:\/\/mindfusion.dev\/WpfPlannerTrial.zip<\/a><\/p>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continuing from the previous post we will now customize the appearance of the Resource view to achieve a more aesthetically pleasing presentation. The appearance of the view is customized by setting various properties of the Calendar.ResourceViewSettings object. We will build &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/custom-appearance-of-wpf-resource-view\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":3,"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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[74,104],"tags":[27,39,69,124,119,34,120,58],"class_list":["post-425","post","type-post","status-publish","format-standard","hentry","category-sample-code","category-scheduling-2","tag-calendar","tag-component","tag-control","tag-resource-view","tag-scheduler","tag-scheduling","tag-timetable","tag-wpf"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-6R","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/425","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":7,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":2456,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/425\/revisions\/2456"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}