这几天抽空在学习WPF，原本以为WPF与WinForm的主要区别只是在表现力(动画)方面，但真正了解学习WPF时，才发现其实在编码实现上WPF与WinForm也只能说是少部分相同(控件和窗体有着差不多的事件和属性)，也感觉WPF有些实现(数据绑定、控件的使用)不是很好理解。本文主要是分享下，我从网上找的一个"WPF仿windows图片查看器"项目源码基础上学习所得,先看下截图：
(一)主界面
(二)图片预览界面
主界面的界面代码，如下：
1 <Page x:Class="PhotoGallery.MainPage"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="Photo Gallery" Loaded="Page_Loaded">
5 <Page.Resources>
6 <LinearGradientBrush x:Key="shinyBrush" StartPoint="0,0" EndPoint="0,1">
7 <GradientStop Offset="0" Color="Gray"/>
8 <GradientStop Offset="0.3" Color="#FF222222"/>
9 <GradientStop Offset="0.3" Color="Black"/>
10 <GradientStop Offset="0.9" Color="Black"/>
11 <GradientStop Offset="0.9" Color="#FF222222"/>
12 <GradientStop Offset="1" Color="Gray"/>
13 </LinearGradientBrush>
14 </Page.Resources>
15 <Grid>
16 <Grid.RowDefinitions>
17 <RowDefinition Height="50"/>
18 <RowDefinition/>
19 <RowDefinition Height="55"/>
20 </Grid.RowDefinitions>
21 <Grid.ColumnDefinitions>
22 <ColumnDefinition Width="200"/>
23 <ColumnDefinition Width="Auto"/>
24 <ColumnDefinition/>
25 </Grid.ColumnDefinitions>
26 <Rectangle Grid.ColumnSpan="3" Fill="{StaticResource shinyBrush}"/>
27 <Rectangle Grid.Row="2" Grid.ColumnSpan="3" Fill="{StaticResource shinyBrush}"/>
28
29 <Menu Background="Transparent" Name="menu1" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="3" Foreground="White">
30 <MenuItem Header="_File" Foreground="White">
31 <MenuItem x:Name="favoritesMenu" Header="Add Current Folder to Fa_vorites" Click="favoritesMenu_Click" Foreground="Black" />
32 <MenuItem x:Name="deleteMenu" IsEnabled="False" Header="De_lete" Click="deleteMenu_Click" Foreground="Black" />
33 <MenuItem x:Name="renameMenu" IsEnabled="False" Header="Rena_me" Click="renameMenu_Click" Foreground="Black" />
34 <Separator/>
35 <MenuItem Header="_Refresh" Click="refreshMenu_Click" Foreground="Black" />
36 <Separator/>
37 <MenuItem Header="E_xit" Click="exitMenu_Click" Foreground="Black" />
38 </MenuItem>
39 <MenuItem x:Name="fixMenu" Foreground="White" IsEnabled="False" Click="fixMenu_Click" Header="Fi_x"/>
40 <MenuItem x:Name="printMenu" Foreground="White" Click="printMenu_Click" IsEnabled="False" Header="_Print"/>
41 <MenuItem x:Name="editMenu" Foreground="White" IsEnabled="False" Header="_Edit" Click="editMenu_Click" />
42 </Menu>
43
44 <TreeView x:Name="treeView" Grid.Row="1" Background="AliceBlue" SelectedItemChanged="folders_SelectedItemChanged">
45 <TreeViewItem x:Name="favoritesItem" IsExpanded="True" Header="Favorites"/>
46 <TreeViewItem x:Name="foldersItem" Header="Folders"/>
47 </TreeView>
48 <GridSplitter Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
49 <ListBox x:Name="pictureBox" Background="AliceBlue" SelectionChanged="pictureBox_SelectionChanged" Grid.Row="1" Grid.Column="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
50 <ListBox.ItemsPanel>
51 <ItemsPanelTemplate>
52 <WrapPanel/>
53 </ItemsPanelTemplate>
54 </ListBox.ItemsPanel>
55 </ListBox>
56
57 <Grid Grid.Row="2" Grid.ColumnSpan="3">
58 <Grid.ColumnDefinitions>
59 <ColumnDefinition/>
60 <ColumnDefinition Width="Auto"/>
61 <ColumnDefinition/>
62 </Grid.ColumnDefinitions>
63 <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right">
64 <Button Width="69" VerticalAlignment="Center" x:Name="zoomButton" Click="zoomButton_Click" ClickMode="Press" ToolTip="Change the Display Size">
65 <Image Height="22" Source="images\zoom.gif"/>
66 </Button>
67 <Popup x:Name="zoomPopup" MouseLeave="zoomPopup_MouseLeave" PlacementTarget="{Binding ElementName=zoomButton}" Placement="Center" StaysOpen="False">
68 <Grid Background="White">
69 <Border BorderBrush="Black" BorderThickness="1">
70 <Slider Margin="20" Orientation="Vertical" x:Name="zoomSlider" Value="3" Minimum="1" Maximum="10" Height="100" ValueChanged="zoomSlider_ValueChanged"/>
71 </Border>
72 </Grid>
73 </Popup>
74 <Button x:Name="defaultSizeButton" Click="defaultSizeButton_Click" Width="69" VerticalAlignment="Center" ToolTip="Set Default Thumbnail Size">
75 <Image Height="22" Source="images\defaultThumbnailSize.gif"/>
76 </Button>
77 </StackPanel>
78 <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
79 <Button x:Name="previousButton" Click="previousButton_Click" VerticalAlignment="Center" IsEnabled="False" Opacity=".5" ToolTip="Previous (Left Arrow)">
80 <Image Height="22" Source="images\previous.gif"/>
81 </Button>
82 <Button x:Name="slideshowButton" Click="slideshowButton_Click" Height="42" Width="52" VerticalAlignment="Center" ToolTip="Play Slide Show">
83 <Image Height="22" Source="images\slideshow.gif"/>
84 </Button>
85 <Button x:Name="nextButton" Click="nextButton_Click" VerticalAlignment="Center" IsEnabled="False" Opacity=".5" ToolTip="Next (Right Arrow)">
86 <Image Height="22" Source="images\next.gif"/>
87 </Button>
88 </StackPanel>
89 <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Left">
90 <Button x:Name="counterclockwiseButton" Click="counterclockwiseButton_Click" Width="46" IsEnabled="False" Opacity=".5" VerticalAlignment="Center" ToolTip="Rotate Counterclockwise">
91 <Image Height="22" Source="images\counterclockwise.gif"/>
92 </Button>
93 <Button x:Name="clockwiseButton" Click="clockwiseButton_Click" Width="46" IsEnabled="False" Opacity=".5" VerticalAlignment="Center" ToolTip="Rotate Clockwise">
94 <Image Height="22" Source="images\clockwise.gif"/>
95 </Button>
96 <Button x:Name="deleteButton" Click="deleteButton_Click" Width="46" IsEnabled="False" Opacity=".5" VerticalAlignment="Center" ToolTip="Delete (Del)">
97 <Image Height="22" Source="images\delete.gif"/>
98 </Button>
99 </StackPanel>
100 </Grid>
101 </Grid>
102 </Page>
对上面的代码说明如下：
1.x:Class="PhotoGallery.MainPage" ——相当于WebForm中的CodeBehind属性，当前界面的后置类。
2.<Page.Resources>
<LinearGradientBrush x:Key="shinyBrush" StartPoint="0,0" EndPoint="0,1">... ——相当于web中定义的一个样式(而以后的文章中会提到的资源词典(ResourceDictionary)文件相当于是一个样式表，可以在不同的界面中使用)，名为shinyBrush的笔刷，可以在当前界面的任何控件上使用，如设置按钮的背景色等。
3.<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
<RowDefinition Height="55"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions> ——Grid是一个类似于web中的table标签的表格控件, RowDefinitions意为行定义，这段代码就表示定义(创建)一个3行3列的表格。<Rectangle Grid.Row="2" Grid.ColumnSpan="3" Fill="{StaticResource shinyBrush}"/>——表示在第三行有一块区域并跨越3列, Grid.Row对应的是行的索引。
后台部分代码
1 ///<summary>
2 /// 按比例放大
3 ///</summary>
4 ScaleTransform st = new ScaleTransform(3, 3);
5 object dummyNode = null;
6 Photos photos = new Photos();
7
8 #region Window Management
9
10 public MainPage()
11 {
12 InitializeComponent();
13 photos.ItemsUpdated += delegate { this.Dispatcher.Invoke(DispatcherPriority.Normal, new ThreadStart(Refresh)); };
14 Application.Current.Properties["favoritesItem"] = favoritesItem;
15 Application.Current.Properties["test_Info"] = DateTime.Now.ToString();
16 }
Application.Current.Properties["test_Info"] = DateTime.Now.ToString(); ——其用法和作用，我目前理解为跟web中的Session类似，即在当前应用程序内的任何界面都可以访问获得的全局集合字典。
最后，附上源码(源码你仔细看下应该基本上能明白)和一本wpf经典教程书，希望能给在学习WPF的朋友一些帮助。因为我也刚开始学，此文写的很简略，望大家多多包涵!