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

我就是我 2022-08-26 15:28 153阅读 0赞

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

罢了，可以举一反三的。

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

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

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

2.代码直接写

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>的方式。这

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

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 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>
            
            
            
            
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Style/CalcStyle.xaml" />
                    <ResourceDictionary Source="Style/TextBlockStyle.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>

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