8,735
社区成员
发帖
与我相关
我的任务
分享wpf 如何实现QQ管家进度条？
我想实现跟QQ管家一样的的进度条。那种像渐变 又好像不是渐变做的，均匀的增加进度颜色，又交替变换，希望老师们指点，我网上找不到此类资源 用啥语言写的都没事 可以参考一下就好
...全文
请发表友善的回复…
发表回复
xianglanyue_net 2014-06-17
- 打赏
- 举报
SadlyCodes 2014-06-09
- 打赏
- 举报
刚写了一个WPF控件 , 交流联系企鹅648144601
上代码 XAML
后台
上代码 XAML
<UserControl x:Class="WpfApplication1.SCProgressBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="52" d:DesignWidth="322" SizeChanged="UserControl_SizeChanged">
<Grid ClipToBounds="True" Height="75">
<Border HorizontalAlignment="Stretch" Height="20" Background="#D4D4D4" BorderThickness="1" BorderBrush="#FF797979">
<Grid Name="grid" HorizontalAlignment="Left" Height="20" Margin="0,0,0,0">
<StackPanel Name="stackPanel" Margin="-5,0,0,0" ClipToBounds="True" Background="#FFE2E2E2" Orientation="Horizontal">
<Rectangle Width="10" VerticalAlignment="Stretch" Fill="#5AABED">
<Rectangle.RenderTransform >
<SkewTransform AngleX="30">
</SkewTransform>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="10" VerticalAlignment="Stretch" Fill="#4C9FED">
<Rectangle.RenderTransform >
<SkewTransform AngleX="30">
</SkewTransform>
</Rectangle.RenderTransform>
</Rectangle>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard RepeatBehavior="Forever">
<ThicknessAnimation From="-10,0,0,0" To="-30,0,0,0" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</Grid>
</Border>
</Grid>
</UserControl>
后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace WpfApplication1
{
/// <summary>
/// SCProgressBar.xaml 的交互逻辑
/// </summary>
public partial class SCProgressBar : UserControl
{
private int _value=100;
public int Value
{
get { return _value; }
set {
_value = value;
grid.Width = (_value/100d)*ActualWidth;
}
}
public SCProgressBar()
{
InitializeComponent();
}
void CreatBlock()
{
stackPanel.Children.Clear();
for (int i = 0; i < (ActualWidth / 10)+3; i++)
{
var tempRect = new Rectangle
{
Width = 10,
VerticalAlignment = VerticalAlignment.Stretch,
Fill = new SolidColorBrush(i % 2 == 0
? Color.FromArgb(255, 255, 90, 90)
: Color.FromArgb(255, 255, 153, 37)),
RenderTransform = new SkewTransform(30, 0)
};
stackPanel.Children.Add(tempRect);
}
}
private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
CreatBlock();
}
}
}
MR00009 2014-06-04
- 打赏
- 举报
不就是一张图片么？螺旋旋转不过是视觉错觉罢了。
小紧张 2014-06-04
- 打赏
- 举报
正在下载2L提供的资源。
E次奥 2014-05-22
- 打赏
- 举报
+1，两个图片，根据百分百设置图片宽度
vbfool 2014-05-21
- 打赏
- 举报
我感觉进度部分可以用图片吧
Bonjour-你好 2014-05-20
- 打赏
- 举报
很像bootcss的条纹进度条，不过bootcss是用于HTML的，不知WPF上有没有
糊泥巴 2014-05-20
- 打赏
- 举报
在……:\WPF_Theme\WPF.Themes目录下任意一个主题文件夹中的Theme.xaml文件中查看
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<ControlTemplate.Resources>
<Storyboard x:Key="IndeterminateOn" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateGradientFill" Storyboard.TargetProperty="(Shape.Fill).(Brush.Transform).(TransformGroup.Children)[0].X" RepeatBehavior="Forever">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="00:00:.5" Value="20" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Border x:Name="PART_Track" BorderThickness="1" CornerRadius="3" Opacity="0.825">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" />
<GradientStop Color="#FFD8D8D8" Offset="0.327" />
<GradientStop Color="#FFDADADA" Offset="0.488" />
<GradientStop Color="#FFBEBEBE" Offset="0.539" />
<GradientStop Color="#FFD6D6D6" Offset="0.77" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBBBBBB" Offset="0" />
<GradientStop Color="#FF7E7E7E" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Rectangle x:Name="PART_Indicator" Margin="1" RadiusX="1.5" RadiusY="1.5" HorizontalAlignment="Left" Opacity="0.83" Fill="{DynamicResource ProgressBarIndicatorBrush}"/>
<Grid x:Name="IndeterminateRoot" Visibility="Collapsed">
<Rectangle x:Name="IndeterminateSolidFill" Margin="1" Fill="#FFFF8900" RadiusX="2" RadiusY="2"/>
<Rectangle x:Name="ProgressBarRootGradient" Margin="1" Canvas.ZIndex="1" RadiusX="1.5" RadiusY="1.5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#69535353" Offset="0"/>
<GradientStop Color="#FFFDCE9D" Offset="0.046"/>
<GradientStop Color="#96FFE4B6" Offset="0.18"/>
<GradientStop Color="#4FFFFFFF" Offset="0.507"/>
<GradientStop Color="#00D6D6D6" Offset="0.516"/>
<GradientStop Color="#FFFFC472" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="IndeterminateGradientFill" Margin="1" StrokeThickness="1" RadiusX="2" RadiusY="2" Opacity="0.7">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1" StartPoint="20,1" MappingMode="Absolute" SpreadMethod="Repeat">
<LinearGradientBrush.Transform>
<TransformGroup>
<TranslateTransform X="0"/>
<SkewTransform AngleX="-10"/>
</TransformGroup>
</LinearGradientBrush.Transform>
<GradientStop Color="#FFFFE3BB" Offset="0.088"/>
<GradientStop Color="#00FF9500" Offset="0.475"/>
<GradientStop Color="#FFFFE3BB" Offset="0.899"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Background="#A5FFFFFF" BorderBrush="#66FFFFFF" BorderThickness="1" Opacity="0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="DisabledVisualElement" Value="1" />
</Trigger>
<Trigger Property="IsIndeterminate" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOn}" />
</Trigger.EnterActions>
<Setter Property="Visibility" TargetName="PART_Track" Value="Collapsed" />
<Setter Property="Visibility" TargetName="PART_Indicator" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>糊泥巴 2014-05-20
- 打赏
- 举报
一看就知道您是需要自定义控件样式的，我给你一个demo以及demo的源码吧！
里面有大概24套主题，这也是在这里找的，但是具体链接忘记了。
效果类似于：
http://download.csdn.net/detail/cw580231/7375265
里面有大概24套主题，这也是在这里找的，但是具体链接忘记了。
效果类似于：
http://download.csdn.net/detail/cw580231/7375265
