WPF 样式归纳（球探 数据采集）

最新推荐文章于 2024-06-17 16:56:34 发布
最新推荐文章于 2024-06-17 16:56:34 发布
阅读量610 收藏
点赞数
分类专栏： .Net应用技术
可以分享
本文链接：https://blog.csdn.net/cxb2011/article/details/100508470
版权

结合一个小窗体程序，将涉及到的 WPF部分 样式整理如下：
在这里插入图片描述

WPF中样式使用

1. DataGrid

1.1 标题居中

在这里插入图片描述

 <!--标题居中-->
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
            <Setter Property="Background" Value="DarkBlue" ></Setter>
            <Setter Property="Foreground" Value="Yellow"></Setter>
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="#FF38EAED" />
            <Setter Property="MinWidth" Value="50"/>
        </Style>

1.2 内容居中

在这里插入图片描述

1.2.1 模板列DataGridTemplateColumn的内容居中

<DataGridTemplateColumn Header="联赛" Width="12">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBlock Text="{Binding Path=LeagueName}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

1.2.2 DataGridTextColumn/DataGridHyperlinkColumn列的内容居中

对于DataGridTextColumn来说，就是一个包含了TextBlock的DataGridTemplateColumn

<!--居中DataGridTextColumn  DataGridTextColumn ElementStyle="{StaticResource CenterAlignmentStyle}"  -->
<Style x:Key="CenterAlignmentStyle" TargetType="TextBlock">
      <Setter Property="TextAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
 </Style>

Xaml代码中

<DataGridTextColumn ElementStyle="{StaticResource CenterAlignmentStyle}" Header="联赛" Binding="{Binding LeagueName}" Width="80"/>

<DataGridHyperlinkColumn ElementStyle="{StaticResource CenterAlignmentStyle}"  Header="分析链接" Binding="{Binding LinkText}"  TargetName="{Binding Link}" Width="60"/>

1.3 DataGrid隔行换色

在这里插入图片描述

<DataGrid ItemsSource="{Binding RaceList}"  AlternationCount="2">
...
</DataGrid >

        <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
        <Style  TargetType="DataGridRow">
            <Setter Property="Background" Value="#F2F2F2" />
            <Setter Property="Height" Value="25"/>
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Style.Triggers>
                <!--隔行换色-->
                <Trigger Property="AlternationIndex" Value="0" >
                    <Setter Property="Background" Value="#FFF7F1F1" />
                </Trigger>
                <Trigger Property="AlternationIndex" Value="1" >
                    <Setter Property="Background" Value="LightBlue" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightPink"/>
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

1.4 DataGrid小数保留2位

在这里插入图片描述

<DataGridTextColumn ElementStyle="{StaticResource CenterAlignmentStyle}" Header="胜" Binding="{Binding Win, StringFormat={}{0:F2}}"/>

2. Button

2.1 透明

<Button Command="{Binding CatCommand}" Width="200" Margin="5" Height="30"  Content="采集">
    <Button.OpacityMask>
        <LinearGradientBrush StartPoint="0,70" EndPoint="3,0">
            <GradientStop Offset="0" Color="Black"/>
            <GradientStop Offset="1" Color="Transparent"/>
        </LinearGradientBrush>
    </Button.OpacityMask>
</Button>

2.2 图片按钮

在这里插入图片描述

<Button Command="{Binding CatCommand}" Margin="3" Grid.Row="1" HorizontalAlignment="Left" Height="30">
    <StackPanel Margin="1" Orientation="Horizontal" >
        <Image Source="/QT_XiaoBaiYang;component/Resource/down.png" Stretch="UniformToFill" />
        <TextBlock Text="采集" Margin="10 2 10 2" VerticalAlignment="Center"/>
    </StackPanel>
</Button>

2.3 使用Button 样式

2.3.1 使用Button 样式1

在这里插入图片描述

<!--Button Style-->
        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle x:Name="Rect1"
                                       Stroke="BlanchedAlmond"  Fill="#FFB5D1A8"
                                       StrokeMiterLimit="1.000000" StrokeThickness="1.500000" RadiusX="10" RadiusY="10"/>
                            <ContentPresenter x:Name="ContentPresenter" 
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              RecognizesAccessKey="True"/> 
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Fill" TargetName="Rect1">
                                    <Setter.Value>
                                        <SolidColorBrush Color="#FF881E07"></SolidColorBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="White"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2.3.2 使用Button 样式2

