wpf如何实现一个环状的风格的progressbar ？

yingwenzifu 2015-12-30 02:49:16
如题。

最好是能够纯模板实现。
...全文
377 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
yingwenzifu 2015-12-30
  • 打赏
  • 举报
 回复
引用 3 楼 songbing774933 的回复:
<!--注意：该样式的ProgressBar的最大值为1，,BorderThickness控制环的大小--> <!--ed需要引用：xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"--> <Style x:Key="LoopProcessBar" TargetType="{x:Type ProgressBar}"> <Setter Property="Background" Value="#C1D1DE"/> <Setter Property="Margin" Value="5"/> <Setter Property="Width" Value="300"/> <Setter Property="Height" Value="300"/> <Setter Property="BorderBrush" Value="BlueViolet"/> <Setter Property="BorderThickness" Value="60"/> <Setter Property="Foreground" Value="{StaticResource TextForeground}"/> <Setter Property="Maximum" Value="1"/> <Setter Property="Minimum" Value="0"/> <Setter Property="Value" Value="0"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="IsHitTestVisible" Value="False"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ProgressBar}"> <Viewbox Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center"> <Grid Margin="{TemplateBinding Margin}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" > <!--背景环--> <ed:Arc Margin="{TemplateBinding Margin}" Opacity="0.6" ArcThickness="{Binding Path=BorderThickness,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay,Converter={StaticResource ThicknessToDoubleConverter}}" StartAngle="0" Fill="{TemplateBinding Background}" EndAngle="360" Stretch="None" x:Name="arcOuter" /> <!--值-环--> <ed:Arc Margin="{TemplateBinding Margin}" x:Name="arcValue" ArcThickness="{Binding Path=BorderThickness,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay,Converter={StaticResource ThicknessToDoubleConverter}}" StartAngle="0" Fill="{TemplateBinding BorderBrush}" Stretch="None" Panel.ZIndex="2" EndAngle="{TemplateBinding Value, Converter={StaticResource PercentToAngleConverter}}" > </ed:Arc> <!--数值--> <TextBlock FontSize="{Binding FontSize,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay}" Text="{Binding Value,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent},StringFormat={}{0:p1}}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </Viewbox> </ControlTemplate> </Setter.Value> </Setter> </Style>
多谢
夏天的枫 2015-12-30
  • 打赏
  • 举报
 回复
给你一个DX里面的例子
<Window.Triggers>

        <EventTrigger RoutedEvent="Window.Unloaded">

            <BeginStoryboard>

                <Storyboard x:Name="board">

                    <DoubleAnimation Storyboard.TargetName="progressWindow" Storyboard.TargetProperty="Opacity" From="1.0" To="0" Duration="0:0:1.5" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

    </Window.Triggers>

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

        <Border BorderThickness="1" Height="76">

            <dx:BackgroundPanel Background="#00ffffff">

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto" />

                        <ColumnDefinition Width="Auto" />

                    </Grid.ColumnDefinitions>

                    <Grid x:Name="Ring" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Margin="27,0,7,0" Width="32" Height="32">

                        <Grid.RenderTransform>

                            <RotateTransform />

                        </Grid.RenderTransform>

                        <Grid.Triggers>

                            <EventTrigger RoutedEvent="Grid.Loaded">

                                <EventTrigger.Actions>

                                    <BeginStoryboard>

                                        <Storyboard Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="Ring">

                                            <DoubleAnimation RepeatBehavior="Forever" From="0" To="360" Duration="0:0:1"/>

                                        </Storyboard>

                                    </BeginStoryboard>

                                </EventTrigger.Actions>

                            </EventTrigger>

                        </Grid.Triggers>

                        <Path Stretch="Fill" Fill="CadetBlue"  Opacity="1" Data="F1 M 1266.95,765L 1271.97,765C 1271.74,768.666 1270.28,771.998 1268,774.585L 1264.45,771.039C 1265.84,769.372 1266.75,767.287 1266.95,765 Z " HorizontalAlignment="Right" Height="9.585" Margin="0,0,0,5.415" VerticalAlignment="Bottom" Width="7.516"/>

                        <Path Stretch="Fill" Fill="CadetBlue" Opacity="0.85" Data="F1 M 1271.97,763L 1266.95,763C 1266.75,760.713 1265.84,758.628 1264.45,756.961L 1268,753.415C 1270.28,756.003 1271.74,759.334 1271.97,763 Z " HorizontalAlignment="Right" Height="9.584" Margin="0,5.384,0,0" VerticalAlignment="Top" Width="7.516"/>

                        <Path Stretch="Fill" Fill="CadetBlue" Opacity="0.7" Data="F1 M 1257,753.045L 1257,748.031C 1260.67,748.257 1264,749.717 1266.58,752.001L 1263.04,755.547C 1261.37,754.157 1259.29,753.251 1257,753.045 Z " HorizontalAlignment="Right" Height="7.517" Margin="0,0,5.381,0" VerticalAlignment="Top" Width="9.585"/>

                        <Path Stretch="Fill" Fill="CadetBlue" Opacity="0.55" Data="F1 M 1255,748.031L 1255,753.045C 1252.71,753.251 1250.63,754.157 1248.96,755.547L 1245.41,752.001C 1248,749.717 1251.33,748.257 1255,748.031 Z " HorizontalAlignment="Left" Height="7.516" Margin="5.41,0,0,0" VerticalAlignment="Top" Width="9.585"/>

                        <Path Stretch="Fill" Fill="CadetBlue" Opacity="0.4" Data="F1 M 1244,753.416L 1247.55,756.961C 1246.16,758.628 1245.25,760.713 1245.04,763L 1240.03,763C 1240.26,759.334 1241.72,756.003 1244,753.416 Z " HorizontalAlignment="Left" Height="9.584" Margin="0.03,5.385,0,0" VerticalAlignment="Top" Width="7.516"/>

                        <Path Stretch="Fill" Fill="CadetBlue" Opacity="0.25" Data="F1 M 1245.01,765L 1240,765C 1240.23,768.666 1241.69,771.997 1243.97,774.585L 1247.52,771.039C 1246.13,769.372 1245.22,767.287 1245.01,765 Z " HorizontalAlignment="Left" Height="9.585" Margin="0,0,0,5.415" VerticalAlignment="Bottom" Width="7.516"/>

                        <Path Stretch="Fill" Fill="CadetBlue" Opacity="0.1" Data="F1 M 1255,780L 1255,774.986C 1252.71,774.78 1250.63,773.874 1248.96,772.484L 1245.41,776.029C 1248,778.314 1251.33,779.774 1255,780 Z " HorizontalAlignment="Left" Height="7.516" Margin="5.41,0,0,0" VerticalAlignment="Bottom" Width="9.585"/>

                    </Grid>

                    <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="12,0,27,0">

                        <TextBlock Text="加载中..." FontSize="14" />

                    </StackPanel>

                </Grid>

            </dx:BackgroundPanel>

        </Border>

    </Grid>
