[UWP开发]将图片置入按钮中————（2020.2.24学习笔记）

今天要实现的效果如下

如图，是一个底为黑色，内容为一个白色图标和白色字的按钮，虽然看上去很简单，但实现的时候，还是转了几个弯，主要之前，开发过Android，小程序，对于开发这种效果，容易陷入要自定义按钮或者给view加点击事件实现的思维，但并不需要这么做，因为UWP中的Button标签，可以往里面添加布局的，比如如下

     <Button Style="{StaticResource My_Navigation_Bt}">
                <StackPanel Orientation="Horizontal">
 
                </StackPanel>
            </Button>

然后你就可以往这个布局内加入图片和文字了，这样实现这个按钮效果就非常容易了，另外说一句，那就是TextBlock组件默认字的颜色为黑色，但可以根据TextBlock的Foreground属性变更颜色,最后总体代码如下
App.xaml代码

<Application
    x:Class="The_Coffee_App.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:The_Coffee_App">
    <Application.Resources>
        <Style TargetType="Button" x:Key="My_Navigation_Bt">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Margin" Value="0,0,5,0"/>
            
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
        </Style>
        <Style TargetType="Image" x:Key="My_Navigation_Img">
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="50"/>
            
        </Style>
        <Style TargetType="TextBlock" x:Key="My_Navigation_Text">
            <Setter Property="FontSize" Value="35"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Margin" Value="10,0,0,0"/>
        </Style>
    </Application.Resources>
</Application>

MainPage.xaml

    <Button Style="{StaticResource My_Navigation_Bt}" Grid.Column="1">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/Coffee_Image/coffee-icon.png" Style="{StaticResource My_Navigation_Img}">

                    </Image>
                    <TextBlock Text="咖啡" Style="{StaticResource My_Navigation_Text}"/>
                </StackPanel>
            </Button>