以asp.net视角学习WPF

注：本文翻译自codeproject。WPF的开发，我以一些参考例子做为开始，中间有些细节浪费了时间，有时候觉得有时候认真看本厚书可能会好些，但是也确实没时间。锐英源网站上有很多解决wpf疑难的细节文章，如果没时间看书，想学好WPF,请关注我们锐英源软件。

介绍

和许多人一样，我很难掌握WPF，因为在编写基于桌面的应用程序时，它看起来很“陌生”。这看起来很不一样，我只是无法应用我已经掌握的知识——然后有一天，它击中了我。通过应用ASP。NET，我可以将我所知道的与WPF联系起来。显然，WPF提供了更多，但它给了我一个领先的机会。

我们不会深入WPF。我将展示用ASP编写的相同应用程序。NET和WPF，我们将看看代码的不同部分是如何关联的。我们还将看看WPF的一些根本不同之处，尽管表面上看起来是一样的。

本文的目的不是研究无状态和有状态应用程序之间的差异。。

概述

在我们进一步讨论之前，让我们看看我们要创建的应用程序。这是一个简单的应用程序，它从XML文件中读取数据并将其显示在列表中。这里面没有什么复杂的事情，我们将完成所有“聪明”的事情。我们要绑定的数据如下所示：

<?xml version="1.0" encoding="utf-8" ?>

              <People>

<Person Name="Josh" Handle="RockStar" IQ="10000" />

<Person Name="Sacha" Handle="The Bloginator" IQ="10000" />

<Person Name="Karl" Handle="The MoleMan" IQ="10000" />

<Person Name="Pete" Handle="Pretender to the throne" IQ="10" />

</People>

asp.net代码

<%@ Page Language="C#" AutoEventWireup="true" 
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Sample App</title>
    <style type="text/css" media="all">
      td 
      { 
        font-family : Tahoma; 
        font-size : 10px; 
      }
      .iqStyle
      {
        font-family : Verdana;
        font-size : 14px;
        font-style : italic;
      }
    </style>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataSourceID="XmlDataSource1" ShowHeader="False">
          <Columns>
            <asp:BoundField DataField="Name" />
            <asp:BoundField DataField="Handle" />
            <asp:BoundField DataField="IQ" ItemStyle-CssClass="iqStyle" />
          </Columns>
        </asp:GridView>
      </div>
      <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Sample.xml" 
        XPath="/People/Person"></asp:XmlDataSource>
    </form>
  </body>
</html>

正如你所看到的，这并没有太多。基本上，我们创建一个XmlDataSource并将其绑定到GridView。我们已经手动添加了一些样式来控制格式，但这里没有聪明的代码。这里的装订都是为我们处理的。

wpf代码

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2006" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
  x:Class="WpfSampleApp.Window1"
  x:Name="Window"
  Title="Sample App"
  Width="380" Height="240">
  <Window.Resources>
    <XmlDataProvider x:Key="PeopleSource" d:IsDataSource="True" Source="Sample.xml"/>
    <Style TargetType="ListBox">
      <Setter Property="Control.FontFamily" Value="Tahoma" />
      <Setter Property="Control.FontSize" Value="10" />
    </Style>
    <Style x:Key="FontStyle">
      <Setter Property="Control.FontFamily" Value="Verdana" />
      <Setter Property="Control.FontStyle" Value="Italic" />
      <Setter Property="Control.FontSize" Value="12"/>
    </Style>
    <DataTemplate x:Key="PersonTemplate">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <TextBlock Width="40" Grid.Column="0" 
         Text="{Binding Mode=OneWay, XPath = @Name}" />
      <TextBlock Width="130" Grid.Column="1" 
         Text="{Binding Mode=OneWay, XPath=@Handle}" />
      <TextBlock Width="Auto" Grid.Column="2" 
        Text="{Binding Mode=OneWay, XPath = @IQ}" 
        Style="{StaticResource FontStyle}" />
    </Grid>
    </DataTemplate>
  </Window.Resources>
  <Grid x:Name="LayoutRoot">
    <ListBox Padding="3" HorizontalAlignment="Left" Width="Auto" 
      ItemTemplate="{DynamicResource PersonTemplate}" 
      ItemsSource="{Binding Mode=Default, Source={StaticResource PeopleSource}, 
      XPath=/People/Person}" VerticalAlignment="Top" Height="Auto"/>
  </Grid>