夏天的枫 2015-12-30
  • 打赏
  • 举报
 回复
不就是画一组圈圈，然后让他们一起旋转么
songbing774933 2015-12-30
  • 打赏
  • 举报
 回复
<!--注意：该样式的ProgressBar的最大值为1，,BorderThickness控制环的大小--> <!--ed需要引用：xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"--> <Style x:Key="LoopProcessBar" TargetType="{x:Type ProgressBar}"> <Setter Property="Background" Value="#C1D1DE"/> <Setter Property="Margin" Value="5"/> <Setter Property="Width" Value="300"/> <Setter Property="Height" Value="300"/> <Setter Property="BorderBrush" Value="BlueViolet"/> <Setter Property="BorderThickness" Value="60"/> <Setter Property="Foreground" Value="{StaticResource TextForeground}"/> <Setter Property="Maximum" Value="1"/> <Setter Property="Minimum" Value="0"/> <Setter Property="Value" Value="0"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="IsHitTestVisible" Value="False"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ProgressBar}"> <Viewbox Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center"> <Grid Margin="{TemplateBinding Margin}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" > <!--背景环--> <ed:Arc Margin="{TemplateBinding Margin}" Opacity="0.6" ArcThickness="{Binding Path=BorderThickness,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay,Converter={StaticResource ThicknessToDoubleConverter}}" StartAngle="0" Fill="{TemplateBinding Background}" EndAngle="360" Stretch="None" x:Name="arcOuter" /> <!--值-环--> <ed:Arc Margin="{TemplateBinding Margin}" x:Name="arcValue" ArcThickness="{Binding Path=BorderThickness,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay,Converter={StaticResource ThicknessToDoubleConverter}}" StartAngle="0" Fill="{TemplateBinding BorderBrush}" Stretch="None" Panel.ZIndex="2" EndAngle="{TemplateBinding Value, Converter={StaticResource PercentToAngleConverter}}" > </ed:Arc> <!--数值--> <TextBlock FontSize="{Binding FontSize,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay}" Text="{Binding Value,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent},StringFormat={}{0:p1}}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </Viewbox> </ControlTemplate> </Setter.Value> </Setter> </Style>
以专业开发人员为伍 2015-12-30
  • 打赏
  • 举报
 回复
或者类似 http://www.cnphp6.com/archives/85739 等等的，自己搜一下。
WPF实现超酷样式按钮
WPF实现超酷样式按钮
WPF控件主题样式，含21种不同风格漂亮主题
WPF控件主题资源，包括TabControl、ListBox、ComboBox、Button、ToggleButton、RadioButton、CheckBox、Slider、ProgressBar、TreeView等多个控件的样式。
Source Code: WPF拖放功能实现
Source Code: WPF拖放功能实现
WPF主题包（20款不同风格的皮肤）
20多款WPF主题皮肤样式，包含使用示例和代码，可轻松实现换肤，也可将样式代码复制到自己程序的资源文件中
WPF经典教程之Canvas、InkCanvas布局
在WPF中子元素的绝对定位的布局控件 其子元素使用Width、Height定义元素的宽度和高度 使用Convas.Left（Convas.Right）、Convas.Top（Convas.Bottom）定义与Convas容器的相对位置..... (更多资源：...
C#

110,535

社区成员

642,577

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章