WPF 包含TextBlock的Grid作为按钮点击效果

已于 2023-02-03 09:50:50 修改
阅读量1k 收藏 1
点赞数
分类专栏： 深入浅出WPF 文章标签： wpf xaml TextBlock
于 2021-07-29 10:26:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu_pan123/article/details/119204865
版权

1.效果

1.1 效果1

 1.2 效果2 

 2.代码

  <Color x:Key="PrimaryFourthColorStyle">#4AB6A7</Color>
 <SolidColorBrush x:Key="PrimaryFourthSolidColorBrushStyle" Color="{StaticResource PrimaryFourthColorStyle}" />
<Color x:Key="AssistFourthColorStyle">#757575</Color>
   <SolidColorBrush x:Key="AssistFourthSolidColorBrushStyle" Color="{StaticResource AssistFourthColorStyle}" />
    <Style x:Key="TextBlockBaseStyle"
           TargetType="TextBlock">
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="TextAlignment"
                Value="Center" />
        <Setter Property="TextWrapping"
                Value="Wrap" />
    </Style>

2.1 效果1代码

2.1.1 引入命名空间

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

2.1.2 xaml

<Style x:Key="PJDIconFontBaseStyle"
           TargetType="TextBlock">
        <Setter Property="FontFamily"
                Value="/Resources/#iconfont" />
    </Style> 
<Style x:Key="HomeTextBlockStyle"
           BasedOn="{StaticResource PJDIconFontBaseStyle}"
           TargetType="TextBlock">
        <Setter Property="Text"
                Value="&#xe668;" />
    </Style>
    <materialDesign:Card Grid.Row="1"
                                 Grid.Column="1"
                                 Margin="20"
                                 Padding="32"
                                 materialDesign:ShadowAssist.ShadowDepth="Depth1">
                <StackPanel x:Name="Home"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Cursor="Hand"
                            Orientation="Vertical"
                            ToolTip="跳转到主页面">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonUp">
                            <i:InvokeCommandAction Command="{Binding SwitchCmd}"
                                                   CommandParameter="{x:Static model:ENavigationItem.Home}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <TextBlock>
                        <TextBlock.Style>
                            <Style BasedOn="{StaticResource HomeTextBlockStyle}"
                                   TargetType="TextBlock">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
                                                 Value="True">
                                        <Setter Property="FontSize"
                                                Value="102" />
                                        <Setter Property="Foreground"
                                                Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
                                                 Value="False">
                                        <Setter Property="Foreground"
                                                Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style></TextBlock>
                    <TextBlock HorizontalAlignment="Center"
                               Text="主页面">
                        <TextBlock.Style>
                            <Style BasedOn="{StaticResource TextBlockBaseStyle}"
                                   TargetType="TextBlock">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
                                                 Value="True">
                                        <Setter Property="FontSize"
                                                Value="29" />
                                        <Setter Property="Foreground"
                                                Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
                                                 Value="False">
                                        <Setter Property="FontSize"
                                                Value="28" />
                                        <Setter Property="Foreground"
                                                Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style></TextBlock>
                </StackPanel>
            </materialDesign:Card>

2.2 效果2代码

2.2.1 引入命名空间

xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

