Windows 8 風格應用開發入門：進階互動控件 Slider、Image、Tooltip、Popup、PasswordBox

本文涵蓋數值選取、圖片顯示、提示資訊、彈出視窗、密碼輸入五大進階控件的完整用法與多種效果模式。

Slider：數值範圍選取

拖曳滑塊選取數值，Value 為當前值，ValueChanged 事件監聽變更。

XAML

<Slider x:Name="slider" Minimum="0" Maximum="100" Value="50" 
        ValueChanged="Slider_ValueChanged" />

C#

var slider = new Slider { Minimum = 0, Maximum = 100, Value = 50 };
slider.ValueChanged += Slider_ValueChanged;

Image：圖片顯示

Source 指定圖片路徑，Stretch 控制縮放模式：Fill/None/Uniform/UniformToFill。

XAML

<Image Source="Assets/photo.jpg" Stretch="Uniform" Width="300" Height="200"/>

C#（需絕對路徑）

var img = new Image();
img.Source = new BitmapImage(new Uri("ms-appx:///Assets/photo.jpg"));
img.Stretch = Stretch.Uniform;
layoutRoot.Children.Add(img);

Tooltip：工具提示

滑鼠懸停顯示提示資訊，ToolTipService.ToolTip 附加屬性設定內容，Placement 設定位置。

XAML

<Image Source="Assets/icon.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="這是圖片說明" Placement="Bottom"/>
    </ToolTipService.ToolTip>
</Image>

C#

ToolTipService.SetToolTip(imageControl, new ToolTip { Content = "說明文字" });
ToolTipService.SetPlacement(imageControl, PlacementMode.Bottom);

Popup：彈出視窗

浮動容器，IsOpen 控制顯示，IsLightDismissEnabled 點擊外部自動關閉，支援動畫轉場。

模式一：基本 Popup

<Popup x:Name="popup1">
    <Border Background="White" BorderBrush="Gray" BorderThickness="1" Padding="20">
        <StackPanel>
            <TextBlock Text="彈出內容"/>
            <Button Content="關閉" Click="ClosePopup_Click"/>
        </StackPanel>
    </Border>
</Popup>

模式二：父容器內 Popup

模式三：無父容器動態建立

var popup = new Popup();
popup.Child = new PopupInputContent(); // 自訂 UserControl
popup.IsOpen = true;

模式四：輕量關閉

popup.IsLightDismissEnabled = true;

模式五：含動畫轉場

<Popup.ChildTransitions>
    <TransitionCollection>
        <PopupThemeTransition/>
    </TransitionCollection>
</Popup.ChildTransitions>

模式六：右側滑入模擬設定面板

popup.HorizontalOffset = Window.Current.Bounds.Width - popupWidth;

PasswordBox：密碼輸入

單行密碼輸入，PasswordChar 自訂遮罩字元，MaxLength 限制長度，IsPasswordRevealButtonEnabled 顯示揭示按鈕。

XAML

<PasswordBox x:Name="passwordBox" 
             PasswordChar="●" MaxLength="20" 
             IsPasswordRevealButtonEnabled="True" />

C#

var pwdBox = new PasswordBox {
    PasswordChar = '●',
    MaxLength = 20,
    IsPasswordRevealButtonEnabled = true
};
layoutRoot.Children.Add(pwdBox);

控件庫掌握後，下一章將介紹應用程式列的設計與命令組織。