Windows 8 Store Apps 開發教學 (4)：提示與範圍控件全解析

前言

在 Windows 8 Store Apps 開發中，提供視覺回饋與數值輸入是打造優質使用者體驗的關鍵。本篇將深入探討三大核心控件：ProgressRing（進度圈）、ProgressBar（進度條） 與 Slider（滑動條），涵蓋基本屬性、常見用法、進階樣式客製化，並附上完整可執行的 XAML 與 C# 程式碼範例。

一、ProgressRing - 進度圈控件

適用於無法預估完成時間的非確定性等待情境（如資料載入中）。核心屬性 IsActive 控制動畫啟停，搭配 Width/Height 調整尺寸。

範例：基本用法與 CheckBox 綁定控制

<Page x:Class="XamlDemo.Controls.ProgressRingDemo"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            <ProgressRing IsActive="{Binding IsChecked, ElementName=chkRunning}"
                          Width="200" Height="200"
                          HorizontalAlignment="Left" />
            <CheckBox Name="chkRunning" Content="Running" IsChecked="True" />
        </StackPanel>
    </Grid>
</Page>

二、ProgressBar - 進度條控件

支援確定性（顯示具體進度）與非確定性（循環動畫）兩種模式。關鍵屬性包含：

• IsIndeterminate：切換模式
• Minimum/Maximum/Value：設定數值範圍與目前進度
• ShowPaused/ShowError：顯示暫停/錯誤狀態視覺指示
• ValueChanged：進度變更事件

範例：雙模式展示與狀態切換

<Page x:Class="XamlDemo.Controls.ProgressBarDemo"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            <!-- 非確定性進度條 -->
            <ProgressBar IsIndeterminate="True" Width="200"
                         HorizontalAlignment="Left"
                         ShowPaused="{Binding IsChecked, ElementName=radPaused}"
                         ShowError="{Binding IsChecked, ElementName=radError}" />
            <!-- 確定性進度條 -->
            <ProgressBar IsIndeterminate="False" Width="200"
                         Minimum="0" Maximum="100" Value="50"
                         HorizontalAlignment="Left" Margin="0 20 0 0"
                         ShowPaused="{Binding IsChecked, ElementName=radPaused}"
                         ShowError="{Binding IsChecked, ElementName=radError}"/>
            <StackPanel Orientation="Horizontal" Margin="0 20 0 0">
                <RadioButton x:Name="radRunning" GroupName="ProgressState" Content="Running" IsChecked="True"/>
                <RadioButton x:Name="radPaused" GroupName="ProgressState" Content="Paused"/>
                <RadioButton x:Name="radError" GroupName="ProgressState" Content="Error"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

三、Slider - 滑動條控件

讓使用者在連續範圍內選取數值。豐富的屬性支援水平/垂直佈局、刻度線、步進值、自訂提示格式等。

• Orientation：Horizontal / Vertical
• IsDirectionReversed：反轉增加方向
• TickPlacement/TickFrequency：刻度線顯示位置與間距
• StepFrequency/SnapsTo：步進與吸附行為
• ThumbToolTipValueConverter：自訂拖曳提示內容（如加上百分號）

範例：多樣化 Slider 設定

<Page x:Class="XamlDemo.Controls.SliderDemo"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:XamlDemo.Controls"
      xmlns:myControls="using:MyControls"
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Grid Background="Transparent">
        <Grid.Resources>
            <local:MyThumbToolTipValueConverter x:Key="MyThumbToolTipValueConverter" />
        </Grid.Resources>
        <StackPanel Margin="120 0 0 0">
            <Slider Width="100" SmallChange="2" Value="20" HorizontalAlignment="Left" />
            <Slider Height="100" Orientation="Vertical" IsDirectionReversed="True"
                    HorizontalAlignment="Left" IsThumbToolTipEnabled="True"
                    ThumbToolTipValueConverter="{StaticResource MyThumbToolTipValueConverter}" />
            <Slider Width="800" Minimum="0" Maximum="800" StepFrequency="100"
                    HorizontalAlignment="Left" TickPlacement="Inline"
                    TickFrequency="80" SnapsTo="StepValues" />
            <!-- 自訂圓角 Slider (類 iOS 風格) -->
            <myControls:MySlider Width="100" HorizontalAlignment="Left" />
        </StackPanel>
    </Grid>
