WPF 美化界面,样式的使用

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

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

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

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

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

   <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    

    <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>

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

   首先,定义一个资源

    <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

<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>

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

 <Window.Resources>
          <ResourceDictionary x:Key="butStyle">
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="style/ButtomStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

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

    

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

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

     

<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中加载

<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="样式的用法\Style\buttonStyleApp.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

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

如果先弄一个全局的样式,那么不需要定义key即可,也不用再控件中调用,这样就行了

 

上面是就button为例子,简单介绍了一下wpf中布局中所用到的资源,样式等,具体的到时候遇到了问题,在具体解决一下!

 

 

 

 

    

  

 

     

  

        

       

posted @ 2013-01-12 20:37  双魂人生  阅读(19259)  评论(3编辑  收藏  举报