首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

选中时如何在UWP中显示按钮上的边框

在UWP中显示按钮上的边框,可以通过修改按钮的样式来实现。

首先,可以通过定义一个新的样式来修改按钮的外观。在UWP中,可以使用XAML语言来定义样式。

以下是一个示例的按钮样式,其中包含了边框的设置:

代码语言:txt
复制
<Style x:Key="CustomButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Padding" Value="8,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Margin="3">
                        <ContentPresenter x:Name="ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Padding="{TemplateBinding Padding}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

接下来,在使用按钮的地方,将按钮的样式设置为刚才定义的样式即可:

代码语言:txt
复制
<Button Style="{StaticResource CustomButtonStyle}" Content="按钮" />

这样,在UWP应用中显示的按钮就会有边框了。根据实际需求,可以根据上述示例修改样式的细节,例如边框颜色、背景颜色、字体颜色等。

关于UWP中按钮样式的更多信息,可以参考腾讯云的产品介绍页面:腾讯云 UWP开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Excel实战技巧65: 制作漂亮的用户窗体按钮——当鼠标移动到按钮上时高亮显示

下面,我们来实现当鼠标移动到用户窗体按钮上时,会使用颜色高亮显示,让用户窗体更生动,如下图1所示。 ? 其实,你在图1中看到的按钮并不是用户窗体内置的传统命令按钮,而是使用图像控件来制作的。...由于图像是静态的,在运行时不能更改颜色,因此每个按钮都由两个图像组成,一个图像代表鼠标悬浮在按钮上的状态,另一个图像代表鼠标未悬浮在按钮上的状态。...本例中,将使用绿色和白色/灰色格式来指示用户是否将鼠标悬停在特定按钮上。下图2是我制作的用于按钮图像的文本框。 ? 这里要注意的是,四个文本框的大小和格式设置都必须完全相同。...复制一个刚才绘制的图像控件,如下图6所示。 ? 这个图像将代码鼠标不在按钮上时的状态。...但是,如果用户将鼠标放置在除这两个按钮之外的其他地方时,我们不希望这两个按钮显示绿色,因此要使用用户窗体的MouseMove事件: Private SubUserForm_MouseMove(ByVal

8.5K20
  • DevExpress控件中的gridcontrol表格控件,如何在属性中设置某一列显示为图片(图片按钮)

    DevExpress控件中的gridcontrol表格控件,如何在属性中设置某一列显示为图片(图片按钮)?效果如下图: ? 通过属性设置,而不用写代码。...由于此控件的属性太多了,就连设置背景图片的属性都有好几个地方可以设置。本人最近要移植别人开发的项目,找了好久才发现这个属性的位置。之前一直达不到这种效果。...ColumnEdit,把ColumnEdit中的Buttons展开,将其Kind属性设置为Glyph; 找到其中的Buttons,展开,找到其中的0-Glyph,展开,找到其中的ImageOptions...,找到Image属性,即可设置图片,添加一个图片后,运行显示即可达到目的。...注:本人用的控件是17.2.7版本,其他版本的不知道是否一样,仅作参考。

    6.1K50

    如何将GridViewEX升级到UWP(Universal Windows Platform)平台

    引言 上一篇文章中,我们主要讲解了如何在保证GridView控件的用户体验基础上,扩展GridView生成GridViewEx控件,增加动态添加新分组功能等,本文在上文的基础上,介绍如何在Windows10...由于微软支持的设备种类越来越多,导致ApplicationViewState不再适用。UWP平台提供了其他的解决方法如AdaptiveTriggers,内置了自适应布局。...但是在UWP应用中,非常灵活,桌面应用可以在标题栏中添加返回按钮,在移动设备中不仅能使用标题栏中的返回键,也可以使用物理返回键实现导航功能。UWP的方法比较通用,且不需要编写自定义的Xaml文件。...本文中主要通过修改内容项的尺寸来实现该功能。创建了Bound ,Unbound以及Grouped 示例文件,Grouped 显示单个GridView控件,因此在移动端能够修改Tile的尺寸及边框。...Bound 和Unbound 示例是由2个GridView控件组成,小屏幕中显的内容较多,无法显示更多的细节性的内容,因此使用Pivot控件保证同一时间只显示一个GridView控件,并支持GridView

    2.8K80

    WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWPChrome)

    ▲ GlassFrameThickness 为 -1 不止边框颜色不见了,连右上角的三个按钮的位置都跟原生不同,这个窗口的位置不贴边。...▲ 一个试验品 为了保证标题栏的标题文字也尽可能地接近原生窗口,我也通过测量得出了用于显示标题的 的各种参数。整理之后,写成了下面的样式: ?...标题栏上的三大金刚 我们发现,在以上所有方法尝试完成后,还剩下右上角的三颗按钮的背景色无法定制。如果依然采用非客户区控件覆盖的方法,这三个按钮就会被遮挡,只能自己区模拟了,那是不小的工作量。...也就是说,Win32 原生方法也许能达到 Google Chrome 的效果,但不可能达到 UWP 中的效果。 为了完全模拟 UWP,标题栏上的按钮只能自绘了。...关于自绘标题栏按钮以模拟 UWP 原生按钮,可以阅读我的另一篇文章(代码太长,还是分开了好):WPF 应用完全模拟 UWP 的标题栏按钮。

    6.7K20

    WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWPChrome)

    (例如在标题栏上放按钮,虽然实际做得很丑),不过整体来说还没 Chrome 做得精致呢 ▲ Chrome 普通窗口 ▲ Chrome 最大化窗口 为什么不做无边框窗口?...,除了窗口的边框效果在激活和非激活状态下与原生窗口一致,连右上角三个按钮的位置也是贴近原生窗口的。...也就是说,Win32 原生方法也许能达到 Google Chrome 的效果,但不可能达到 UWP 中的效果。 为了完全模拟 UWP,标题栏上的按钮只能自绘了。...关于自绘标题栏按钮以模拟 UWP 原生按钮,可以阅读我的另一篇文章(代码太长,还是分开了好):WPF 应用完全模拟 UWP 的标题栏按钮。...特别处理 Windows 7 上关闭 Aero 效果的情况 博客更新:特别说明,在 Windows 7 上可以关闭 Aero 效果,这时用本文方法做出的窗口,透明部分会显示黑色。

    2.2K60

    win10 uwp Fluent Design System 实践

    如何设计请看 Build Amazing Apps with Fluent Design 下面是我从系统收集的界面 设置 无边框的设计按钮在这里使用,可以看到无边框的按钮会在之后很多使用,如果大家在设计按钮的时候...无边框按钮请看 [UWP]使用Reveal - dino.c - 博客园,里面的代码直接拿就可以做出无边框的按钮,下面是 dino 大神做出的界面 需要知道 dino 大神的按钮使用的设计是 Reveal...如何在软件使用毛玻璃,请看 win10 uwp 毛玻璃 - 林德熙 创建空白界面 下面来告诉大家如何创建一个空白页面 首先创建一个页面,随意的命名,然后在主页面跳转到这个页面,因为这是用于测试的。...,后退按钮的大小大概是高度30,宽度50 CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true...Colors.Black; dmbyzkfscDycoue.TitleBar.ButtonBackgroundColor = Colors.Transparent; 上面代码设置最小化按钮的背景

    44020

    WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit)

    配置 WPF 项目能访问 UWP 的类型 因为我们即将开始使用到 UWP 中的控件类型,所以需要配置项目能够访问到 Windows Runtime 的类型。 ?...SDK 版本(如 16299,17763 等) Windows.Foundation.UniversalApiContract 在此目录下选择你的 API 版本(如 4.0.0.0...API 版本(如 3.0.0.0) 引用 Windows.Foundation.FoundationContract.winmd 在你添加完这些引用之后,还需要选中这些引用,右击属性,把所有的 “复制到本地...这样,当 WindowsXamlHost 初始化的时候,也会初始化一个 UWP 的控件。 这里为了简单,我初始化一个 UWP 的按钮。...但必须得为 UWP 的按钮进行一些初始化,所以我监听了 ChangedChanged 事件: <XamlHost:WindowsXamlHost Grid.Column="1" InitialTypeName

    4.7K20

    如何在UWP应用里去除系统自带的FDS效果

    Windows 10 从v1709开始引入的Fluent Design System非常漂亮,最新的v1809更是进一步完善了FDS,在开发者无需显示指定的情况下,许多UWP自带控件默认就有FDS效果。...通常来说这是件好事,但这也会引起某些App的性能问题。我的《字符映射表UWP》就是受害App之一,我们来看看如何在UWP应用中移除默认的FDS效果以避免性能问题吧。...问题描述 问题具体表现是,《字符映射表UWP》同样的版本,同样的代码,在Windows 10 v1803上可以流畅运行,而升级到1809以后,稍微滚动一下页面,选几个字符操作一下,就立即卡到无法使用。...主要影响性能的是GridViewItem以及ListViewItem上的Reveal效果,这是FDS的效果之一。即鼠标移动到元素上时,周围边框的高亮跟随效果。...在我的《字符映射表UWP》中,主要因为GridView里显示的是几百甚至上万的字符,项太多了,因此影响了性能。 ?

    63310

    Excel表格的35招必学秘技

    选中“录制宏”工具栏上的“相对引用”按钮,然后将需要的特殊符号输入到某个单元格中,再单击“录制宏”工具栏上的“停止”按钮,完成宏的录制。   ...4.以后需要打印某种表格时,打开“视面管理器”(如图4),选中需要打印的表格名称,单击“显示”按钮,工作表即刻按事先设定好的界面显示出来,简单设置、排版一下,按下工具栏上的“打印”按钮,一切就OK了。...3.调整好行高和列宽后,同时选中A1至G2单元格区域(第1位学生的成绩条区域),按“格式”工具栏“边框”右侧的下拉按钮,在随后出现的边框列表中,选中“所有框线”选项,为选中的区域添加边框(如果不需要边框...单击“格式”工具栏上“边框”右侧的下拉按钮,在随后弹出的下拉列表中,选“绘图边框”选项,或者执行“视图→工具栏→边框”命令,展开“边框”工具栏(图9)。...提示:①如果画错了边框,没关系,选中工具栏上的“擦除边框”按钮,然后在错误的边框上拖拉一下,就可以清除掉错误的边框。

    7.6K80

    用画中画模式(CompactOverlay Mode)让用总在最前端显示

    什么是,以及怎么用画中画 Windows 10 Creators Update以后UWP提供了一个新的视图模式CompactOverlay,中文翻译成 紧凑的覆盖层?...x 150 到 500 x 500 之间改变; • 虽然标题栏消失,但左下右三个边框仍在; 因为尺寸有限制,所以超过 150 x 150 到 500 x 500 这个范围的ViewModePreferences.CustomSize...这个类继承自StateTriggerBase,在监视的FrameworkElement的SizeChanged事件中调用SetActive改变State的激活状态。...结语 CompactOverlay mode – aka Picture-in-Picture 上面这篇文章还给出了更多有用的代码:如何判断是否支持CompactOverlay及如何在多视图模式下使用。...画中画模式对我的番茄钟应用很重要。虽然我很喜欢在第二个屏幕上使用番茄钟,一来不占用我的工作区域,二来可以提醒别人我正在专注工作不要打扰,但对很多只有一个屏幕的用户来说画中画模式更加实用。

    1.4K10

    【QT】常用控件(四)

    最大值 suffix 后缀 prefix 前缀 wrapping 是否允许换行 frame 是否带边框 alignment 文字对齐方式 readOnly 是否只读 buttonSymbol 按钮上的图标...最小时间日期 maximumDateTime 最大时间日期 timeSpec 时间的显示格式 其中timeSpec有三种模式: Qt::LocalTime:本地时间 Qt::UTC : 协调世界时...最大值 singleStep 按方向键时改变的步长 pageStep 按pageup或pagedown时改变的步长 sliderPosition 滑动条显示的初始位置 tracking 外观是否会跟随数值变化...* setItem(int row, int column,QTableWidget*) 根据行数设置表格中的元素 currentItem() 返回被选中的元素QTableWidgetItem* currentRow...下方边框 layoutSpacing 相邻元素之间的间距 垂直布局和水平布局是可以相互嵌套的,通过它们的相互配合可是实现更好的效果 在实现完成后,我们拖动边框发现按钮的大小是可以通过窗口的变化来变化的

    9710

    dotnet 从入门到放弃的 500 篇文章合集

    输出 C# 如何在项目引用x86 x64的非托管代码 C# 已知点和向量,求距离的点 C# 强转会不会抛出异常 C# 很少人知道的科技 C# 快速释放内存的大数组 C# 搜索算法 C# 获得设备usb...uwp 绑定 OneWay 无法使用 win10 uwp 绑定密码 win10 uwp 绑定静态属性 win10 uwp 自定义控件初始化 win10 uwp 获取指定的文件 win10 uwp 获取按钮鼠标左键按下...控件 WPF 修改按钮按下的颜色 WPF 写系统日志 WPF 判断调用方法堆栈 wpf 单例 WPF 只允许打开一个实例 WPF 可获得焦点属性 WPF 在 Alt+Tab 隐藏窗口 WPF 好看的矢量图标...wpf 如何使用 Magick.NET 播放 gif 图片 WPF 如何在 WriteableBitmap 写文字 WPF 如何在应用程序调试启动 WPF 如何在绑定失败异常 WPF 如何画出1像素的线...WPF 资源冻结 WPF 高性能笔 WPF 鼠标移动到列表上 显示列表图标 wpf-DoEvents WPF绑定密码 xamarin_forms_jin_du_tiao_kong_jian xaml

    10.4K20

    如何使用Fluent Design System (上)

    不过目前FDS中材质的应用场景有明确规定,并不是和以前材质化泛滥时一样连所有按钮都材质化。从材质的回归可以看出UWP的承载主体已经从屏幕延伸到MR。 Acrylic是目前FDS主打的材质。...Reveal最大的特点是鼠标靠近时控件的边框会被照亮,这对于无边框按钮或ListViewItem可以在不破坏其简约设计的前提下提示其可操作区域。(或许在MR中Reveal有更多的应用场景。)...但我觉得重申这个主题十分重要,UWP诞生的目的就是为了打造能在各种设备上运行的通用应用,伸缩性对UWP至关重要。即使只针对桌面设备,能有各种输入方式对可用性都有很大提高。... 3.2 将内容扩展到标题栏 在程序启动或每次更改主题颜色时调用SetupTitlebar()这个函数,注意要根据当前主题颜色改变TitleBar上按钮的颜色...(因为官方文档上没有,所以很多人会忘了处理按钮的颜色): private static void SetupTitlebar() { if (ApiInformation.IsTypePresent

    2.4K30

    UWP WinUI 制作一个路径矢量图标按钮样式入门

    本文将告诉大家如何在 UWP 或 WinUI3 或 UNO 里,如何制作一个路径按钮。...,也写明了图标按钮的内容,应用此样式的按钮即可显示出也如上图的效果 样式自然是追求一定的通用性的,上面代码只能显示固定的路径图标,自然不符合咱的需求。...可以看到第一个代码最简单,最后一个代码最有通用性,可以将更多的图标按钮使用样式减少重复的代码 那接下来给样式提出更多的要求,如鼠标移动到按钮上方时,修改按钮的图标颜色 对于 Path 元素来说,可以通过...在鼠标移动到按钮上方,即 PointerOver 时,通过设置轮廓画刷或填充画刷即可修改按钮的图标颜色 期望在鼠标移动到按钮上方,即 PointerOver 时,设置轮廓画刷或填充画刷,需要配合 VisualStateManager.../windows.ui.xaml.visualstate 了解基础用法之后,咱就可以继续在 ButtonHelper 里面定义鼠标移动到按钮上的边框轮廓颜色画刷附加属性,如下面代码 public class

    11210

    win10 uwp 处理用户点击关闭按钮

    在 UWP 开发的时候,我做的文档软件需要在文档还没有保存的时候,用户点击关闭按钮的时候告诉用户需要保存。...如何在 UWP 阻止用户点击关闭按钮退出软件,如何知道用户点击了关闭按钮 在 UWP 中有限制的功能,需要在 Package.appxmanifest 中开启,关于限制的功能请看App capability...,基本上只能通过任务管理器才能退出 在我的软件里面作为文档软件需要在用户退出的时候发现有没有保存的文档就提示用户保存,也就是需要和上面代码差不多,给出提示。...但是在 UWP 中的提示是异步的,也就是异步的提示无法阻止事件的继续,可以看到的是在用户点击关闭的时候,软件的提示页面还没显示,软件就关闭了 在 SystemNavigationCloseRequestedPreviewEventArgs...提供了延迟关闭的方法 在开始显示提示页面之前,调用 e.GetDeferral() 方法拿到返回值,在执行完成方法之后调用完成方法,请看代码 var deferral = e.GetDeferral

    88810

    【愚公系列】2023年11月 Winform控件专题 Button控件详解

    设置Button控件的属性可以设置Button控件的Text属性,指定显示在按钮上的文本。还可以设置BackColor和ForeColor属性,分别指定按钮的背景颜色和前景颜色。...,按钮的边框颜色为红色,边框宽度为1,背景色在鼠标按下时为黄色,在鼠标移过时为绿色,同时将按钮的样式设置为Flat。...;此代码将使按钮上的图像位于按钮文本的左侧。...以下是一个实现方式:在Visual Studio中创建一个Windows Form应用程序在窗体上拖动一个Label控件,用于显示用户名在窗体上拖动一个TextBox控件,用于用户输入用户名在窗体上拖动另一个...; }}当用户点击登录按钮时,程序会读取文本框中的用户名和密码,并将其与预先设置的“admin”和“123456”进行比较。

    1.8K12
    领券