Question

我想装饰WPF ProgressBar，如下图所示：

当前：

ProgressBar without decoration

装饰：

ProgressBar with decoration

此外，那些空白对角线应该从左到右移动选框动画。目前我有这个简单的风格用于当前的外观：

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" />
                        <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

任何人都可以帮我搞定吗？我搜索了它，但也许我错过了正确的关键字来找到这样的东西，至少我通常看到（比如在OS X进度条）这个“装饰”通常被使用。

提前致谢;）。

解决方案模板，答案代码稍作修改：

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}" Effect="{StaticResource LightStrongDownLinearShadowEffect}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" />
                        <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True">
                            <Border x:Name="DiagonalDecorator" Width="5000">
                                <Border.Background>
                                    <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute">
                                        <DrawingBrush.RelativeTransform>
                                            <TranslateTransform X="0" Y="0" />
                                        </DrawingBrush.RelativeTransform>
                                        <DrawingBrush.Drawing>
                                            <GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" />
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Border.Background>
                                <Border.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:15" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Border.Triggers>
                            </Border>
                        </Border>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

修改

来自codeproject.com的
This文章有一个“barber pole”进度条的工作版本。在文章中搜索“CandyCaneProgressPainter”。

上一个回答：

This几乎完全符合您的要求。所有你需要做的就是将矩形的可见性限制在你想要的百分比并改变高/宽比。

您想要的关键字是“故事板”，“动画”和“触发器”

以下是链接中的xaml以及关于使动画流畅的链接的一些注释：

<Rectangle x:Name="pole" Width="100" Height="20" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"> <DrawingBrush.RelativeTransform> <TranslateTransform X="0" Y="0" /> </DrawingBrush.RelativeTransform> <DrawingBrush.Drawing> <GeometryDrawing Brush="Red" Geometry="M10,0 25,0 15,25 0,25 Z" /> </DrawingBrush.Drawing> </DrawingBrush> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

我想如果删除“width”值会发生抽搐，但如果值被放回，它会顺利运行。怪异。

是的，确实它基本上需要用数字的倍数进行一些调整规则宽度在这种情况下动画可以是.1或.05如果例如你有5000宽......现在它工作太棒了！

Answer 2

在PART_Indicator边框中嵌入形状的复合路径以形成对角线。除非你想使用jquery插件或其他替代方案，否则你将不得不伪造Marquee效果以获得滚动的对角线。

然而，你在纯xaml中可以做的是创建对角线路径，制作很多很多它们以使诊断行的行非常长。由于它们嵌入指标边界，因此只能在其中显示。

现在创建一个新的故事板动画并使用ControlStoryboardAction Behavior触发它onload并将其设置为重复。抓住对角线复合路径，在时间轴上选择一个关键帧，从开始帧开始，然后将对角线的复合路径拖到一侧或向左设置一个大边距，这样在动画序列中它向右移动。这个想法是它的视觉骗局。您的对角线将仅作为动画故事板，仅模仿选框动画。所以那些线仍然会在条形图上移动，并且希望它们足够多，动画在内容加载之前不会重复。希望这是有道理的哈哈。这需要一些调整，但你可以得到一个体面的解决方案。祝你好运！

Answer 3

这篇文章相当陈旧，但我遇到了同样的问题并得到了一个很好的解决方案我想分享：

[self.scrollforImage setContentSize:CGSizeMake(3000, 3000)];// replace 3000, 3000 according to your need

ProgressBar主题与对角线装饰

3 个答案: