MindFusion.Scheduling for WPF：資源視圖外觀自定義完整指南

前言

MindFusion.Scheduling for WPF 提供豐富的日曆與排程控件，資源視圖 是多資源時間管理的核心界面。本文詳細說明如何通過 Calendar.ResourceViewSettings 實現銀色主題下的專業外觀自定義。

一、自定義架構概覽

資源視圖外觀由以下樣式屬性控制，均位於 calendar.ResourceViewSettings：

二、完整自定義代碼實現

1. 定義共用資源

// 字體定義
FontFamily font = new FontFamily("Segoe UI");
FontFamily headerFont = new FontFamily("Segoe UI Light");

// 邊框筆刷 (淡灰色 #E0E0E0)
Brush borderBrush = new SolidColorBrush(Color.FromArgb(255, 224, 224, 224));

2. 視圖背景自定義

calendar.ResourceViewSettings.CalendarStyle = new Style(typeof(Control));
calendar.ResourceViewSettings.CalendarStyle.Setters.Add(
    new Setter(Control.BackgroundProperty, Brushes.White));

3. 行標題自定義

var headerStyle = new Style(typeof(Control));
headerStyle.Setters.Add(new Setter(Control.FontFamilyProperty, headerFont));
headerStyle.Setters.Add(new Setter(Control.FontSizeProperty, 13.0));
headerStyle.Setters.Add(new Setter(Control.ForegroundProperty, 
    new SolidColorBrush(Color.FromArgb(255, 64, 64, 64))));  // 深灰 #404040
headerStyle.Setters.Add(new Setter(Control.BackgroundProperty, Brushes.White));
headerStyle.Setters.Add(new Setter(Control.BorderBrushProperty, borderBrush));
headerStyle.Setters.Add(new Setter(Control.BorderThicknessProperty, 
    new Thickness(0, 0, 0, 1)));  // 僅底部分隔線

calendar.ResourceViewSettings.HeaderStyle = headerStyle;
calendar.ResourceViewSettings.ExpandableRows = false;  // 禁用展開行

4. 單元格自定義

var cellStyle = new Style(typeof(Control));
cellStyle.Setters.Add(new Setter(Control.BackgroundProperty, Brushes.White));
cellStyle.Setters.Add(new Setter(Control.BorderBrushProperty, borderBrush));
calendar.ResourceViewSettings.CellStyle = cellStyle;

// 週末單元格區分
var weekendStyle = new Style(typeof(Control));
weekendStyle.Setters.Add(new Setter(Control.BackgroundProperty, 
    new SolidColorBrush(Color.FromArgb(255, 250, 250, 250))));  // 極淡灰 #FAFAFA
weekendStyle.Setters.Add(new Setter(Control.BorderBrushProperty, borderBrush));
calendar.ResourceViewSettings.WeekendStyle = weekendStyle;

5. 時間軸自定義 (底部與中部)

// 底部時間軸
var bottomTl = calendar.ResourceViewSettings.BottomTimelineSettings;
bottomTl.CalendarStyle = new Style(typeof(Control));
bottomTl.CalendarStyle.Setters.Add(new Setter(Control.BackgroundProperty, Brushes.White));
bottomTl.CalendarStyle.Setters.Add(new Setter(Control.BorderBrushProperty, borderBrush));
bottomTl.CalendarStyle.Setters.Add(new Setter(Control.FontFamilyProperty, headerFont));
bottomTl.CalendarStyle.Setters.Add(new Setter(Control.FontSizeProperty, 13.0));
bottomTl.CalendarStyle.Setters.Add(new Setter(Control.FontWeightProperty, FontWeights.Normal));
bottomTl.NowFillBrush = Brushes.Transparent;  // 當前時間指示器透明

// 中部時間軸
var middleTl = calendar.ResourceViewSettings.MiddleTimelineSettings;
middleTl.CalendarStyle = new Style(typeof(Control));
middleTl.CalendarStyle.Setters.Add(new Setter(Control.BackgroundProperty, Brushes.White));
middleTl.CalendarStyle.Setters.Add(new Setter(Control.BorderBrushProperty, borderBrush));
middleTl.CalendarStyle.Setters.Add(new Setter(Control.FontFamilyProperty, headerFont));
middleTl.CalendarStyle.Setters.Add(new Setter(Control.FontSizeProperty, 13.0));
middleTl.CalendarStyle.Setters.Add(new Setter(Control.FontWeightProperty, FontWeights.Normal));
middleTl.NowFillBrush = Brushes.Transparent;

三、效果預覽

關鍵視覺特徵：

• 統一的白色背景與淡灰分隔線 (#E0E0E0)
• 行標題使用 Segoe UI Light 13pt 深灰字體 (#404040)
• 週末列極淡灰背景 (#FAFAFA) 視覺區分
• 時間軸字體與行標題一致，當前時間指示器透明化
• 整體低對比度、高留白，符合現代銀色主題美學

四、進階擴展建議

1. 動態主題切換：將樣式定義移至 ResourceDictionary，通過 Application.Current.Resources.MergedDictionaries 切換
2. 資源分組標題：使用 GroupHeaderStyle 自定義分組行外觀
3. 預約項樣式：通過 AppointmentStyleSelector 根據資源類型渲染不同顏色
4. 工具提示：自定義 ToolTipTemplate 顯示豐富預約詳情

五、總結

MindFusion.Scheduling WPF 資源視圖自定義的核心在於 ResourceViewSettings 下的六大樣式屬性。通過統一字體族 (Segoe UI 系)、低飽和度配色 (#404040/#E0E0E0/#FAFAFA)、精確邊框控制 (Thickness)、時間軸透明化，可快速構建專業級銀色主題界面。建議將樣式定義提取為獨立 ResourceDictionary，便於多視圖複用與主題切換。