WPF 入门教程Button使用

92 篇文章 9 订阅
92 篇文章 23 订阅

没有Button控件的界面框架是不完整的。所以,WPF当然也有自己的按钮控件。就像WPF其它的控件一样,按钮控件的使用非常灵活,几乎可以让你实现任何东西。就让我们从以下几个简单例子开始吧:

简单的按钮

像其他的WPF控件一样,您可以用Button标记定义按钮控件。如果你在标记定义中间加入文字,文字的内容就是按钮的文字内容。

<Button>Hello, world!</Button>

很简单吧?当然,上面这个例子里的按钮并没有任何实际的逻辑在里面。不过,如果你把鼠标移上去,就能发现它周围一圈还是有一个不错的悬浮效果的。下面就让我们给它加点事件逻辑进去,订阅它的Click事件(关于事件流程的细节,您可以在订阅XAML的事件章节找到更多内容):

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

在后台代码,你需要一个对应的方法处理 click 事件:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

现在你有了一个非常简单的按钮,当你点击它时,一条消息会显示出来!

格式化内容

控件内部,Button 控件的 Content 文字内容会被转换为 TextBlock 控件,也就是说你可以按照 TextBlock 的方式控制 Button 控件文字的样式。在 Button 控件中,你会找到几个这样的特性,包括(但不限于)ForegroundBackgroundFontWeight 等等。换一种说法,改变 Button 控件文本格式是非常简单的:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

通过直接在Button上设置这些属性,您当然只能对所有内容应用相同的格式,但如果这还不够好,请继续阅读以获得更高级的内容格式。

具有高级内容的按钮

我们已经多次讨论过这个问题,但是关于WPF的一个非常酷的事情是能够用其他WPF控件替换控件中的简单文本。 这也意味着您不必将按钮限制为简单文本,格式相同 - 您可以添加多个具有不同格式的文本控件。 WPF Button仅支持一个直接子控件,但您可以将其设置为Panel,然后将根据需要放入任意数量的控件。 您可以使用它来创建具有各种格式的按钮:

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

但是,不仅仅局限于文字 - 你可以把任何你想要的东西放在你的按钮里面,接下来到一个我知道很多人会要求的主题。 带图片的按钮!

带图片的按钮(ImageButton)

在许多UI框架中,您将找到常规Button,然后是一个或多个其他变体,它们将提供额外的功能。 最常用的变体之一是ImageButton,顾名思义,它是一个Button,它通常允许您在文本之前包含图片。 但是在WPF中,不需要单独的控件来实现这一点 - 正如您刚才看到的,我们可以在Button中放置几个控件,这样您就可以轻松地向它添加一个Image控件,如下所示:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

在WPF中创建一个ImageButton真的很简单,你当然可以自由移动,例如 如果你想在文本之后而不是之前的图片等。

按钮填充

您可能已经注意到WPF框架中的按钮默认情况下没有任何填充。 这意味着文本非常接近边框,这可能看起来有点奇怪,因为在其他地方找到的大多数按钮,确实在侧面至少有一些填充。 不用担心,因为Button带有Padding属性:

<Button Padding="5,2">Hello, World!</Button>

这将在边上应用5像素的填充,在顶部和底部应用2个像素。 但是必须在所有按钮上应用填充可能会在某个时刻有点令人厌烦,所以这里有一个小提示:您可以使用样式在整个应用程序或整个应用程序中全局应用填充(后面的样式有更多)。 这里使用Window.Resources属性将它应用于Window的示例:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

此填充现在将应用于所有按钮,但您当然可以通过在Button上专门定义Padding属性来覆盖它。 以下是此示例的所有按钮使用公共填充:

推荐一款WPF MVVM框架开源项目:Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载: Newbeecoder.UI开源项目icon-default.png?t=M3K6https://share.weiyun.com/py6W1dcK

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas是WPF中的一个控件,用于在一个二维平面上放置和布局其他UI元素。它允许我们使用Canvas.Left和Canvas.Top属性来指定元素在Canvas上的位置。Canvas控件可以包含多个子元素,并且可以使用Canvas控件属性对这些子元素进行定位。 例如,引用中的示例代码演示了如何在一个Canvas上放置一个Button和一个TextBlock,并使用Canvas.Left和Canvas.Top属性指定它们的位置。这个Canvas的宽度和高度分别为200,Button位于Canvas的左上角,位置为(50, 50),TextBlock位于Canvas的左上角的右下方,位置为(100, 100)。 类似地,引用中的示例代码展示了如何使用Canvas控件属性对多个Rectangle元素进行定位。每个Rectangle都有指定的Canvas.Left和Canvas.Top属性值,分别决定了它们在Canvas上的位置。这个Canvas的背景色为LightCyan,包含三个Rectangle,它们的位置和大小由Canvas.Left、Canvas.Top、Height和Width属性确定。 最后,引用中的示例代码也是创建了一个Canvas,并使用Canvas控件属性对三个Rectangle元素进行定位。这个Canvas的背景色为LightCyan,每个Rectangle都有指定的Canvas.Left和Canvas.Top属性值来确定它们在Canvas上的位置。 总之,Canvas是一个用于布局其他UI元素的容器控件,我们可以使用Canvas.Left和Canvas.Top属性来指定元素在Canvas上的位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【愚公系列】2023年07月 WPF控件专题 Canvas控件详解](https://blog.csdn.net/aa2528877987/article/details/119523215)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [WPF 入门教程Canvas布局](https://blog.csdn.net/liaohaiyin/article/details/123843971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值