WinUI 3 C++ 控制項實作教學 — 滑塊、進度條控制項

進度條在專案開發時經常使用，WinUI C++ 提供數種進度條控制項供我們直接使用。

修改 XAML 程式碼

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <ScrollViewer Padding="20" VerticalScrollMode="Auto">
        <StackPanel Spacing="32">
            <!-- 1. Slider - Single Value Slider 單值滑動軸 -->
            <StackPanel>
                <TextBlock Text="1. Slider (Single Value)" FontSize="16" FontWeight="SemiBold"/>
                <Slider
                    x:Name="SingleSlider"
                    Width="500"
                    Minimum="0"
                    Maximum="100"
                    Value="50"
                    TickPlacement="BottomRight"
                    TickFrequency="10"/>
                <!-- 獨立 TextBlock 繫結，避免字串拼接語法錯誤 -->
                <TextBlock Text="Current Value: " FontSize="14">
                    <Run Text="{x:Bind SingleSlider.Value}"/>
                </TextBlock>
            </StackPanel>


            <!-- 3. ProgressBar - Linear Progress Indicator 線性進度條 -->
            <StackPanel>
                <TextBlock Text="3. ProgressBar (Linear)" FontSize="16" FontWeight="SemiBold"/>
                <ProgressBar
                    x:Name="LinearProgress"
                    Width="500"
                    Height="10"
                    Minimum="0"
                    Maximum="100"
                    Value="65"/>
                <TextBlock Text="Progress: " FontSize="14">
                    <Run Text="{x:Bind LinearProgress.Value}"/>
                </TextBlock>
                <!-- 不確定載入狀態 -->
                <ProgressBar Width="500" Height="10" IsIndeterminate="True" Margin="0,8,0,0"/>
                <TextBlock Text="Indeterminate Loading State" FontSize="12" Foreground="#666"/>
            </StackPanel>

            <!-- 4. ProgressRing - Circular Loading Ring 環形進度環 -->
            <StackPanel Orientation="Horizontal" Spacing="40">
                <StackPanel>
                    <TextBlock Text="4. ProgressRing (Determinate)" FontSize="16" FontWeight="SemiBold"/>
                    <ProgressRing
                        x:Name="RingProgress"
                        Width="60" Height="60"
                        Minimum="0" Maximum="100" Value="40"/>
                    <TextBlock HorizontalAlignment="Center">
                        <Run Text="{x:Bind RingProgress.Value}"/>
                    </TextBlock>
                </StackPanel>
                <StackPanel>
                    <TextBlock Text="ProgressRing (Loading)" FontSize="16" FontWeight="SemiBold"/>
                    <ProgressRing Width="60" Height="60" IsIndeterminate="True"/>
                    <TextBlock Text="Loading..." HorizontalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>

</Window>
Code language: HTML, XML (xml)

IDL、C++、.h 標頭檔：移除上一堂課使用的屬性定義

原始專案下載

WinUI 3 C++ 控制項實作教學 — 滑塊、進度條控制項