win10 UWP button

最新推荐文章于 2020-02-27 13:09:21 发布
最新推荐文章于 2020-02-27 13:09:21 发布
阅读量4.8k 收藏 1
点赞数 3
分类专栏： c# UWP xaml # UWP 入门 # win10 uwp 控件入门 文章标签： win10 UWP C# xaml button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lindexi_gd/article/details/50450292
版权
c# 同时被 3 个专栏收录
436 篇文章 19 订阅
订阅专栏
UWP
181 篇文章 4 订阅
订阅专栏
win10
128 篇文章 1 订阅
订阅专栏

button有很多和wpf一样，可以看《深入浅出WPF》

我们可以在button的click写上

<Button Content="确定" Click="Button_Click"/>

在Button_Click按F12到代码写上点击按钮需要运行

        private void Button_Click(object sender, RoutedEventArgs e)
        {

        }

也可以用viewModel的一个方法 viewModel有一个方法 ce

可以在Click写

Click="{x:Bind view.ce}"

在用view需要在MainPage.xaml.cs写

viewModel view {set;get;}= new viewModel();

button content可以使用一个元素，这个元素可以是Grid，我们可以做一个圆形头像

先找出一张图，我们把这张图做头像

把图放到项目

                <Button Height="100" Width="100" Margin="10,10,10,10" Padding="0" Foreground="{x:Null}" BorderBrush="{x:Null}" Background="{x:Null}"> 
                    <Button.Content>                       
                            <Ellipse Margin="0,0,0,0" Height="90" Width="90">
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="Assets/20151226160608688.jpg" />
                                </Ellipse.Fill>
                            </Ellipse>                                          
                    </Button.Content>
                </Button>

我们可以修改鼠标在按钮上的样子

button可以设置属性，使用资源 资源可以写在页面

    <Page.Resources>

    </Page.Resources>

所有按钮使用同样式

    <Page.Resources>
        <Style TargetType="Button">

        </Style>
    </Page.Resources>

按钮的属性用<Setter Property="属性" Value="值"/>

按钮的背景

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="White"/>
        </Style>
    </Page.Resources>

指定一个样式，key

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="100"/>
        </Style>
        <Style  x:Key="button" TargetType="Button">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="50"/>
        </Style>
    </Page.Resources>

         <Button Content="默认"/>
         <Button Style="{StaticResource button}" Content="确定"/>

这里写图片描述

在设计，点按钮，右击，编辑模板副本，选择当前页这里写图片描述

可以看到

    <Page.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
            <Setter Property="Padding" Value="8,4,8,4"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

在<VisualState x:Name="Pressed">可以把里面写成这个状态的样子，按钮有正常，按下，鼠标在按钮上，可以对每个修改

这里写图片描述点击Pressed更改pressed点击Pressed更改pressed看到这里按钮有背景看到这里按钮有背景去掉背景，按F4把背景无画笔去掉背景，按F4把背景无画笔添加过度添加过度记录关键帧记录关键帧选时间0.5改变背景选时间0.5改变背景选时间，改变背景点播放可以看到我们做出来的

可以运行

移动到button显示文字

在装机必备移动到搜狐显示搜狐 参考：http://blog.csdn.net/lindexi_gd/article/details/50166161

                        <Button Click="souhu_Click" ToolTipService.ToolTip="搜狐视频" Padding="0" >
                            <Button.Content>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Image Source="ms-appx:///Assets/搜狐.png" Grid.Row="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                                    <TextBlock Text="搜狐视频" Grid.Row="1" HorizontalAlignment="Center" />
                                </Grid>
                            </Button.Content>
                        </Button>

这里写图片描述

显示图片

                        <Button Click="souhu_Click" Padding="0" >
                            <Button.Content>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Image Source="ms-appx:///Assets/搜狐.png" Grid.Row="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                                    <TextBlock Text="搜狐视频" Grid.Row="1" HorizontalAlignment="Center" />
                                </Grid>
                            </Button.Content>
                            <ToolTipService.ToolTip>
                                <Image Height="50" Width="50" Source="ms-appx:///Assets/搜狐.png"/>
                            </ToolTipService.ToolTip>
                        </Button>
