在WPF中创建带有刻度线的滑动条

最新推荐文章于 2024-08-12 14:08:53 发布

weixin_33973600

最新推荐文章于 2024-08-12 14:08:53 发布

阅读量385

点赞数

http://blog.csdn.net/taomanman/article/details/5957247

用WPF制作简单的播放器

制作这个播放器我们要用到的一个控件是MediaElement。在WPF中有个MediaPlayer类，这个类位于System.Windows.Media命名空间下。（提示：由于MediaPlayer是基于Windows Media Player 10 或更高版本，因此，只要Windows Media Player能播放的视频格式（如.wmv, .avi, .mpg等），在MediaPlayer或MediaElement中都能播放（前提是系统中必须安装Windows Media Player 10 或更高）。）

首先从工具箱里面拖出一个MediaElement，拖出3个按钮分别用于播放、暂停、停止，再拖出两个Slider分别用于控制播放进度和音量大小。最后再调整一下布局界面，如下图：

注意：

MediaElement 的 LoadedBehavior 属性必须设置为 Manual 才能以交互方式停止、暂停和播放媒体。

XAML代码：

 
            <Window x:Class= 
            "Player.Window1" 
           
 
                 
            xmlns= 
            "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           
 
                 
            xmlns:x= 
            "http://schemas.microsoft.com/winfx/2006/xaml" 
           
 
                 
            Title= 
            "Window1" 
            Height= 
            "269" 
            Width= 
            "357" 
            > 
           
 
                 
            <Grid> 
           
 
                     
            <MediaElement Source= 
            "C:\Users\Administrator\Desktop\1.wmv"   
            Margin= 
            "0,0,0,64" 
            Name= 
            "mediaElement1" 
            LoadedBehavior= 
            "Manual"   
            UnloadedBehavior= 
            "Stop" 
            Stretch= 
            "Fill" 
            MediaOpened= 
            "mediaElement1_MediaOpened"  
            /> 
           
 
                     
            <Button Height= 
            "33" 
            Name= 
            "Play" 
            VerticalAlignment= 
            "Bottom" 
            FontSize= 
            "15" 
            FontFamily= 
            "arial" 
            Margin= 
            "13,0,0,3" 
            HorizontalAlignment= 
            "Left" 
            Width= 
            "34" 
            Click= 
            "button1_Click" 
            >►</Button> 
           
 
                     
            <Button Height= 
            "33" 
            Margin= 
            "55,0,0,3" 
            Name= 
            "Pause" 
            VerticalAlignment= 
            "Bottom" 
            HorizontalAlignment= 
            "Left" 
            Width= 
            "36" 
            Click= 
            "Pause_Click" 
            >█</Button> 
           
 
                     
            <Button Height= 
            "33" 
            Margin= 
            "100,0,0,3" 
            Name= 
            "Stop" 
            VerticalAlignment= 
            "Bottom" 
            HorizontalAlignment= 
            "Left" 
            Width= 
            "36" 
            Click= 
            "Stop_Click" 
            >●</Button> 
           
 
                     
            <Slider Height= 
            "27" 
            Margin= 
            "142,0,110,2" 
            Name= 
            "Volume" 
            VerticalAlignment= 
            "Bottom" 
            HorizontalContentAlignment= 
            "Left" 
            VerticalContentAlignment= 
            "Center"    
            Minimum= 
            "0" 
            Maximum= 
            "1" 
            Value= 
            "0.5" 
            ValueChanged= 
            "ChangeMediaVolume" 
            Width= 
            "80" 
            /> 
           
 
                     
            <Slider Height= 
            "23" 
            Margin= 
            "0,0,0,35" 
            Name= 
            "TimeLine"    
            VerticalAlignment= 
            "Bottom" 
            ValueChanged= 
            "TimeLine_ValueChanged_1" 
            Maximum= 
            "60" 
            /> 
           
 
           
 
                 
            </Grid> 
           
 
            </Window> 
           

下面是.cs文件中的功能代码：

 
            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; 
           
            namespace 
            Player 
           
            { 
           
            /// <summary> 
           
            /// Window1.xaml 的交互逻辑 
           
            /// </summary> 
           
            public 
            partial 
            class 
            Window1 : Window 
           
            { 
           
            public 
            Window1() 
           
            { 
           
            InitializeComponent(); 
           
            } 
           
            private 
            void 
            button1_Click( 
            object 
            sender, RoutedEventArgs e) 
           
            { 
           
            mediaElement1.Play(); 
           
            //将音量调节到我们设定的音量值0.5 
           
            InitializePropertyValues(); 
           
            } 
           
            private 
            void 
            Pause_Click( 
            object 
            sender, RoutedEventArgs e) 
           
            { 
           
            mediaElement1.Pause(); 
           
            } 
           
            private 
            void 
            Stop_Click( 
            object 
            sender, RoutedEventArgs e) 
           
            { 
           
            mediaElement1.Stop(); 
           
            } 
           
            private 
            void 
            ChangeMediaVolume( 
            object 
            sender, RoutedPropertyChangedEventArgs< 
            double 
            > e) 
           
            { 
           
            mediaElement1.Volume = ( 
            double 
            )Volume.Value; 
           
            } 
           
            void 
            InitializePropertyValues() 
           
            { 
           
            mediaElement1.Volume = ( 
            double 
            )Volume.Value; 
           
            } 
           
            private 
            void 
            mediaElement1_MediaOpened( 
            object 
            sender, RoutedEventArgs e) 
           
            { 
           
            //获取媒体的时间长度，并赋予进度条的Maxinum 
           
            TimeLine.Maximum = mediaElement1.NaturalDuration.TimeSpan.TotalMilliseconds; 
           
            } 
           
            private 
            void 
            TimeLine_ValueChanged_1( 
            object 
            sender, RoutedPropertyChangedEventArgs< 
            double 
            > e) 
           
            { 
           
            //获取当前进度条的Value,也就是要播放的时间位置，定位媒体的位置 
           
            int 
            SliderValue = ( 
            int 
            )TimeLine.Value; 
           
            TimeSpan ts =  
            new 
            TimeSpan(0, 0, 0, 0, SliderValue); 
           
            mediaElement1.Position = ts; 
           
            } 
           
            } 
           
            }

