Guía de controles WinUI 3 C++ — Deslizadores y barras de progreso

Las barras de progreso se usan habitualmente en proyectos. WinUI C++ nos proporciona varios controles de barra de progreso para utilizar.

Modificar el 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 Deslizador de valor único -->
            <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"/>
                <!-- Enlace TextBlock separado para evitar errores de sintaxis al concatenar cadenas -->
                <TextBlock Text="Current Value: " FontSize="14">
                    <Run Text="{x:Bind SingleSlider.Value}"/>
                </TextBlock>
            </StackPanel>

            <!-- 3. ProgressBar - Linear Progress Indicator Barra de progreso lineal -->
            <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>
                <!-- Estado de carga indeterminado -->
                <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 Anillo de progreso circular -->
            <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>
Lenguaje del código: HTML, XML (xml)

Elimina las propiedades usadas en la lección anterior de los archivos IDL, C++ y .h

Descargar código fuente

Guía de controles WinUI 3 C++ — Deslizadores y barras de progreso