且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

WPF一步一脚印系列(1):万事起头难

更新时间:2022-09-16 20:26:56

一直从事Asp.Net的开发,而C/S的开发方面简直是一片空白,于是从上星期开始就痛下决心开始学习WPF。我采取的策略是网上看基础资料+做简单的demo练习+网上查资料。从csdn上下了个比较不错的基础讲解文档,花了几天时间终于把它看完,算是有个基本了解吧,今天开始写些小练习。

  这个系列主要是用来记录自己学习WPF的心路历程,以实例为主配合原理和注意点的说明,有纰漏之处请大家多多指正!!^_^

实例1——倒计算器                                                                                                                                                                                   

最终效果:

WPF一步一脚印系列(1):万事起头难

Window1.xaml:

WPF一步一脚印系列(1):万事起头难
 1 <Window x:Class="CountingLeader.Window1"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="Window1" Height="300" Width="300">
5 <Grid>
6 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
7 <StackPanel.Resources>
8 <Style TargetType="TextBlock">
9 <Setter Property="FontSize" Value="50"></Setter>
10 </Style>
11 </StackPanel.Resources>
12 <TextBlock x:Name="tbkHour" Text="00"></TextBlock>
13 <TextBlock Text=":"></TextBlock>
14 <TextBlock x:Name="tbkMinute" Text="10"></TextBlock>
15 <TextBlock Text=":"></TextBlock>
16 <TextBlock x:Name="tbkSecond" Text="45"></TextBlock>
17 </StackPanel>
18 </Grid>
19 </Window>
WPF一步一脚印系列(1):万事起头难

Window1.xaml.cs:

WPF一步一脚印系列(1):万事起头难
 1 namespace CountingLeader
2 {
3 /// <summary>
4 /// Window1.xaml 的交互逻辑
5 /// </summary>
6 public partial class Window1 : Window
7 {
8 private CountingLeaderManager clm = null;
9
10 public Window1()
11 {
12 InitializeComponent();
13
14 this.Loaded += new RoutedEventHandler(Window_OnLoaded);
15 clm = new CountingLeaderManager();
16 }
17
18 public void Window_OnLoaded(object sender, RoutedEventArgs e)
19 {
20 clm.TotalCount = Convert.ToInt32(this.tbkHour.Text) * 3600 +
21 Convert.ToInt32(this.tbkMinute.Text) * 60 +
22 Convert.ToInt32(this.tbkSecond.Text);
23
24 DispatcherTimer timer = new DispatcherTimer();
25 timer.Interval = new TimeSpan(0,0,1);
26 timer.Tick += (ss, ee) =>
27 {
28 if (clm.CanReduce())
29 {
30 clm.Reduce();
31 this.tbkHour.Text = clm.GetHour();
32 this.tbkMinute.Text = clm.GetMinute();
33 this.tbkSecond.Text = clm.GetSecond();
34 }
35 else
36 timer.Stop();
37 };
38 timer.Start();
39 }
40 }
41 }
WPF一步一脚印系列(1):万事起头难

CountingLeader.cs:

WPF一步一脚印系列(1):万事起头难
 1 namespace CountingLeader
2 {
3 public class CountingLeaderManager
4 {
5 public int TotalCount { get; set; }
6
7 public bool CanReduce()
8 {
9 if (TotalCount == 0)
10 return false;
11 else
12 return true;
13 }
14
15 public int Reduce()
16 {
17 return --TotalCount;
18 }
19
20 public string GetHour()
21 {
22 return GetCount(() => TotalCount / 3600 );
23 }
24
25 public string GetMinute()
26 {
27 return GetCount(() => TotalCount % 3600 / 60);
28 }
29
30 public string GetSecond()
31 {
32 return GetCount(() => TotalCount % 60);
33 }
34
35 private string GetCount(Func<int> func)
36 {
37 string result = string.Empty;
38 int resultInt = func();
39 if (resultInt <= 9)
40 result = "0" + resultInt;
41 else
42 result = resultInt.ToString();
43
44 return result;
45 }
46 }
47 }
WPF一步一脚印系列(1):万事起头难

wf时期的有三种计时器供大家使用:System.Threading.Timer、System.Timers.Timer和System.Windows.Forms.Timer,如果计时器用在UI上那么就使用System.Timers.Timer,因为它由UI线程实现;如果实现与UI无关的操作可以用System.Threading.Timer,它是从系统的线程池中取线程实现计时器的功能,但因不是用UI线程实现而无法操作UI上的控件;而System.Timers.Timer是由服务器实现,具体有待研究。

而该练习使用的计时器是System.Windows.Threading.DispatcherTimer,.net frameword 3.0后提供,感觉像是wf中的System.Windows.Forms.Timer。

注意:由UI线程实现的计时器会阻塞UI的交互操作。

1 timer.Tick += (ss, ee) =>
2 {
3 System.Threading.Thread.Sleep(100000);
4 };

将Window1.xaml.cs文件中的timer.Tick部分修改为上述代码后,明显看到计时器跟UI交互操作使用的同一个线程。

实例2:简易多媒体播放器                                                                                                                                  

最终效果:

WPF一步一脚印系列(1):万事起头难

 

WPF一步一脚印系列(1):万事起头难

Window1.xaml:

 