</Page>

數值轉換器實作 (C#)

using System;
using Windows.UI.Xaml.Data;

namespace XamlDemo.Controls {
    public sealed class MyThumbToolTipValueConverter : IValueConverter {
        public object Convert(object value, Type targetType, object parameter, string language) {
            return value + "%"; // 在值後附加百分號
        }
        public object ConvertBack(object value, Type targetType, object parameter, string language) {
            return null;
        }
    }
}

四、進階：自訂 Slider 樣式 - 打造圓角與圓形 Thumb

透過繼承 Slider 並覆寫 ControlTemplate，可實作圓角軌道與圓形拖曳塊 (Thumb)，效果類似 iOS 原生滑動條。

核心邏輯

• 在 OnApplyTemplate 取得軌道矩形 (HorizontalDecreaseRect、HorizontalTrackRect) 與 Thumb (HorizontalThumb)
• 於 OnValueChanged 動態調整已載入進度區塊 (HorizontalBorderCustom) 寬度，使其圓角完整覆蓋 Thumb 中心
• 將 Thumb 的預設 Border 改為 Ellipse 實現圓形
• 為軌道矩形加上 RadiusX/RadiusY 產生圓角

自訂控件類別

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Shapes;

namespace MyControls {
    public class MySlider : Slider {
        private Rectangle _loadedBackground;
        private Rectangle _loadedBackgroundCustom;
        private Thumb _thumb;

        public MySlider() : base() { this.DefaultStyleKey = typeof(MySlider); }

        protected override void OnValueChanged(double oldValue, double newValue) {
            base.OnValueChanged(oldValue, newValue);
            _loadedBackgroundCustom.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
            _loadedBackgroundCustom.Width = _loadedBackground.Width + _thumb.Width / 2;
        }

        protected override void OnApplyTemplate() {
            base.OnApplyTemplate();
            _loadedBackground = GetTemplateChild("HorizontalDecreaseRect") as Rectangle;
            _loadedBackgroundCustom = GetTemplateChild("HorizontalBorderCustom") as Rectangle;
            _thumb = GetTemplateChild("HorizontalThumb") as Thumb;
        }
    }
}

ControlTemplate 關鍵片段

<Style TargetType="local:MySlider">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MySlider">
                <Grid x:Name="HorizontalTemplate" Background="Transparent">
                    <Grid.Resources>
                        <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <!-- 使用 Ellipse 取代 Border 形成圓形 Thumb -->
                                        <Ellipse Stroke="{TemplateBinding BorderBrush}"
                                                 StrokeThickness="{TemplateBinding BorderThickness}"
                                                 Fill="{TemplateBinding Background}"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <!-- 軌道背景與已載入區塊加上 RadiusX/Y 形成圓角 -->
                    <Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3"
                               Fill="{TemplateBinding Background}" Grid.Row="1"
                               RadiusX="5" RadiusY="5"/>
                    <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}"
                               Grid.Row="1" RadiusX="5" RadiusY="5"/>
                    <!-- 輔助矩形 HorizontalBorderCustom 解決進度區塊圓角右側被 Thumb 切割問題 -->
                    <Rectangle x:Name="HorizontalBorderCustom" Grid.ColumnSpan="3" Grid.Row="1"
                               Stroke="{TemplateBinding BorderBrush}"
                               StrokeThickness="{TemplateBinding BorderThickness}"
                               Fill="{TemplateBinding Foreground}"
                               RadiusX="5" RadiusY="5" Width="0"/>
                    <Thumb x:Name="HorizontalThumb" ... Style="{StaticResource SliderThumbStyle}" />
                </Grid>
                <!-- VerticalTemplate 略 -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

總結

本篇完整介紹了 Windows 8 Store Apps 中三大提示與範圍控件的用法與進階客製化。掌握 ProgressRing、ProgressBar、Slider 的屬性與事件，並善用 ControlTemplate 與 ValueConverter，即能打造出符合現代 App 設計語言的互動體驗。完整原始碼可參考 源碼下載。