zoukankan      html  css  js  c++  java
  • WPF学习(四) 样式 【小达原创】

    wpf这门编写winform程序的技术相比常规的winform技术有一个很显著的特点——

    怎么才能炫起来呢?

    我们都知道常规的winform技术就是拖控件,总的来说想用常规的winform技术来实现很好看的界面很难。

    但是wpf就可以实现起来很轻松。

    有过web知识的童鞋很好理解,咱们看到的网站大部分都比winfrom好看的多,为啥?

    因为里面所有的控件都是程序人员拿HTML编写的,编程人员可以自由的定义控件的样式。我们的WPF一样可以轻松的定义控件的样式。

    下面我们一起来体验一下:

    我们建立一个WFP项目,打开它的MainWindow.xaml窗体文件:

    加入一个按钮标签:

     <Button>提交</Button>

    运行结果……

    大家看到了这个按钮扩充到了整个窗体大小(如果你的控件没有定义大小,它就会自己填充满它所在的容器)。

    接下来我为按钮写一个Style,在项目中新建一个Style文件夹。在Style文件夹处右键添加新项,选择资源词典:

    打开我们添加的资源词典:

    然后再添加一个资源词典。改一下名字,叫Index.xaml

    wpf这门技术是这样的:把所有的资源词典都配置在Index.xaml资源词典文件中,然后将Index.xaml资源词典文件配置在项目的App.xaml文件中,这样项目中所有的资源都可以在项目中引用了

    PS:就不用单个窗体配置资源词典了。(将资源公开化)

    我们在Dictionary1.xaml文件中键入一个Button的样式:

    <Style x:Key="m_Btn" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="40"></Setter>
    <Setter Property="Height" Value="20"></Setter>
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="Button">
    <Image Source="/Bind;Component/Images/4.png"></Image>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

    下面我们解释下上面的样式:

    1、

    <Style x:Key="m_Btn" TargetType="{x:Type Button}">这一句中的x:Key="m_Btn"的意思是给这个样式起一个名字。以后控件要用这个样式直接将m_Btn这个名字付给控件就好了。

    TargetType="{x:Type Button}"这一句的意思是什么类型的控件可以用这个样式。

    2、

    <Setter Property="" Value=""></Setter>这一句的意思是设置Property属性,属性的值是Value。

    3、

    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="Button">
    <Image Source="/Bind;Component/Images/4.png"></Image>
    </ControlTemplate>
    </Setter.Value>
    </Setter>

    这一段的意思是设置属性Template,为什么他的value没有跟在后面反而又写了一行呢?

    因为它的value值比较复杂,一行装不下。

    <ControlTemplate TargetType="Button">这就是属性Template的value值(一个ControlTemplate ),它的内容是一个Image图片标签,大家注意下Image标签Source属性的值:/Bind;Component/Images/4.png,这是wpf种相对路径的写法——(/项目名称;Component/url)

    好了,我们在Dictionary1.xaml文件中写好了一个button的样式,将它放入Index.axml中:

    在Index.xaml中键入 

    <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Bind;Component/Style/Dictionary1.xaml"></ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>

    再将Index.xaml配置在APP.xaml中:

    <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source=""/Bind;Component/Style/Index.xaml">
    </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

    至此我们完成了一个常规的资源词典的引用方式。如果有更多的资源字典,直接配置在Index.axml文件中,这样整个项目都可以应用你所定义的样式了。

    下面,我们将写好的样式应用于BUtton.打开MainWindow.xaml文件,修改Button标签为:

    <Button Style="{StaticResource m_Btn}" Click="Button_Click">提交</Button>

    后台添加Button的单击事件的处理方法:

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    MessageBox.Show("豪车");
    }

    运行程序,单击豪车的图片(其实就是按钮):

    好了,一个简单的带有样式的按钮程序我们就写好了,是不是比传统的按钮要好看很多……

  • 相关阅读:
    openssh升级到openssh-7.5p1踩坑
    office online server部署和简单操作
    aspnetmvc和aspnetcoremvc的一些区别
    office web app server部署和简单操作
    PHP之cURL
    认识PHP的全局变量
    认识Linux系统/etc/hosts
    git学习——stash命令(4)
    Linux netstat命令
    phpstorm+xdebug
  • 原文地址:https://www.cnblogs.com/JK1989/p/6958078.html
Copyright © 2011-2022 走看看