WPF一步一脚印系列(1):万事起头难
 1 <Window x:Class="VideoPlayer.Window1"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="Window1" Height="300" Width="300">
5 <StackPanel>
6 <Border Background="Gray">
7 <Border.BorderBrush>
8 <SolidColorBrush Color="Silver"></SolidColorBrush>
9 </Border.BorderBrush>
10 <MediaElement x:Name="me" LoadedBehavior="Manual" MinHeight="200"
11 Volume="{Binding ElementName=volumeSlider,Path=Value}"></MediaElement>
12 </Border>
13 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
14 <StackPanel.Resources>
15 <Style TargetType="Button">
16 <Setter Property="Background">
17 <Setter.Value>
18 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
19 <LinearGradientBrush.GradientStops>
20 <GradientStopCollection>
21 <GradientStop Color="White" Offset="0.1"></GradientStop>
22 <GradientStop Color="#232323" Offset="1"></GradientStop>
23 </GradientStopCollection>
24 </LinearGradientBrush.GradientStops>
25 </LinearGradientBrush>
26 </Setter.Value>
27 </Setter>
28 <Setter Property="Margin" Value="2"></Setter>
29 <Setter Property="FontStyle" Value="Italic"></Setter>
30 <Style.Triggers>
31 <Trigger Property="IsMouseOver" Value="true">
32 <Setter Property="Foreground" Value="Gold"></Setter>
33 </Trigger>
34 <Trigger Property="IsEnabled" Value="false">
35 <Setter Property="Foreground" Value="Gray"></Setter>
36 </Trigger>
37 </Style.Triggers>
38 </Style>
39 </StackPanel.Resources>
40 <Button x:Name="btnOpenFile" Content="Open File" Click="btnOpenFile_Click"></Button>
41 <Button x:Name="btnPlayOrPause" Content="Play" Click="btnPlayOrPause_Click" IsEnabled="False"></Button>
42 <Button x:Name="btnStop" Content="Stop" Click="btnStop_Click" IsEnabled="False"></Button>
43 <Button x:Name="btnBack" Content="Back" Click="btnBack_Click" IsEnabled="False"></Button>
44 <Button x:Name="btnForward" Content="Forward" Click="btnForward_Click" IsEnabled="False"></Button>
45 </StackPanel>
46 <StackPanel Orientation="Horizontal">
47 <TextBlock Text="Volume:"></TextBlock>
48 <Slider x:Name="volumeSlider" Maximum="1" Minimum="0" Value="0.5" Width="200" ></Slider>
49 </StackPanel>
50 </StackPanel>
51 </Window>
WPF一步一脚印系列(1):万事起头难

说明:

1.MediaElement的Volume(声音)是依赖属性可以使用Slider作为数据源将Slider的Value值绑定到MediaElement;

2.Style中Trigger用来设置按钮的不可用、鼠标在上面时样式的变化。

Window1.xaml.cs:

 

WPF一步一脚印系列(1):万事起头难
 1 namespace VideoPlayer
2 {
3 /// <summary>
4 /// Window1.xaml 的交互逻辑
5 /// </summary>
6 public partial class Window1 : Window
7 {
8 private bool IsPlaying = false;
9
10 public Window1()
11 {
12 InitializeComponent();
13 }
14
15 private void btnOpenFile_Click(object sender, RoutedEventArgs e)
16 {
17 OpenFileDialog ofd = new OpenFileDialog();
18 ofd.Filter = "mp3文件(*.mp3)|*.mp3|wmv文件(*.wmv)|*.wmv|avi文件(*.avi)|*.avi";
19 if(ofd.ShowDialog()==System.Windows.Forms.DialogResult.OK)
20 {
21 this.me.Source = new Uri(ofd.FileName, UriKind.Absolute);
22 this.btnForward.IsEnabled = true;
23 this.btnBack.IsEnabled = true;
24 this.btnPlayOrPause.IsEnabled = true;
25 this.btnStop.IsEnabled = true;
26 }
27 }
28
29 private void btnForward_Click(object sender, RoutedEventArgs e)
30 {
31 this.me.Position += TimeSpan.FromSeconds(10);
32 }
33
34 private void btnBack_Click(object sender, RoutedEventArgs e)
35 {
36 this.me.Position -= TimeSpan.FromSeconds(10);
37 }
38
39 private void btnPlayOrPause_Click(object sender, RoutedEventArgs e)
40 {
41 if (IsPlaying)
42 {
43 this.me.Pause();
44 (sender as System.Windows.Controls.Button).Content = "Play";
45 IsPlaying = false;
46 }
47 else
48 {
49 this.me.Play();
50 (sender as System.Windows.Controls.Button).Content = "Pause";
51 IsPlaying = true;
52 }
53 }
54
55 private void btnStop_Click(object sender, RoutedEventArgs e)
56 {
57 this.btnPlayOrPause.Content = "Play";
58 this.me.Stop();
59 IsPlaying = false;
60 }
61 }
62 }
WPF一步一脚印系列(1):万事起头难

说明:

1.这里使用了System.Windows.Forms.OpenFileDialog控件,如果针对Window7开发可以使用WindowsAPICodePack;

 

以上是今天做的练习,十分简单最适合像我这样的初学者了,一步一个脚印坚持不懈!!



如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
WPF一步一脚印系列(1):万事起头难

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/archive/2011/12/31/2308925.html,如需转载请自行联系原作者