WPF 打造 Windows 7 風格氣象小工具：Weather Reader 控件客製化實戰

前言

Weather Reader User Control (WRUC) 是一個基於 WPF、C# 開發的天氣預報控件，預設串接 MSN Weather 服務。本文完整記錄如何取得源碼、修改預設地點/溫度單位、新增「當日溫度範圍」功能、打包 DLL，並建立透明無框 WPF 視窗模擬 Windows 7 Gadget 體驗。

一、取得與建置 WRUC 專案

1. 下載源碼：WeatherReader.zip
2. Visual Studio 開啟方案，建置產生 WeatherReaderMVC.dll
3. 預設介面顯示 Redmond（華盛頓州）天氣，華氏度

二、修改預設地點與溫度單位

2.1 Settings.settings 設定

• 開啟專案 Properties → Settings.settings
• 將 `WeatherLocationCode`、`WeatherLocationName`、`EncodedLocationName` 全部改為 `Beijing` / `CHXX0008`
• `DegreeType` 改為 `C`（攝氏度）

三、新增「當日溫度範圍」功能

3.1 分析 MSN Weather XML 結構

<forecast low="74" high="90" ... date="2010-07-20" />  <!-- 第一筆為當日 -->

• 服務網址：`https://weather.service.msn.com/data.aspx?src=vista&wealocations=wc:CHXX0008`
• `low`/`high` 為華氏度，需轉換

3.2 擴充 WeatherPoint 實體

// WeatherPoint.cs
private double highTemperature;
public double HighTemperature
{
    get { return Math.Floor((highTemperature - 32) * 5 / 9); } // 華氏轉攝氏
    set { highTemperature = value; }
}

private double lowTemperature;
public double LowTemperature
{
    get { return Math.Floor((lowTemperature - 32) * 5 / 9); }
    set { lowTemperature = value; }
}

public string TemperatureRangeString
    => $"{LowTemperature}° - {HighTemperature}°";

3.3 解析邏輯注入

// MsnWeatherDataProvider.cs -> GetLatestWeatherReport()
result.LatestWeather.HighTemperature = result.Forecast[0].HighTemperature;
result.LatestWeather.LowTemperature = result.Forecast[0].LowTemperature;
result.Location = location;

• `Forecast[0]` 即當日預報
• 在指派 `Location` 前注入，確保 UI 繫結即時生效

3.4 XAML 介面加入顯示

<TextBlock Text="{Binding Path=LatestWeather.TemperatureRangeString, Mode=OneWay}"
           Foreground="{Binding Path=TextColor}"
           HorizontalAlignment="Right" Margin="0,64,43,0"
           VerticalAlignment="Top" x:Name="currentTempRangeText" />

四、建立模擬 Gadget 的 WPF 視窗專案

4.1 專案設定

• 新建 WPF Application：WpfWeatherReporter
• 參考重新建置後的 WeatherReaderMVC.dll

4.2 MainWindow.xaml 關鍵屬性

<Window x:Class="WpfWeatherReporter.MainWindow"
        xmlns:w="clr-namespace:WeatherReaderMVC;assembly=WeatherReaderMVC"
        Title="MainWindow" Height="250" Width="300"
        WindowStyle="None" Background="Transparent"
        AllowsTransparency="True" ResizeMode="NoResize"
        WindowStartupLocation="CenterScreen"
        Icon="/WpfWeatherReporter;component/Images/Sunny.ico">
    <Grid>
        <w:WeatherReaderUI MouseLeftButtonDown="WeatherReaderUI_MouseLeftButtonDown" />
        <Image Source="/WpfWeatherReporter;component/Images/Close.png"
             Width="19" Height="19" Margin="253,63,7,132"
             MouseLeftButtonDown="Image_MouseLeftButtonDown" ToolTip="Close" />
    </Grid>
</Window>

• `WindowStyle="None" + AllowsTransparency="True"` → 無框透明視窗
• `ResizeMode="NoResize"` 固定尺寸
• 引用自訂命名空間 `w:` 掛載控件

4.3 視窗拖曳與關閉

private void WeatherReaderUI_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.DragMove(); // 標題列功能
}

private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.Close();
}

五、執行成果展示

六、原始碼下載

• 完整 WPF 專案：WpfWeatherReporter.zip
• WRUC 控件源碼：WeatherReader.zip

出處：https://www.cnblogs.com/gnielee/

結語

透過 WPF 強大的繫結、樣式、透明視窗特性，配合開源控件微調，快速複刻 Windows 7 Gadget 體驗。同樣架構可延伸至股票、行事曆、系統監控等桌面小工具開發。