在这里插入图片描述

<!--Button Style-->
        <Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
            <GradientStop Color="#FFF0F0EA" Offset="0.9"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>
        <Style x:Key="MouseButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border CornerRadius="6" BorderBrush="IndianRed" BorderThickness="1">
                            <Button   BorderBrush="{x:Null}" Background="{x:Null}" >
                            <ContentPresenter
                             Margin="{TemplateBinding Margin}"
                             SnapsToDevicePixels="{Binding SnapsToDevicePixels}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Button>
                        </Border>
                        
                        
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" Value="Blue" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<Button  Content="采集" Style="{DynamicResource MouseButtonStyle}"/>

2.3.3 使用Button 样式3

在这里插入图片描述

<Style x:Key="btnStyle" TargetType="Button">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Offset="0" Color="White"/>
                <GradientStop Offset="0.5" Color="#FF554D4A"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="FontStyle" Value="Italic"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Width" Value="60"/>
    <Setter Property="Foreground" Value="Gold"/>
    <Style.Triggers>
        <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
    </Style.Triggers>
</Style>

2.4 无边框 Button

实现无边框的Button，虽然自定义Templet做到这一点，但更简单的实现。

 <Button Content="Borderless Button" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">

也可以使用 BorderBrush=”{x:Null}” Background=”{x:Null}”来使Button看起来是没有边框，但存在的问题是：
1. 这个时候的无边框效果是和主题相关的，如果在Window Classic主题下，确实是没有边框的，但是如果在WindowXP主题下，依然会有边框阴影区域显示出来。
2. 即使仅仅在Window Classic主题下，点击Button依然会产生凹陷效果的阴影边框。

3. 超链接

<DataGrid  Hyperlink.Click="Grid_Click" >

private void Grid_Click(object sender, RoutedEventArgs e)
{
    if (grid.SelectedItem == null)
        return;
    Info info = (Info)grid.SelectedItem;
    
        System.Diagnostics.Process.Start(info.Link); //打开文件
}

3.1 文本下划线样式

 <!--TextBlock Underline style-->
        <Style x:Key="HyperlinkStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="TextDecorations" Value="Underline" />
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
</Style>

在这里插入图片描述

