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++ 컨트롤 편 – 슬라이더, 진행 막대 컨트롤