技术开发 频道

手把手带你从WPF基础向企业应用进阶

  WPF实现介绍

  WPF版本我这里就做得很简单了,由于开发WPF程序提供了很多模板和工具,所以我这里基本没写什么代码,全部的代码都是通过XAML实现,并且大部分都是自动生成的,只是我们要根据项目具体情况做一些修改就行。

  这个WPF项目同样有一个Window 和一个custom UserControl, 和 WinForms 版本基本一样. 只是WinForms中用 FlowLayoutPanel来承载EmployeeControls 控件, 而WPF 用的是ItemsControl 来承载这个用户控件.更加可喜的是,WPF通过模板来进行定制,所以我们就不需要像WinForms那样写循环加载控件的代码,下面就是WPF用XAML实现的窗体代码: 

Collapse
<Window
  x:
Class="WpfApp.Window1"
  xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local
="clr-namespace:WpfApp"
  xmlns:model
="clr-namespace:BusinessObjects;assembly=BusinessObjects"
  Title
="WPF App" Height="558" Width="581"
  WindowStartupLocation
="CenterScreen"
  
>
  
<Window.DataContext>
    
<ObjectDataProvider
      ObjectType
="{x:Type model:Company}"
      MethodName
="GetCompanys"
      
/>
  
</Window.DataContext>
  
<Grid Width="555">
    
<Label
      Name
="label1"
      HorizontalContentAlignment
="Center" VerticalAlignment="Top"
      FontSize
="20" FontWeight="Bold"
      Height
="36.6" Margin="0,16,0,0"
      
>
       .NET 中文社区大比拼
</Label>
    
<ItemsControl
      ItemsSource
="{Binding}"
      HorizontalContentAlignment
="Center"
      Margin
="46,59,25,0"
      Focusable
="False"
      
>
      
<ItemsControl.ItemTemplate>
        
<DataTemplate>
          
<local:CompanyControl />
        
</DataTemplate>
      
</ItemsControl.ItemTemplate>
    
</ItemsControl>
  
</Grid>
</Window>

 

  在如下的XAML代码中,这里有几点需要注意,。Window的DataContext赋予了一个ObjectDataProvider的对象,而ObjectDataProvider又会调用GetEmployees这个方法。所以一旦把DataContext设置到Company 对象,并且把ItemsControl的ItemsSource设置为“{Binding}” 就意味着该控件里面会自动显示Company 对象的所有数据。

  这里我们并不需要像WinForm一样用循环的方式创建CompanyControl的实例。这是因为ItemsControl中的ItemTemplate属性设置为了一个DataTemplate,同时ItemsControl中的ItemsSource绑定到了Company 的对象数组,那么ItemTemplate就会知道如何创建一个CompanyControl,所以大家看到这里写的代码就相对变少了,这也是XAML的一个优点之一。

  该CompanyControl的后台CS文件也是空的(除了必须的InitializeComponent),所以它不像的WinForms应用程序那么累赘,界面和逻辑紧密的耦合在了一起。下面就是CompanyControl的XAML代码, 这个代码相对来说就比较简单了。

 

Collapse
<UserControl x:Class="WpfApp.CompanyControl"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Height
="137" Width="481">
  
<Border
    BorderBrush
="Black"
    BorderThickness
="1"
    Margin
="2"
    SnapsToDevicePixels
="True" Width="469">
    
<Grid Height="129" Width="451">
      
<Image Source="{Binding PictureFile}"
           Margin
="10" Name="image1" Stretch="Fill"
             Width
="150" Height="80" HorizontalAlignment="Left" >
        
<Image.ToolTip>
          
<TextBlock>
            
<Run TextBlock.FontWeight="Bold">Company ID:</Run>
            
<TextBlock Margin="4,0,0,0" Text="{Binding ID}" />
          
</TextBlock>
        
</Image.ToolTip>
      
</Image>

      
<Label
        Content
="{Binding FullName}"
        Height
="34" Margin="99,2,0,0"
        Name
="中英文名称"
        VerticalAlignment
="Top"
        HorizontalContentAlignment
="Right"
        FontSize
="16" FontWeight="Bold" />

      
<Label Margin="190,34,0,0" Name="chineseNameLabel"
             FontWeight
="Bold" Height="28"
             VerticalAlignment
="Top"
             HorizontalAlignment
="Left"
             Width
="73">中文名称:</Label>
      
<TextBox
        Text
="{Binding chineseName}"
        HorizontalAlignment
="Right" Margin="0,39,10,0"
        Name
="textBox1" Width="172" Height="23"
        VerticalAlignment
="Top" TextDecorations="None" />

      
<Label FontWeight="Bold" Height="28" Margin="190,0,0,34"
             Name
="EnglishNameLabel" VerticalAlignment="Bottom"
             HorizontalAlignment
="Left"
             Width
="73">英文名称:</Label>
      
<TextBox
        Text
="{Binding EnglishName}"
        Height
="23" Margin="0,0,10,34" Name="textBox2"
        VerticalAlignment
="Bottom" HorizontalAlignment="Right"
        Width
="172" />

      
<Label Height="28" Margin="190,0,185,2"
             Name
="startDateLabel" VerticalAlignment="Bottom"
             FontWeight
="Bold">创建日期:</Label>
      
<Label
        Content
="{Binding StartDate}"
        Height
="28" HorizontalAlignment="Right" Margin="0,0,10,2"
        Name
="startDateValueLabel" VerticalAlignment="Bottom"
        Width
="172" />
    
</Grid>
  
</Border>
</UserControl>

  如上面的代码所示,UI上的很多元素我们都可以通过拖控件进行实现,有个功能需要自己简单的写一写代码,UI上面有一个功能就是你把鼠标放在图片上的时候会提示Company ID,这个功能通过ToolTip属性进行实现的。ToolTip属性是WPF所有元素的基类FrameworkElement的一个属性,所以我们可以在这些子元素当中直接使用。

  那么大家注意到,这个小功能在WinForm中我们要写一些代码,而在WPF就可以直接通过属性定制,所以在很多方面WPF对这些方面都做了封装和简化,也提高了我们的开发效率。

0
相关文章