lindexi_gd
关注
专栏目录
UWP 应用中的 Button 控件
qq_29340663的博客
03-13 547
UWP 应用中的 Button 控件 前言：无意中翻出的 2017 年自写的一份文稿，十分基础，遣词造句也不乏幼稚之感，属于基础中的基础，经删减编辑发布。（现在谁还开发 UWP 啊） Button控件是构建程序的一个最基本控件，本文件将介绍如何在你的 UWP 应用中插入并使用Button控件。 本文件适用于： Microsoft Visual Studio 2015(包括Update) Microsoft Visual Studio 2017(V15.0,V15.2) 一、 插入Button控件
win10 uwp 拖动控件
lindexi
04-19 3410
我们会使用控件拖动，可以让我们做出好看的动画，那么我们如何移动控件，我将会告诉大家多个方法。其中第一个是最差的，最后的才是我希望大神你去用。
[UWP]浅谈按钮设计
weixin_30482383的博客
07-10 312
一时兴起想谈谈UWP按钮的设计。 按钮是UI中最重要的元素之一，可能也是用得最多的交互元素。好的按钮设计可以有效提高用户体验，构造让人眼前一亮的UI。而且按钮通常不会影响布局，小小的按钮无论怎么改也不会对性能有多大影响，所以不少注重细节的设计师最为热衷修改按钮。(例如 这位 ) 目前UWP只提供了基础款的按钮样式，网上相关资源也较少，所有写了这篇文章用于介绍在UWP上设计按钮的入门知识。 1. V...
win10 uwp 圆角按钮
lindexi
07-29 4953
本文讲的是如何做圆角按钮，我们在UWP本来的按钮都是矩形，圆角Radius没有，所以本文就用简单方法去做圆角按钮。
UWP Button添加圆角阴影（三）
weixin_34247299的博客
10-11 155
原文:UWP Button添加圆角阴影（三） 原文：UWP Button添加圆角阴影（三） Composition DropShadow是CompositionAPI中的东西，使用Storyboard设置某个属性，就是频繁的触发put_xxx()方法，效率远远不如使用CompositionAnimation。 Composition对象的基类Composi...
C#实现win10 uwp 右击浮出窗在点击位置
12-31
我们一般使用的MenuFlyout写在前台，写在Button里面，但是可能我们的MenuFlyout显示的位置和我们想要的不一样。 通过使用后台写ShowAt的方法，我们可以通过e.GetPosition获得鼠标点击位置，需要对函数传入相对的元素...
win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序
lindexi
06-19 3524
本文是一个非常简单的博客，让大家知道如何使用 asp dot net core 做后台，使用 UWP 或 WPF 等做前台。 本文因为没有什么业务，也不想做管理系统，所以看到起来是很简单
win10 uwp 好看的时间选择控件
lindexi
08-30 786
本文告诉大家我找到的好看的时间选择控件
win10 uwp 毛玻璃
lindexi
06-19 6084
毛玻璃在UWP很简单，不会和WPF那样伤性能。 本文告诉大家，如何在 UWP 使用 win2d 做毛玻璃。毛玻璃可以使用 win2D 方法，也可以使用 Compositor 。使用 win2d 得到软件内控件毛玻璃，而使用 Compositor 可以获得窗口毛玻璃。
win10 uwp 获取按钮鼠标左键按下
lindexi
12-29 4297
我们可以使用`PointerPressed`获得鼠标右键按下，但是我们如何获得左键？
UWP Button 类控件——Button
weixin_34106122的博客
05-22 226
UWP Button 类控件——Button 　　自从图形界面交互式软件产生那一刻开始，button就成为与用户交互最重要的控件。button的产生来源现实生活中的按钮，可以通过最简单的“点击”方式来触发click事件,从而完成用户与软件的交互。所有基于事件的控件设计思想都源于button触发事件的机制，因此可以说button是交互式软件中的“控件鼻祖”。然而面对再熟悉不过的控件，想要写一...
UWP本地化时，在资源字典里如何引用ToolTipService.ToolTip属性
singhwong
02-27 201
当应用本地化时，一些属性(例如Butron.Content、TextBlock.Text直接在资源字典里引用就可以了)，而其他一些附加属性，例如ToolTipService.ToolTip，就需要在资源字典中引用下相关命名空间()[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip了，如下所示： ...
Win10/UWP开发—凭据保险箱PasswordVault
igweyou的专栏
12-15 2159
PasswordVault用户凭据保险箱其实并不算是Win10的新功能，早在Windows 8.0时代就已经存在了，本文仅仅是介绍在UWP应用中如何使用凭据保险箱进行安全存储和检索用户凭据。 那么什么是凭据保险箱呢？简单的说就是开发者可以在用户输入完凭证(一般是用户名和密码)，凭证有效的情况下将该凭证存储在叫做"凭据保险箱"里，该凭据保险箱里的用户凭据将会自动漫游到用户设备的Wind
[UWP开发]将图片置入按钮中————（2020.2.24学习笔记）
qq_37704442的博客
02-24 604
今天要实现的效果如下 如图，是一个底为黑色，内容为一个白色图标和白色字的按钮，虽然看上去很简单，但实现的时候，还是转了几个弯，主要之前，开发过Android，小程序，对于开发这种效果，容易陷入要自定义按钮或者给view加点击事件实现的思维，但并不需要这么做，因为UWP中的Button标签，可以往里面添加布局的，比如如下 <Button Style="{StaticResource...
UWP入门（八）--几个简单的控件
怪咖先森的博客
03-22 6088
每天看几个，要不聊几天我就可以看完啦，加油！看效果1. CheckBox <TextBlock Grid.Row="0" Text="CheckBox" VerticalAlignment="Center" /> <StackPanel Grid.Column="1" Margin="20,10,0,10"
UWP 圆角按钮样式
隔壁王叔叔
12-08 2765
微软真是食屎了，乱改XAML语言,Morther Fuck! 代码如下： <Style x:Key="ButtonStyle1" TargetType="Button"> <Setter Property="Background" Value="{ThemeResource Butto
win10 uwp 按下等待按钮
lindexi
01-15 2201
我们经常需要一个按钮，在按下时，后台执行Task，这时不能再次按下按钮。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值