win8,win8.1应用中生成显示button和button背景图片的三,四种方法以及改变元素样式的四种方法

首先这篇博客其实不只是针对button的显示，很多其他的控件都可以用这三种方法，这里只是拿button做一个示例

罢了，可以举一反三的。

一、建一个win8或者win8.1的空应用，我们要在设计模板上放一个button，有以下三种方法：

1.，拖曳在工具箱中的button控件到模板视图中就行了，在模板视图中可以自行通过拖拉设置它的大小和位置，以及

双击生成事件和修改它的content的内容(就是按钮上显示的文字，和HTML中的button的value是一个意思)

2.代码直接写

<Button x:Name="btn_Demo" content="按钮"/>

3.后台写，显示到前台(这种方法其实是很重要的，也是很多人都搞不清楚的或者忽略的方法)，在win8,win8.1中不支

持C#在网站应用程序中的this.controls.add()这种写法，因为它不是窗体，根本就没有容器让你去填进去，所以这个

时候就要在前台先放一个容器，比如stackpanel，给它一个x:Name="stackpanel3"

Button btn = new Button();

btn.Text="自己定义";

stackpanel3.children.add(btn);

这样就能在前台成功添加这个按钮了。

二、第二个问题就是给Button按钮加上背景图片，这个有四种方法:

1.先在页面上放置一个Button按钮，这也是给元素指定样式的第一种方法

注意不要采取自我闭合的方式，简言之就是不能这样：<Button .../>，而是采用<Button ..></Button>的方式。这

样才可以里面进一步定义它的属性，这也是微软的一大好处，你有多少属性需要嵌套都可以。

<Button x:Name="btnBackImage" Content=""><!--第一种写法--><Button.Background><ImageBrush ImageSource="Assets/Images/buttonBg.png"/></Button.Background></Button>

2.采用静态资源的方式定义样式引用，这也是给元素指定样式的第二种方法

类似在传统的html,css中的采用在head标签中写<style type="text/css"></style>的方式。而在win8或win8.1应用

中采用<page.Resource></page.Resource>的方式定义样式。其中x:Key="btnBg"是ImageBrush的唯一指定，然

后对应的在Button中引用这个静态资源就可以了：Background="{StaticeResource btnBg}"

<!--第二种方法-->    <Page.Resources>        <ImageBrush x:Key="btnBg" ImageSource="Assets/Images/buttonBg.png"/>    </Page.Resources>    <!--在下面的Button中加上Background="{StaticResource btnBg}"-->        <Button x:Name="btnBackImage" Background="{StaticResource btnBg}" Content="" HorizontalAlignment="Left" Margin="380,113,0,0" VerticalAlignment="Top" Height="295" Width="401">        </Button>

3.在后台动态添加背景图片。这边看上去是比较麻烦的，因为不能直接指定它的背景是一个图片(图片索引)，这也可

以在后台指定它的样式，是第三种方法

这里必须先渲染这个图片，然后画刷才能得到这个图片，最后才能指定给相应的Button。

注意：如果索引直接写图片的相对或者绝对地址，是取不到图片的。这里图片的索引地址前必须加上"ms-appx:///",

这个是微软的硬性规定，虽然看起来很累赘，不过也没办法。

var uri = "ms-appx:///Assets/Images/back.png";Uri imgUri = new Uri(uri, UriKind.RelativeOrAbsolute);BitmapImage imgSource = new BitmapImage(imgUri);ImageBrush brush = new ImageBrush();brush.ImageSource = imgSource;btnBackImage.Background = brush;

4.我们可以在App.xaml定义全局资源(变量或者样式)，然后可以引用(引用方法和2的一样)。

<Application.Resources>        <!--全局都能访问的变量，在任何位置都能访问这个变量-->        <x:String x:Key="AppName">我的计算器</x:String>        <x:Int32 x:Key="Num">7</x:Int32>        <ImageBrush x:Key="btnBg" ImageSource="Assets/Images/buttonBg.png" />        <!--全局都能访问的样式-->        <Style TargetType="Button" x:Key="buttonStyle">            <Setter Property="Foreground" Value="Blue" />            <Setter Property="FontSize" Value="50" />        </Style>        <Style TargetType="TextBlock" x:Key="textBlockStyle">            <Setter Property="FontSize" Value="60" />        </Style>    </Application.Resources>

以上已经给出了给元素指定样式的其中三种方法，第四种方法是指定资源字典的方法：

(这个方法超级类似于HTML引入css的外部样式文件)

在项目下新建一个Style文件夹，然后右击这个文件夹->添加->新建项->选择资源字典，然后在里面写自己想要给某

个元素定的样式等等。

下面是一个例子，资源字典文件取名为CalStyle.xaml

    <!--按钮的样式-->    <Style TargetType="Button">        <Setter Property="FontSize" Value="60"/>        <Setter Property="HorizontalAlignment" Value="Stretch"/>        <Setter Property="VerticalAlignment" Value="Stretch"/>        <Setter Property="Background" Value="Coral"/>        <Setter Property="Margin" Value="10"/>    </Style>    <!--"="按钮的样式-->    <Style TargetType="Button" x:Key="redButton">        <Setter Property="FontSize" Value="60"/>        <Setter Property="HorizontalAlignment" Value="Stretch"/>        <Setter Property="VerticalAlignment" Value="Stretch"/>        <Setter Property="Background" Value="Red"/>        <Setter Property="Margin" Value="10"/>    </Style>

在App.xaml定义全局资源(变量或者样式)，然后可以引用(引用方法和2的一样)。：

<Application.Resources>        <!--一下就类似html的外部引入css样式文件的方法-->        <!--一个的时候，所有的样式都放在一个里面-->        <!--<ResourceDictionary Source="Style/CalcStyle.xaml" />-->        <!--多个的时候-->        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="Style/CalcStyle.xaml" />                <ResourceDictionary Source="Style/TextBlockStyle.xaml" />            </ResourceDictionary.MergedDictionaries>        </ResourceDictionary>    </Application.Resources>

然后只要在对应的元素，引用资源字典定义的静态资源就行了

<Button x:Name="btn_result" Content="=" Style="{StaticResource redButton}" Grid.Column="4" Grid.Row="5" Grid.RowSpan="2" Click="btn_result_Click"/>