效果如下图所示：

其他就不多说了，要提一点的是这个进度条这样写还不能和媒体的进度一样前进，要实现这个功能的话可以用MediaTimeline，有时间可以试一试。

WPF：关于Slider控件的一些说明

来跟随我，细数一下WPF Slider控件一些需要说明的东西。

WPF的Slider控件继承自RangeBase类型，同继承自RangeBase的控件还有ProgressBar和ScrollBar，这类控件都是在一定数值范围内表示一个值的用途。

首先注意而RangeBase是基于浮点double类型的，不是基于整数int的，WPF中的许多度量单位都是基于浮点的。

对于Slider来说，RangeBase的Minimum（最小值）默认是0，Maximum（最大值）默认是10，Value（当前值）默认是0。

接下来就是RangeBase的剩余两个变量，SmallChange和LargeChange。SmallChange用来当Slider有焦点时，使用键盘的左右箭头来改变值的大小，而LargeChange则是点击Slider条的空白部分造成值的改变大小（和滚动条类似）。

SmallChange默认是0.1，LargeChange默认是1。

注意由于浮点数的表示涉及到精度的问题，某些值的表示无法准确而只能存储成近似值，所以一个空空的默认Slider会有如下问题：

首先XAML，一个默认Slider，下面一个TextBlock绑定Value属性来显示当前值：

运行程序，如果你从左往右按住右箭头（这样是SmallChange：0.1），结果会是：

而如果把值先设置成最右的10，然后按住左箭头从右往左滑动，结果会是：

问题看到了吧，Slider不仅把内部丑陋的冗长小数显示出来，而且还由于浮点数精度问题显示的值还不一样，上面两个图本来显示的都是8.3这个数。

由于Slider是基于RangeBase的，后者又是基于浮点数的，所以滑动值时作出的改变肯定是按浮点数的方式改变的，改变后的结果不一定是整数，为此我们可以吧Slider分成一段一段的，然后每一个段代表一个整数，让Slider仅在这些段中滑动，这个段就是Slider中所谓的”Tick”。具体每段的间隔可以用TickFrequency来设置，这个TickFrequency默认已经是1的，但是为了让Slider在Tick中移动，还需要设置IsSnapToTickEnabled属性。

这样的话：

结果就是无论怎样移动Slider的位置，值都会是整数。

不过Slider的Tick默认是不显示的，TickPlacement默认是None，通过调节TickPlacement，我们可以让Slider的Tick显示出来：

结果：可以看到由于TickPlacement设置成了Both，Slider上下出现了两列小点代表Tick。

上面都是按照TickFrequency均匀分布的Tick，Slider还有一个Ticks属性（类型是DoubleCollection）可以完全自定义所有Tick，Ticks被定义后，TickFrequency就没有意义了，如下代码：

仔细观察Slider，它的Tick会按照Ticks属性的定义变成这样：

有了上述知识，我们可以把WPF得Slider控件调整地再人性化一些，如下代码：

<TextBlock Text="{Binding ElementName=slider,Path=Minimum}"

TextAlignment="Left"/>

<TextBlock Text="{Binding ElementName=slider,Path=Value}"

TextAlignment="Center"/>

<TextBlock Text="{Binding ElementName=slider,Path=Maximum}"

TextAlignment="Right"/>

</UniformGrid>

<Slider Name="slider"

IsSnapToTickEnabled="True"

TickPlacement="TopLeft"

</StackPanel>

运行结果：

最后WPF的Slider还支持把一部分范围的选项高亮化（也就是所谓的SelectionRange：选择范围），没有什么实际意义，仅仅是界面上的高亮，不过还是很有意思的。实现需要设置Slider的IsSelectionRangeEnabled为True，接着设置SelectionStart和SelectionEnd来标记具体范围。

如下代码：

<Slider Name="slider" IsSnapToTickEnabled="True" TickPlacement="Both"

IsSelectionRangeEnabled="True"

SelectionStart="2" SelectionEnd="5"/>