2.2.2 xaml

  <Style x:Key="DividerStyle"
                   BasedOn="{StaticResource DividerBaseStyle}"
                   TargetType="{x:Type hc:Divider}">
                <Setter Property="Width"
                        Value="240" />
                <Setter Property="FontSize"
                        Value="28" />
                <Setter Property="HorizontalAlignment"
                        Value="Center" />
            </Style>
  <converter:NavigationColorConverter x:Key="navigationColorConverter"
                                                Assist="{StaticResource AssistFourthSolidColorBrushStyle}"
                                                Primary="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
    public class NavigationColorConverter : IMultiValueConverter
    {
        /// <summary>
        /// 鼠标经过时的颜色
        /// </summary>
        public SolidColorBrush Primary { get; set; }

        /// <summary>
        /// 鼠标未经过时的颜色
        /// </summary>
        public SolidColorBrush Assist { get; set; }

        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values is null)
            {
                return Assist;
            }
            else
            {
                if ((bool)values[0] || (bool)values[1])
                {
                    return Primary;
                }
                else
                {
                    return Assist;
                }
            }
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
        <materialDesign:Card Grid.Row="2"
                                 Grid.Column="1"
                                 Margin="20"
                                 materialDesign:ShadowAssist.ShadowDepth="Depth1">
                <StackPanel HorizontalAlignment="Stretch"
                            VerticalAlignment="Center"
                            Orientation="Vertical">
                    <TextBlock x:Name="Statistics"
                               FontSize="100"
                               Style="{StaticResource ColumnStatisticsTextBlockStyle}">
                        <TextBlock.Foreground>
                            <MultiBinding Converter="{StaticResource navigationColorConverter}">
                                <Binding ElementName="Product"
                                         Path="IsMouseOver" />
                                <Binding ElementName="Part"
                                         Path="IsMouseOver" />
                            </MultiBinding>
                        </TextBlock.Foreground></TextBlock>
                    <hc:Divider Content="统计信息"
                                Foreground="{Binding ElementName=Statistics, Path=Foreground}"
                                Style="{StaticResource DividerStyle}" />
                    <StackPanel HorizontalAlignment="Center"
                                Orientation="Horizontal">
                        <Grid x:Name="Product"
                              Width="145"
                              Height="35"
                              Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="5*" />
                            </Grid.ColumnDefinitions>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <i:InvokeCommandAction Command="{Binding SwitchCmd}"
                                                           CommandParameter="{x:Static model:EStatistics.Product}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <TextBlock Grid.Column="0">
                                <TextBlock.Style>
                                    <Style BasedOn="{StaticResource FinishedProductTextBlockStyle}"
                                           TargetType="TextBlock">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="True">
                                                <Setter Property="FontSize"
                                                        Value="20" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="False">
                                                <Setter Property="FontSize"
                                                        Value="19" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style></TextBlock>
                            <TextBlock Grid.Column="1"
                                       Text="产品生产统计">
                                <TextBlock.Style>
                                    <Style BasedOn="{StaticResource TextBlockBaseStyle}"
                                           TargetType="TextBlock">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="True">
                                                <Setter Property="FontSize"
                                                        Value="20" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="False">
                                                <Setter Property="FontSize"
                                                        Value="19" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style></TextBlock>
                        </Grid>
                        <hc:Divider Height="20"
                                    LineStroke="{StaticResource AssistFourthSolidColorBrushStyle}"
                                    Orientation="Vertical" />
                        <Grid x:Name="Part"
                              Width="145"
                              Height="35"
                              Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="5*" />
                            </Grid.ColumnDefinitions>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <i:InvokeCommandAction Command="{Binding SwitchCmd}"
                                                           CommandParameter="{x:Static model:EStatistics.Part}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <TextBlock Grid.Column="0">
                                <TextBlock.Style>
                                    <Style BasedOn="{StaticResource PartTextBlockStyle}"
                                           TargetType="TextBlock">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="True">
                                                <Setter Property="FontSize"
                                                        Value="20" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="False">
                                                <Setter Property="FontSize"
                                                        Value="19" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style></TextBlock>
                            <TextBlock Grid.Column="1"
                                       Text="零件使用统计">
                                <TextBlock.Style>
                                    <Style BasedOn="{StaticResource TextBlockBaseStyle}"
                                           TargetType="TextBlock">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="True">
                                                <Setter Property="FontSize"
                                                        Value="20" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
                                                         Value="False">
                                                <Setter Property="FontSize"
                                                        Value="19" />
                                                <Setter Property="Foreground"
                                                        Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style></TextBlock>
                        </Grid>
                    </StackPanel>
                </StackPanel>
            </materialDesign:Card>

