WPF 点击按钮时更改按钮样式界面效果的 XAML 实现方法

在 WPF 中按钮 Button 将会吃掉路由事件,此时的 EventTrigger 如果通过 RoutedEvent 是 MouseLeftButtonDown 那么将会拿不到路由事件,也就触发不了,因此样式将不会变更。简单的解决方法就是通过 VisualStateManager 配合 VisualState 来实现

实现效果如下,所有代码都是 XAML 代码

实现方式为给 Button 定义一个样式,通过如下代码可以定义

<Style TargetType="Button">
</Style>

上面代码没有定义样式资源的 key 因此会对容器内所有的 Button 按钮样式生效,因此我将这个样式放在需要使用的容器里面,这样才不会干扰其他容器内的元素

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Button"></Style>
    </StackPanel.Resources>
</StackPanel>

接着新建一个按钮,如下代码

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Button"></Style>
    </StackPanel.Resources>
    &l
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以帮你设计一个WPF界面,包含六个功能按钮和日志信息显示。你可以根据这个模板进行改动和完善。 首先,我们需要创建一个WPF应用程序,然后在MainWindow.xaml中进行设计。 我们先创建一个Grid布局,将界面分为三行和两列: ```xml <Window x:Class="WpfApp1.MainWindow" ... Title="MainWindow" Height="450" Width="800"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> </Grid> </Window> ``` 接下来,我们在第一行添加一个Label,用来显示标题: ```xml <Label Grid.Row="0" Grid.ColumnSpan="2" Content="功能列表" FontSize="24" HorizontalAlignment="Center" Margin="0,20,0,20"/> ``` 在第二行,我们添加六个按钮,分别代表六个不同的功能。我们可以设置Button的Click事件,用来触发相应的功能。这里只是示例,你可以根据自己的需求修改按钮样式和功能。 ```xml <Button Grid.Row="1" Grid.Column="0" Content="功能一" FontSize="20" HorizontalAlignment="Center" Margin="20" Click="Button_Click"/> <Button Grid.Row="1" Grid.Column="1" Content="功能二" FontSize="20" HorizontalAlignment="Center" Margin="20" Click="Button_Click"/> <Button Grid.Row="1" Grid.Column="0" Content="功能三" FontSize="20" HorizontalAlignment="Center" Margin="20" Click="Button_Click"/> <Button Grid.Row="1" Grid.Column="1" Content="功能四" FontSize="20" HorizontalAlignment="Center" Margin="20" Click="Button_Click"/> <Button Grid.Row="1" Grid.Column="0" Content="功能五" FontSize="20" HorizontalAlignment="Center" Margin="20" Click="Button_Click"/> <Button Grid.Row="1" Grid.Column="1" Content="功能六" FontSize="20" HorizontalAlignment="Center" Margin="20" Click="Button_Click"/> ``` 在第三行,我们添加一个TextBlock,用来显示日志信息。我们可以在每个功能的Click事件中,将相应的日志信息添加到TextBlock中。 ```xml <TextBlock Grid.Row="2" Grid.ColumnSpan="2" FontSize="18" Margin="20" TextWrapping="Wrap"/> ``` 最后,我们需要在MainWindow.xaml.cs中添加Button_Click事件,用来实现每个功能的具体操作。这里只是示例,你可以根据自己的需求修改。 ```csharp private void Button_Click(object sender, RoutedEventArgs e) { Button button = sender as Button; string buttonText = button.Content.ToString(); switch (buttonText) { case "功能一": // 实现功能一的操作 textBlock.Text += "执行了功能一的操作\n"; break; case "功能二": // 实现功能二的操作 textBlock.Text += "执行了功能二的操作\n"; break; case "功能三": // 实现功能三的操作 textBlock.Text += "执行了功能三的操作\n"; break; case "功能四": // 实现功能四的操作 textBlock.Text += "执行了功能四的操作\n"; break; case "功能五": // 实现功能五的操作 textBlock.Text += "执行了功能五的操作\n"; break; case "功能六": // 实现功能六的操作 textBlock.Text += "执行了功能六的操作\n"; break; default: break; } } ``` 这样,我们就完成了一个包含六个功能按钮和日志信息显示的WPF界面
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值