XBMY
关注
专栏目录
C# WPF上位机开发（动态数据采集与监控）
嵌入式-老费，一个分享专业嵌入式知识的blog
12-26 2056
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 数据采集和监控是上位机开发一项很基础的功能。采集数据的多少，采集的频率，这个取决于具体的项目类型。采集数据之后的处理，一般由于项目的不同，也是不一样的。总之，对于制造业的朋友，特别是生产端的程序员来说，数据采集是他们经常遇到的一个工作任务。 目前关于数据的显示和调整，有很多的方式和方法。不过，我还是建议大家可以自己写一个canvas，累积一下相关的知识点，这样在应用
准备练手WPF的数据采集项目
12-24
在准备一个WPF（Windows Presentation Foundation）数据采集项目时，我们首先要理解WPF的基本概念。WPF是微软.NET Framework的一部分，它提供了一个用于构建桌面应用程序的丰富且可自定义的用户界面平台。WPF通过...
WPF DataGrid 样式分享
weixin_30916125的博客
05-07 119
隔行换色，鼠标单击，悬浮样式都有 先看效果： 代码： <DataGrid AutoGenerateColumns="False" Name="dataGrid1" VerticalAlignment="Top" CanUserSortColumns="False" Width="660" Margin="5" IsReadOnly="Tru...
WPF/C#:更改界面的样式
最新发布
mingupup的博客
06-17 962
现在来看看ResourceDictionary是什么？在WPF中，资源字典（ResourceDictionary）是一个非常重要的特性，它用于存储和管理可重用的资源，如样式、控件模板、颜色、字体等。通过使用ResourceDictionary，你可以在一个集中的位置定义这些资源，并在整个应用程序中重用它们，这有助于保持应用程序的一致性和减少代码的重复。资源字典是应用使用的 XAML 资源（如样式）的存储库。在 XAML 中定义资源，然后可以使用。
2021-09-05 WPF数据采集与监控系统开发实战-设备数据采集
微软MVP Eleven
09-05 3万+
窗口配置信息 <configuration> <startup> <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.1"/> </startup> <connectionStrings> <add name="db_config" connectionString="Server=localhost;DataBase=zx.
使用WPF样式
ccvah的博客
05-23 321
在前一章，我们介绍了样式的概念，我们使用了本地定义样式的一个基础示例，它针对特定类型的控件 - TextBlock。 但是，样式可以在几个不同的范围中定义，具体取决于您希望在何处以及如何使用它们，甚至可以将样式限制为仅在您明确需要的控件上使用。 在本章中，我将向您展示定义样式的所有不同方式。 本地控件的特定样式 您可以直接在控件上定义样式，如下所示： <Window x:Class=...
WPF数据采集与监控系统实战开发全记录【附源码 典藏版】
热门推荐
时光隧道
02-26 6万+
作为B站学习区非知名Up主，本人酷爱沉迷上位机无法自拔！人称”上位机大王“（滑稽） 长期为大家提供各类WPF/上位机学习干货是我的信条！元旦在即，我又连肝一周，录制了一批WPF数据采集与监控系统项目开发实战！！ 录制内容，从上位机应用基础架构出发，全程代码实战，涉及内容包括串口通信、基础组件开发、用户控件动画、全局静态数据绑定等等。从无到有，完整实操，项目整体以MVVM思想模式设计开发，代码功能使用分层结构，逻辑与View解耦。 认真看完全部视频，你可以了解到基本的串口通信方式，以及如何利用WPF的特性开发
Demo_wpfdemo_DEMO_悬浮wpf_悬浮球_
10-02
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现一个具有自动判断位置、半隐藏、展开和内容旋转功能的悬浮球应用。这个名为"Demo_wpfdemo_DEMO_悬浮wpf_悬浮球_"的项目展示了如何在WPF...
WpfApplication2.rar_WPFApplication2_折线 图_数据分类_数据采集
07-15
综上所述，"WpfApplication2" 是一个综合性的C# WPF项目，它展示了如何利用WPF的特性和C#的功能来实现串口数据采集、数据分类、实时显示和可视化。这个程序对于学习WPF开发，尤其是数据处理和图形显示的开发者来说，...
AvCapWPF.zip_WPF 视频_WpfCap_wpf 视频_wpf 视频采集_wpf视频采集
07-14
基于WPF的视频采集程序，封装了视频采集接口，可以实时采集视频以及截图拍照等
【C#WPF】style
学长的猫的博客
08-23 509
代码： &lt;Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Themes="clr-namespace:Microsof...
WPF DataGrid样式
01-15
文章原下载地址：http://www.dotnetspark.com/kb/2941-styling-wpf-datagrid.aspx
WPFDataGrid样式
02-20
WPFDataGrid样式
WPF做的监控程序
01-07
基于.net 4.0 WPF开发的监控程序 适合用于各种电力设备或者自助设备的监控服务的开发
【C# WPF MES】设备数据信息采集系统
weixin_46445033的博客
04-03 255
3.数据可视化，oxyplot图表。1.高效管理生产工单。2.实时采集设备数据。
wpf dataGrid样式
baimanmu3398的博客
06-30 361
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft....
wpfdatagrid样式
糊涂一锅
06-09 593
http://www.silverlightchina.net/html/study/WPF/2011/1220/12681.html
WPF Datagrid 样式
dxm809的博客
07-22 275
<Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}"> <Setter Property="Padding" Value="2"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignm...
wpf datagrid样式
weirtang的专栏
11-09 1079
https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html <Window.Resources> <local:ImagePathConverter x:Key="ImagePathConverter" /> <Style TargetType="DataGrid"> <!--网格线颜色--> .
深入理解WPF数据绑定机制
依赖项属性是WPF中特有的属性类型，它们支持数据绑定、动画和样式等功能。为了进行绑定，目标控件必须是DependencyObject的实例，并且绑定的目标属性必须是依赖项属性。 WPF的数据绑定模式决定了数据如何在源和目标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值