</Window>

我使用ExpressionBlend将其组合在一起（提示-如果你是认真对待WPF的，那么你真的需要得到一份Blend的副本；这会让你的生活更加轻松）。它使用XmlDataSource绑定到ListBox，我们将对其进行格式化以显示XML文件中的数据。再次注意，我不必编写一行C#——这都是在XAML中完成的。

样式

如前所述，我们在ASP中创建了一些样式。NET应用程序。类似地，我们在WPF应用程序中创建了两个样式，它们做的事情大致相同。在本节中，我们将查看我们创建的两种类型的样式。

类型选择器

在CSS中，类型选择器允许您将样式与文档树中该类型的每个实例相匹配。因此，我们要将每个TD元素的字体更改为10px Tahoma。

WPF允许您通过创建应用于特定TargetType的样式来执行相同的操作。在我们的示例中，我们将窗口中每个ListBox的字体更改为10 Tahoma大小。

细心的读者会注意到，我没有说ListBox中字体的大小是10像素。这是WPF的第一个改变，即WPF是独立于分辨率的。这意味着我们不再以像素为单位来思考问题——因此，96DPI显示器上的1英寸按钮将变成140DPI显示器的1英寸。

命名样式

在ASP。NET应用程序，我们创建了一个命名样式，将字体更改为12px Italic Verdana。同样，WPF允许我们设置一个命名样式，将字体大小更改为12 Italic Verdana。为了在ASP.NET中，我们使用了ItemStyle CssClass=“iqStyle”。在WPF中应用样式同样容易；这里我们使用Style=“｛StaticResource FontStyle｝”。｛…｝部分使用绑定来实际应用值-StaticResource提供对先前加载的资源的引用，因此在这里对于内联样式很有用。WPF确实允许您创建等效的外部样式表。Josh Smith提供了使用外部资源的优秀教程。（我最喜欢的是这个）。

数据绑定

在这两个应用程序中，我们都使用XPath从XML中检索值。在这两种情况下，我们都创建了一个链接到XML文件的DataSource，然后说明如何显示它。

在ASP。NET中，我们声明要使用一组BoundFields来显示数据的每个部分。

我们在这里使用的WPF更强大，因为我们已经将项目的显示方式与实际显示它的容器分开。这意味着我们可以在不同的容器中使用相同的模板，从而保持一致性，并消除重复。在WPF代码中，模板是DataTemplate部分中的一部分。这表示我们希望每个项目显示一行数据，包含三列。每个项都显示在TextBlock中，这是一个通用文本类，并使用单向数据绑定绑定到特定元素。

在我们的示例中，此DataTemplate的实际使用者是ListBox。ItemsSource告诉运行时，我们希望将数据源中的数据绑定到列表框。如上所述，DataTemplate中的Grid表示一行数据。ItemTemplate简单地告诉应用程序要在每一行上应用哪个模板，在某种程度上，可以认为它类似于GridView上的RowDataBound方法。因此，对于每一行数据，我们将创建PersonTemplate中表示的网格。

结论

我希望这篇文章已经激起了你的兴趣，让你开始玩WPF。如果你有ASP.NET，则WPF中的某些元素变得更容易理解。WPF背后的团队显然从ASP中吸取了很多教训。NET，并充分利用了这一点。通过在ASP.NET，许多概念将突然出现。显然，我已经对如何使用WPF的许多细节进行了润色，我并不是说WPF应该用于web开发，但它显示了这种特定的思维方式如何为您提供领先优势。

可能，您将面临的最大初始障碍是熟悉WPF如何使用绑定，这远远超出了仅绑定到数据库中的项。一旦你开始了解它是如何让你绑定到应用程序中的任何东西，你就会意识到你可以在不编写任何C#（或VB.NET）的情况下完成很多事情。

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载