wu_pan123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF InputBindings解决TextBlock无法触发鼠标双击事件
IT界的小菜比
03-11 927
InputBindings:获取与此元素关联的输入绑定的集合。内容为一个或多个 InputBinding 元素（通常为 KeyBinding 或 MouseBinding。在WPF中TextBlock 是没有鼠标双击事件的，我们可以通过InputBindings解决。
WPF制作按钮效果
07-24
按钮透明效果边框不透明制作按钮动画，在鼠标移入按钮后会产生部分区域变色过程
WPF TextBlock 如何添加鼠标双击/MouseDoubleClick事件
qq_29881799的博客
10-15 1626
如果想要给TextBloc添加鼠标双击事件，有一个坑。两个方式区别还是蛮大，记录下来分享一下。这样子，是能够顺利触发双击命令的。（注意不是TextBlock）首先假设我们定义如下的。
WPF TextBlock 实现点击事件
4亿少女梦的博客
03-25 7146
TextBlock 标签里定义MouseLeftButtonDown 事件 xaml.cs ：
WPF 按钮动画效果制作
rise51的专栏
02-11 9946
<br />概要：本文将通过WPF按钮与Flash按钮的制作流程的对比讲解如何用Xaml实现按钮动画，同时你也还能学习Expression Blend。本文假设你正在制作一套点饮料的系统，现在你要做的就是制作出一个点咖啡按钮，用户点了之后就会给用户下咖啡订单。当然这样的按钮要越直观越好，要让用户一看就明白这是用来点咖啡的按钮，这就是对这个按钮的要求。<br /><br />本文使用的开发环境：Expression Blend 2 sp1, Expression Design<br /><br />阅读本文前
wpf Textblock 文字过长时，中间用省略号代替。
08-02
wpf Textblock 文字过长时，中间用省略号代替。有好的方法，请回复
wpf 实现textblock内容自动滚动动画
08-24
将textblock中文字遮盖的内容以自动滚动的方式呈现出来
WPF学习之TextBlock
12-14
TextBlock属性
WPF_TextBlock实例
11-16
WPF_TextBlock实例 这是一整套的实例，供新手挑选使用
WPF实现窗体中的悬浮按钮
08-26
在上面的代码中，我们使用了一个 partial 类 FloatButton 来实现悬浮按钮的逻辑，包括按钮的点击事件和拖动事件。 使用 WPF 实现窗体中的悬浮按钮需要使用 XAML 语言和 C# 语言共同实现，通过使用 Border控件和 ...
WPF 窗体跳转动画 及按钮特效
02-12
WPF 窗体跳转动画 及按钮特效
WPF实现超酷样式按钮
07-03
WPF实现超酷样式按钮 WPF超酷样式按钮 WPF自定义按钮 WPF漂亮按钮 WPF按钮皮肤
WPF 实现带递增递减按钮的文本框-输入步进器
weixin_42120687的博客
06-20 785
自定义输入步进器，可以实现按钮控制输入框内的数字的增减
【WPF应用5】WPF中的TextBlock控件：属性与事件详解及示例
最新发布
qq_35320456的博客
03-21 3127
WPF中的TextBlock控件：属性与事件详解及示例
TextBox 事件
weixin_30877227的博客
08-04 1209
1.键盘事件 　　 　　界面代码： <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition Height="*">&l...
WPF TextBox和TextBlock在ListBox中换行属性失效的解决办法
breeze默宇
03-24 725
TextBlock 在 ListBox的Wrap属性不起作用的原因和解决办法
【愚公系列】2023年10月 WPF控件专题 Grid控件详解
热门推荐
时光隧道
08-11 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
textbox点击后弹出系统键盘导致背景重置为白色的问题
weixin_30679823的博客
07-18 71
问题是这样的：当点击的时候，先执行tap事件，然后执行系统自带的（白色背景色，推上输入键盘）这个事件（就是说tap事件首先被覆盖了，这点我们可以看出来，比如我写的那个，背景先变红一下，然后立马变回来），这个时候我们再点一下之后，再次重新执行tap事件。 毫无疑问的，这个需要写事件，但是并不是tap事件，而是一个叫做路由事件，GotFocus的事件（在控件接收焦点时发生，详见msdn：http:/...
wpf为自定义title添加关闭按钮
03-28
要为WPF自定义标题添加关闭按钮，可以使用以下步骤： 1.在Window的模板中添加一个Button元素，作为关闭按钮。 ```xml <ControlTemplate TargetType="{x:Type Window}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <DockPanel Grid.Row="0"> <TextBlock Text="{TemplateBinding Title}" DockPanel.Dock="Left"/> <Button Content="X" Click="CloseButton_Click" DockPanel.Dock="Right"/> </DockPanel> <AdornerDecorator Grid.Row="1"> <ContentPresenter/> </AdornerDecorator> </Grid> </ControlTemplate> ``` 2.在Window的代码中添加CloseButton_Click事件处理程序，以关闭窗口。 ```c# private void CloseButton_Click(object sender, RoutedEventArgs e) { this.Close(); } ``` 3.最后，将窗口的模板设置为自定义模板。 ```xml <Window Template="{StaticResource MyWindowTemplate}"> <!-- 窗口内容 --> </Window> ``` 这样就可以为WPF自定义标题添加关闭按钮了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值