使用Visual Studio 2008建立WPF自定义按钮

使用Visual Studio 2008开发已经有一段时间了。其中改善了不少用户体验对咱们的开发颇有帮助，所提供的模板也大大简化了咱们的项目开发。

其中对WPF技术的引入引发了个人极大兴趣，WPF技术的出现，使得传统的UI设计获得了大大的简化，之前咱们要作一个用户自定义控件是件很复杂的事情，在WPF里面，将会比较简单。那些只有专业公司才能作的事情如今普通开发者也能够轻松完成。

前段时间收到了来自微软最有影响力开发者项目组的技术光盘，其中就讲到了WPF以及SilverLight的一些相关技术。因为工做关系没有及时拿上来与你们分享。

本文就以在VS2008中使用WPF建立用户自定义按钮为例，来学习一下怎么样使用WPF来工做。

首先，打开VS2008，建立一个WPF应用程序项目。

咱们取名为WpfDemo1

跟传统的windows应用程序开发同样，VS会自动帮咱们完成程序的基本框架的建立工做。

添加基本按钮

 

在新创建的项目中，咱们双击Window1.xaml文件。

经过在解决方案资源管理器中双击 Window1.xaml 文件来打开它。默认状况下， Window1.xaml 中存在一个 Grid 元素。移除 Grid 元素，并经过向 Window1.xaml 中键入或复制和粘贴如下突出显示的代码来向可扩展应用程序标记语言 (XAML) 页面中添加几个按钮

<Window x:Class= "WpfDemo1.Window1"
        xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
        <StackPanel HorizontalAlignment="Left" Width="132">
                <Button>Button1</Button>
                <Button>Button2</Button>
                <Button>Button3</Button>
        </StackPanel>
</Window>

 

F5运行咱们的应用程序，咱们将会看到咱们刚才新添加的基本应用程序按钮。

设置基本属性

接着，咱们将会为这些按钮设置一些属性，以便控制按钮外观和布局。您将使用资源来为整个应用程序定义按钮属性，而不是为这些按钮单独设置属性。在概念上，应用程序资源与网页的外部级联样式表 (CSS) 类似；可是，资源远比级联样式表 (CSS) 强大，在本例结束时您将明白这一点。

使用样式为按钮设置基本属性

1.    定义 Application.Resources 块： 打开 app.xaml 并添加下面突出显示的标记（若是还没有添加）：

        <Application.Resources>
                <Style TargetType= "Button">
                        <Setter Property= "Width" Value= "90" />
                        <Setter Property= "Margin" Value= "10" />
                </Style>
        </Application.Resources>

1.    资源范围由资源的定义位置来肯定。若是资源是在 app.xaml 文件的 Application.Resoureses 中定义的，则将容许从应用程序中的任何位置使用资源。

2.    建立一个样式并用该样式定义基本属性值：向 Application.Resources 块添加下面的标记。此标记建立一个应用于该应用程序中全部按钮的 Style，并将这些按钮的 Width 设置为 90，将 Margin 设置为 10：

        <Application.Resources>
                <Style TargetType= "Button">
                        <Setter Property= "Width" Value= "90" />
                        <Setter Property= "Margin" Value= "10" />
                </Style>
        </Application.Resources>

TargetType 属性指定将该样式应用于 Button 类型的全部对象。每一个 Setter 都为 Style 设置不一样的属性值。所以，此时该应用程序中的每一个按钮的宽度都为 90 ，边距都为 10 。

3    您还能够对样式进行更多的处理，这包括以各类方式微调对象的目标、指定复杂的属性值，甚至将样式做为其余样式的输入。

4    为资源设置样式属性值： 使用资源，能够经过一种简单的方式来重用一般定义的对象和值。为了使代码更加模块化，使用资源定义复杂值尤为有用。向 app.xaml 添加下面突出显示的标记。

        <Application.Resources>
                <LinearGradientBrush x:Key= "GrayBlueGradientBrush"    
        StartPoint= "0,0" EndPoint= "1,1">
                        <GradientStop Color= "DarkGray" Offset= "0" />
                        <GradientStop Color= "#CCCCFF" Offset= "0.5" />
                        <GradientStop Color= "DarkGray" Offset= "1" />
                </LinearGradientBrush>

                <Style TargetType= "{x:Type Button}">
                        <Setter Property= "Background"    
            Value= "{StaticResource GrayBlueGradientBrush}" />

                        <Setter Property= "Width" Value= "90" />
                        <Setter Property= "Margin" Value= "10" />
                </Style>
        </Application.Resources>

 

5    您已经在 Application.Resources 块的正下方建立了一个名为 “GrayBlueGradientBrush” 的资源。此资源将定义一个水平渐变。此资源能够在该应用程序中的任何位置（包括在 Background 属性的按钮样式 setter 内部中）用做属性值。如今，全部的按钮都具备此渐变的 Background 属性值。

按 F5 运行该应用程序。其外观相似于下图：

建立一个定义按钮外观的模板

在本节中，将建立一个用来自定义按钮外观（表示）的模板。按钮表示是由几个赋予按钮独特外观的对象（包括矩形和其余组件）组成的。

到目前为止，对应用程序中按钮外观的控制已限制为更改按钮的属性。若是您但愿更完全地改变按钮的外观，该怎么办？ 使用模板能够强有力地控制对象的表示。因为模板能够在样式中使用，所以您能够将模板应用于全部应用了样式的对象（在本例中为按钮）。

使用模板定义按钮的外观

1.    设置模板： 因为控件（如 Button ）具备 Template 属性，所以您能够像对 Style 中所设置的其余属性值那样，使用 Setter 来定义模板属性值。向按钮样式中添加下面突出显示的标记。

<Application.Resources>

    <LinearGradientBrush x:Key= "GrayBlueGradientBrush"    
        StartPoint= "0,0" EndPoint= "1,1">
        <GradientStop Color= "DarkGray" Offset= "0" />
        <GradientStop Color= "#CCCCFF" Offset= "0.5" />
        <GradientStop Color= "DarkGray" Offset= "1" />
    </LinearGradientBrush>

    <Style TargetType= "{x:Type Button}">
    <Setter Property= "Background" Value= "{StaticResource GrayBlueGradientBrush}" />
        <Setter Property= "Width" Value= "80" />
        <Setter Property= "Margin" Value= "10" />
        <Setter Property= "Template">
            <Setter.Value>
                <!-- The button template is defined here. -->
            </Setter.Value>
        </Setter>
    </Style>

</Application.Resources>

 

未完，待续……