WPF 美化界面，样式的使用

119 阅读 0 评论 79 点赞

我是靠谱客的博主危机面包，这篇文章主要介绍WPF 美化界面，样式的使用，现在分享给大家，希望可以做个参考。

转载地址：http://www.cnblogs.com/shuang121/archive/2013/01/12/2857906.html

在我看来，学习WPF，最重要的还是学习它的布局，样式的使用，类似于web页面布局的优点是winForm所不能及的，可以通过它灵活的布局，样式的添加，从而制作出很多很炫的界面，下面就简单的总结下关于WPF中样式的几种用法：

我们以按钮Button为例，比如改变它的背景颜色或者添加图片背景，在这里需要说明的是，不是每一种样式都能实现同样的效果

方法一：直接在button里使用Background赋值即可，这个是最简单的，但是有些样式会实现不了，一些简单的还是可以的

复制代码

1
<Button Content="Button" Height="23" Background="Yellow" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="75" />

方法二、通过Button.Background为其添加图片背景

复制代码

1
2
3
4
5
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,47,0,0" Name="button2" VerticalAlignment="Top" Width="75">
            <Button.Background>
                <ImageBrush ImageSource="/Images/按钮背景.png" />
            </Button.Background>
        </Button>

在这里说明一下，图片的路径也可以改成 <ImageBrush ImageSource="/项目程序集名;component/Images/按钮背景.png" />

下面的几种方法都是通过资源来完成的(关于资源，在后面会讲到)

方法三、内部定义资源如：Button.Resources

复制代码

1
2
3
4
5
6
7
<Button Content="Button" Height="41" HorizontalAlignment="Left" Margin="10,126,0,0" Name="button4" VerticalAlignment="Top" Width="75">
            <Button.Resources>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="#FF1F3B53"/>
                </Style>
            </Button.Resources>
        </Button>

方法四、在窗体中定义资源，然后再控件中调用

首先，定义一个资源

复制代码

1
2
3
4
5
<Window.Resources>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Foreground" Value="#999999"/>
        </Style>
     </Window.Resources>

然后就可以再控件中调用了

 
    ? 
   
 
         <Button Content= 
         "Button" 
         Height= 
         "23" 
          Style= 
         "{StaticResource buttonStyle}"  
          HorizontalAlignment= 
         "Left" 
          Margin= 
         "10,204,0,0" 
          Name= 
         "button5" 
          VerticalAlignment= 
         "Top" 
          Width= 
         "75" 
         /> 
        

方法五、类似web中在外部定义样式，然后再窗体中调用

处理方式一、

首先，定义个外部样式ButtomStyle.xaml

复制代码

1
2
3
4
5
6
7
8
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button">
        <Setter Property="Height" Value="500"></Setter>
        <Setter Property="Foreground" Value="#aaaaaa"/>
        <Setter Property="Background" Value="#FF1F3B53"/>
    </Style>
</ResourceDictionary>

然后再窗体中引入这个样式

复制代码

1
2
3
4
5
6
7
<Window.Resources>
          <ResourceDictionary x:Key="butStyle">
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="style/ButtomStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

注意：引入样式的时候需要加一个key，这样下面的才可以调用
然后就可以再控件中调用了

复制代码

1
<Button Content="Button" Height="23" Resources="{StaticResource butStyle}" HorizontalAlignment="Left" Margin="152,12,0,0" Name="button6" VerticalAlignment="Top" Width="75" />

方式处理二、在App中加载样式
定义外部的样式为：

复制代码

1
2
3
4
5
6
7
8
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" x:Key="bstyle">
        <Setter Property="Height" Value="500"></Setter>
        <Setter Property="Foreground" Value="#aaaaaa"/>
        <Setter Property="Background" Value="#dddddd"/>
    </Style>
</ResourceDictionary>

然后再app中加载

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<Application x:Class="WpfApplication2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="样式的用法/ButtonStyleDemo.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="样式的用法StylebuttonStyleApp.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

这样直接调用样式的key即可

复制代码

1
<Button Content="Button" Height="23" Style="{StaticResource bstyle}" HorizontalAlignment="Left" Margin="152,58,0,0" Name="button7" VerticalAlignment="Top" Width="75" />