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 cpp h 文件 去掉上节课用到的属性

源码下载