WPF 自定义进度条

2016-08-24 08:30:45来源:cnblogs.com作者:WinterFish人点击

WPF设计界面过程中,有时需要设计一种可手动滑动修改并实时显示的进度条

进度条,效果如下:

 

  

颜色、图标、节点什么的,都可以重新替换。

 前端XMAL代码: 

<UserControl x:Class="WpfApplication2.ProgressBarControl"            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="40" d:DesignWidth="300" Loaded="ProgressBarControl_OnLoaded">    <UserControl.Resources>        <Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">            <Setter Property="SnapsToDevicePixels" Value="true" />            <Setter Property="OverridesDefaultStyle" Value="true" />            <Setter Property="IsTabStop" Value="false" />            <Setter Property="Focusable" Value="false" />            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type RepeatButton}">                        <Border Background="Transparent" />                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">            <Setter Property="SnapsToDevicePixels" Value="true" />            <Setter Property="OverridesDefaultStyle" Value="true" />            <Setter Property="Height" Value="18" />            <Setter Property="Width" Value="18" />            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type Thumb}">                        <!--手动绘制图标-->                        <Grid>                            <Ellipse Height="15" Width="4" Fill="Blue" Margin="0,3,0,0"></Ellipse>                            <Ellipse Height="15" Width="12" Fill="Blue" Margin="-0,-4,0,0"></Ellipse>                        </Grid>                        <!--<Image Source="图标.png"></Image>-->                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>    </UserControl.Resources>    <Grid>        <StackPanel>            <Slider x:Name="MySlider" Value="1" Maximum="10" Margin="-6,0,0,0">                <Slider.Template>                    <ControlTemplate TargetType="{x:Type Slider}">                        <Grid>                            <Grid.RowDefinitions>                                <RowDefinition Height="Auto" />                                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />                                <RowDefinition Height="Auto" />                            </Grid.RowDefinitions>                            <TickBar x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Height="4" Visibility="Collapsed"/>                            <Border x:Name="TrackBackground" Margin="0" CornerRadius="2" Height="4" Grid.Row="1" BorderThickness="1"/>                            <Track Grid.Row="1" x:Name="PART_Track">                                <Track.DecreaseRepeatButton>                                    <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />                                </Track.DecreaseRepeatButton>                                <Track.Thumb>                                    <Thumb Style="{StaticResource SliderThumbStyle}" />                                </Track.Thumb>                                <Track.IncreaseRepeatButton>                                    <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />                                </Track.IncreaseRepeatButton>                            </Track>                            <TickBar x:Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Visibility="Collapsed" />                        </Grid>                        <ControlTemplate.Triggers>                            <Trigger Property="TickPlacement" Value="TopLeft">                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />                            </Trigger>                            <Trigger Property="TickPlacement" Value="BottomRight">                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />                            </Trigger>                            <Trigger Property="TickPlacement" Value="Both">                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />                            </Trigger>                        </ControlTemplate.Triggers>                    </ControlTemplate>                </Slider.Template>            </Slider>            <ProgressBar x:Name="MyProgressBar" Height="12" Foreground="Blue" Background="LightGray" BorderBrush="Transparent" Value="{Binding Value, ElementName=MySlider}" Maximum="100"/>            <Grid>                <Grid.ColumnDefinitions>                    <ColumnDefinition/>                    <ColumnDefinition/>                    <ColumnDefinition/>                    <ColumnDefinition/>                    <ColumnDefinition/>                </Grid.ColumnDefinitions>                <Ellipse Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>                <Ellipse Grid.Column="1" Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>                <Ellipse Grid.Column="2" Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>                <Ellipse Grid.Column="3" Fill="LightBlue" Height="4" Width="4" HorizontalAlignment="Right"/>            </Grid>        </StackPanel>    </Grid></UserControl>

 

后台代码: 

    /// <summary>    /// ProgressBarControl.xaml 的交互逻辑    /// </summary>    public partial class ProgressBarControl : UserControl    {        public ProgressBarControl()        {            InitializeComponent();        }        private void ProgressBarControl_OnLoaded(object sender, RoutedEventArgs e)        {            MySlider.Value = Value;        }        #region 属性        /// <summary>        /// 进度条值        /// </summary>        public double Value        {            get { return (double)GetValue(ValueProperty); }            set            {                SetValue(ValueProperty, value);            }        }        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double)        , typeof(ProgressBarControl), new PropertyMetadata(1.0));        #endregion    }

2、界面引用

<wpfApplication2:ProgressBarControl Width="300" Value="2" VerticalAlignment="Center"></wpfApplication4:ProgressBarControl>

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台