如何将UWP默认进度条改为从下到上填充的垂直样式？

嘿，我来帮你解决这个垂直进度条的问题！你提到用RenderTransform后进度条超出了Grid范围，这是因为默认水平进度条旋转后，它的布局边界还是原来的水平尺寸，导致和Grid的尺寸不匹配。下面给你两种靠谱的解决方案：

方法一：调整旋转参数+布局适配（快速实现） #

这种方法不用改模板，只要调整旋转的原点和容器设置就能解决超出问题，还能实现从下到上填充：

1. 给ProgressBar设置RenderTransformOrigin="0.5,0.5"，让它围绕中心旋转，避免偏移
2. 旋转后进度条的宽高会互换，所以要把ProgressBar的宽高设置成原来的相反值（比如原来宽220、高40，旋转后就保持宽220、高40，但Grid要改成宽40、高220来适配）
3. 给Grid加上ClipToBounds="True"，把超出的部分裁剪掉

修改后的代码示例：

<StackPanel Background="{StaticResource SystemControlAcrylicWindowBrush}" Padding="40">
    <!-- 调整Grid尺寸适配旋转后的进度条，开启裁剪 -->
    <Grid BorderBrush="Black" BorderThickness="1" Width="40" Height="220" ClipToBounds="True">
        <ProgressBar Value="75" 
                     Width="220" Height="40"
                     RenderTransformOrigin="0.5,0.5">
            <ProgressBar.RenderTransform>
                <!-- 用-90度实现从下到上填充，90度是从上到下 -->
                <RotateTransform Angle="-90"/>
            </ProgressBar.RenderTransform>
        </ProgressBar>
    </Grid>
</StackPanel>

方法二：自定义垂直进度条样式（无布局问题，更灵活） #

如果不想用旋转的方式，直接自定义ProgressBar的模板，让它原生支持垂直从下到上填充，这样完全不会有超出边界的问题：

步骤1：添加百分比转换器 #

先在代码里写一个转换器，把进度值（0-100）转换成高度比例：

public class PercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        double progress = (double)value;
        return progress / 100; // 返回0-1的比例，用于绑定高度
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

步骤2：在XAML里声明转换器和自定义样式 #

<Page.Resources>
    <!-- 声明转换器 -->
    <local:PercentageConverter x:Key="PercentageConverter"/>
</Page.Resources>

<StackPanel Background="{StaticResource SystemControlAcrylicWindowBrush}" Padding="40">
    <Grid BorderBrush="Black" BorderThickness="1" Width="40" Height="220">
        <!-- 自定义垂直进度条 -->
        <ProgressBar Value="75" Width="40" Height="220">
            <ProgressBar.Style>
                <Style TargetType="ProgressBar">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ProgressBar">
                                <Grid Background="{TemplateBinding Background}">
                                    <!-- 进度背景轨道 -->
                                    <Rectangle x:Name="Track" 
                                               Fill="{ThemeResource ProgressBarTrackBackground}"
                                               Width="{TemplateBinding Width}" 
                                               Height="{TemplateBinding Height}"
                                               RadiusX="2" RadiusY="2"/>
                                    <!-- 进度填充部分，VerticalAlignment="Bottom"实现从下到上填充 -->
                                    <Rectangle x:Name="Progress" 
                                               Fill="{ThemeResource ProgressBarForeground}"
                                               Width="{TemplateBinding Width}" 
                                               Height="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource PercentageConverter}}"
                                               VerticalAlignment="Bottom"
                                               RadiusX="2" RadiusY="2"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ProgressBar.Style>
        </ProgressBar>
    </Grid>
</StackPanel>

这种方法的好处是完全原生适配垂直布局，不会有旋转带来的布局偏移问题，还能根据需求自定义进度条的圆角、颜色等样式。

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