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>

然后在前台声明一下资源字典，引入资源字典（里面就引入了上面的CalStyle.xaml资源字典文件）：

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

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

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