如何在WinUI 3中修改ProgressBarTrackHeight的高度？

你可以通过两种方式修改ProgressBar的轨道高度：

方法一：重写系统资源 #

WinUI 3的ProgressBar轨道高度由系统资源ProgressBarTrackHeight定义，直接在页面或应用的资源字典中重写该资源即可：

<Page.Resources>
    <!-- 设置轨道高度为10，可根据需求调整数值 -->
    <x:Double x:Key="ProgressBarTrackHeight">10</x:Double>
</Page.Resources>

<ProgressBar Width="130" Value="30" />

这种方法最简单，无需修改完整样式，所有引用该资源的ProgressBar都会自动应用新高度。

方法二：自定义ProgressBar样式 #

如果需要更精细的控制（比如同时调整进度条高度、圆角等），可以自定义ProgressBar的完整样式，修改轨道部分的高度：

<Page.Resources>
    <Style TargetType="ProgressBar">
        <Setter Property="Foreground" Value="{ThemeResource ProgressBarForegroundBrush}" />
        <Setter Property="Background" Value="{ThemeResource ProgressBarBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource ProgressBarBorderBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ProgressBarBorderThemeThickness}" />
        <Setter Property="Minimum" Value="0" />
        <Setter Property="Maximum" Value="100" />
        <Setter Property="Value" Value="0" />
        <!-- 可直接设置ProgressBar整体高度，或在模板内修改轨道高度 -->
        <Setter Property="Height" Value="15" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Padding" Value="{ThemeResource ProgressBarPadding}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="DeterminateRoot" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="DeterminateRoot" Opacity="1">
                            <!-- 此处直接修改Track的Height属性 -->
                            <Border x:Name="Track" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{ThemeResource ProgressBarCornerRadius}" Height="12" />
                            <Border x:Name="Progress" Background="{TemplateBinding Foreground}" CornerRadius="{ThemeResource ProgressBarCornerRadius}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Left" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, Converter={StaticResource ProgressBarValueConverter}}" />
                        </Grid>
                        <Grid x:Name="IndeterminateRoot" Opacity="0">
                            <Border x:Name="IndeterminateTrack" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{ThemeResource ProgressBarCornerRadius}" />
                            <Border x:Name="IndeterminateProgress" Background="{TemplateBinding Foreground}" CornerRadius="{ThemeResource ProgressBarCornerRadius}" Margin="{TemplateBinding Padding}">
                                <Animation.AnimationMixer>
                                    <ScalarAnimationMixer Target="Opacity" Duration="0:0:2" RepeatBehavior="Forever">
                                        <KeyFrame Time="0" Value="0.5" />
                                        <KeyFrame Time="0:0:1" Value="1" />
                                        <KeyFrame Time="0:0:2" Value="0.5" />
                                    </ScalarAnimationMixer>
                                </Animation.AnimationMixer>
                                <Rectangle x:Name="IndeterminateBar" Fill="{TemplateBinding Foreground}" CornerRadius="{ThemeResource ProgressBarCornerRadius}">
                                    <Animation.AnimationMixer>
                                        <ScalarAnimationMixer Target="TranslateTransform.X" Duration="0:0:1.5" RepeatBehavior="Forever">
                                            <KeyFrame Time="0" Value="-100" />
                                            <KeyFrame Time="0:0:1.5" Value="300" />
                                        </ScalarAnimationMixer>
                                    </Animation.AnimationMixer>
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform />
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Border>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<ProgressBar Width="130" Value="30" />

在这个自定义样式中，你可以直接修改Track元素的Height属性，或者调整ProgressBar的整体Height来达到需求。

内容的提问来源于stack exchange，提问作者jasonzs