WPF常用控件应用demo

时间:2022-11-04 07:29:05

WPF常用控件应用demo

一、Demo

1、Demo截图如下:

WPF常用控件应用demo

2、demo实现过程

  • 总体布局:因放大缩小窗体,控件很根据空间是否足够改变布局,故用WrapPanel布局。
         <ScrollViewer BorderBrush="BlueViolet">
    <WrapPanel Margin="40,0,0,40">
    </WrapPanel>
    </ScrollViewer>
  • 窗体资源:同一种控件多处使用会有重复代码,为减少代码冗余,在窗体资源中设置控件Style。在这里给出demo中的Button和ListBox控件的Style。
         <Window.Resources>
    <Style TargetType="Button"
    x:Key="ButtonStyle">
    <Setter Property="Width"
    Value="" />
    <Setter Property="Margin"
    Value="0,15,0,0" />
    <Setter Property="BorderBrush"
    Value="CornflowerBlue" />
    <Setter Property="Background">
    <Setter.Value>
    <LinearGradientBrush StartPoint="1,0"
    EndPoint="0,1">
    <GradientStop Color="Aqua"
    Offset="0.0" />
    <GradientStop Color="BlueViolet"
    Offset="0.55" />
    <GradientStop Color="White"
    Offset="1.0" />
    </LinearGradientBrush>
    </Setter.Value>
    </Setter>
    </Style>
    <Style x:Key="ButtonColorStyle"
    TargetType="Button"
    BasedOn="{StaticResource ButtonStyle}">
    <!--修改模板属性-->
    <Setter Property="Template">
    <Setter.Value>
    <!--控件模板-->
    <ControlTemplate TargetType="Button">
    <Border x:Name="back"
    Opacity="0.8"
    CornerRadius=""
    Background="{TemplateBinding Background}"
    BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}">
    <!--控件阴影效果-->
    <Border.BitmapEffect>
    <DropShadowBitmapEffect Color="BlueViolet"
    ShadowDepth=""
    Softness="0.8"
    Noise=""
    Opacity=""
    Direction="" />
    </Border.BitmapEffect>
    <Border x:Name="fore"
    BorderThickness=""
    CornerRadius="">
    <!--按钮内容-->
    <ContentPresenter x:Name="content"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Content="{TemplateBinding Content}">
    <ContentPresenter.BitmapEffect>
    <DropShadowBitmapEffect Color="Blue"
    Direction=""
    ShadowDepth=""
    Softness="0.1"
    Opacity="0.3" />
    </ContentPresenter.BitmapEffect>
    </ContentPresenter>
    </Border>
    </Border>
    <!--触发器-->
    <ControlTemplate.Triggers>
    <!--鼠标移入移出-->
    <Trigger Property="IsMouseOver"
    Value="True">
    <Trigger.EnterActions>
    <BeginStoryboard HandoffBehavior="Compose">
    <Storyboard>
    <DoubleAnimation To=""
    Duration="0:0:0.1"
    Storyboard.TargetName="back"
    Storyboard.TargetProperty="Opacity" />
    <ColorAnimation To="LawnGreen"
    BeginTime="0:0:0.2"
    Duration="0:0:0.2"
    Storyboard.TargetName="back"
    Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Color)" />
    <DoubleAnimation To="0.4"
    Duration="0:0:0.2"
    Storyboard.TargetName="back"
    Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Softness)" />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    </Trigger>
    <!--按钮按下弹起-->
    <Trigger Property="IsPressed"
    Value="True">
    <Trigger.EnterActions>
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation To="0.6"
    Duration="0:0:0.3"
    Storyboard.TargetName="back"
    Storyboard.TargetProperty="Opacity" />
    <ColorAnimation To="Red"
    Duration="0:0:0.1"
    Storyboard.TargetName="back"
    Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Color)" />
    <DoubleAnimation To="0.2"
    Duration="0:0:0.1"
    Storyboard.TargetName="back"
    Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Softness)" />
    </Storyboard>
    </BeginStoryboard>
    </Trigger.EnterActions>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style> <Style TargetType="ListBox"
    x:Key="ListBoxStyle">
    <Setter Property="Margin"
    Value="0,0,40,0" />
    <Setter Property="BorderBrush"
    Value="White" />
    </Style>
    </Window.Resources>
  • 控件使用,调用资源。在此只给出Button、ListView和DataGrid结合使用的代码,Button控件是包含在ListBox里面的。
                 <ListBox Style="{StaticResource ListBoxStyle}">
    <Label Style="{StaticResource LableStyle}"
    Content="Button" />
    <Button Content="Hover"
    Click="BtnHover"
    ClickMode="Hover"
    Command="{Binding HoverCommand}"
    Style="{StaticResource ButtonStyle}"></Button>
    <Button Content="Press"
    Click="BtnPress"
    ClickMode="Press"
    Command="{Binding PressCommand}"
    Style="{StaticResource ButtonStyle}"></Button>
    <Button Content="Release"
    Click="BtnRelease"
    ClickMode="Release"
    Command="{Binding ReleaseCommand}"
    Style="{StaticResource ButtonStyle}"></Button>
    <Button IsDefault="True"
    Content="Default"
    Style="{StaticResource ButtonStyle}"></Button>
    <Button IsEnabled="False"
    Content="Disabled"
    Style="{StaticResource ButtonStyle}"></Button>
    <Button Content="Color"
    Style="{StaticResource ButtonColorStyle}"></Button>
    </ListBox> <ListBox Style="{StaticResource ListBoxStyle}">
    <Label Style="{StaticResource LableStyle}"
    Content="ListView***DataGrid" />
    <ListView>
    <Grid>
    <DataGrid Name="Data"
    Width=""
    Height=""
    Margin=""
    CanUserAddRows="False"
    AutoGenerateColumns="False"
    Style="{StaticResource DataGridStyle}"
    ItemsSource="{Binding}">
    <DataGrid.Columns>
    <DataGridTextColumn Header="Name"
    Binding="{Binding Name}" />
    <DataGridTextColumn Header="Description"
    Binding="{Binding Description}" />
    <DataGridComboBoxColumn Header="Sex"
    SelectedItemBinding="{Binding Sex}"
    ItemsSource="{Binding Source={StaticResource sexEnum}}" />
    <DataGridCheckBoxColumn Header="CheckBox"
    Binding="{Binding CheckBox}" />
    <DataGridHyperlinkColumn Header="Email"
    Binding="{Binding Email}" />
    </DataGrid.Columns>
    <DataGrid.CellStyle>
    <Style TargetType="DataGridCell">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="DataGridCell">
    <TextBlock TextAlignment="Center"
    VerticalAlignment="Center">
    <ContentPresenter />
    </TextBlock>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    <Style.Triggers>
    <Trigger Property="IsSelected"
    Value="True">
    <Setter Property="Foreground"
    Value="Black" />
    </Trigger>
    </Style.Triggers>
    </Style>
    </DataGrid.CellStyle>
    <DataGrid.RowStyle>
    <Style TargetType="{x:Type DataGridRow}">
    <Setter Property="Background"
    Value="#F2F2F2" />
    <Setter Property="Height"
    Value="" />
    <Setter Property="Foreground"
    Value="Black" />
    <Style.Triggers>
    <!--隔行换色-->
    <Trigger Property="AlternationIndex"
    Value="">
    <Setter Property="Background"
    Value="#e7e7e7" />
    </Trigger>
    <Trigger Property="AlternationIndex"
    Value="">
    <Setter Property="Background"
    Value="#f2f2f2" />
    </Trigger>
    <Trigger Property="IsMouseOver"
    Value="True">
    <Setter Property="Background"
    Value="LightGray" />
    </Trigger>
    <Trigger Property="IsSelected"
    Value="True">
    <Setter Property="Foreground"
    Value="Black" />
    </Trigger>
    </Style.Triggers>
    </Style>
    </DataGrid.RowStyle>
    </DataGrid>
    </Grid>
    </ListView>
    </ListBox>

二、控件

1、WrapPanel布局控件:可以实现当空间不足时子控件自动往下一行布局,空间充足时又会自动调整行布局。常用布局控件还有StackPanel(设置其子元素是垂直排列还是水平排列)、Grid(通过定义行和列来绘制出一个表格)、Canvas(通过指定相对于其的坐标来指定子控件的位置)、DockPanel(设置其子元素如何停靠,DockPanel.Left、DockPanel.Right、DockPanel.Top、DockPanel.Bottom)。

2、ScrollViewer:滚动条,当内容显示不完整时可以通过滚动条查看余下内容。

3、ListBox:队列布局控件,可在其中添加队列内容,绑定数据,也可实现分页效果,也可添加其余控件。

4、Label:文本显示控件,快速获取少量数据。

5、Button:按钮控件,四种状态ClickMode:Hover:鼠标悬停在按钮上方引发单击事件;

Press:当单击按钮时引发单击事件;

Release:被按下然后松开时发生单击事件,默认为此。

6、CheckBox:bool,选择按钮,默认不选择,通过IsChecked="True"使其默认选择,Indeterminate达到选择按钮模糊。

7、RadioButton:与CheckBox类似,一般用于单选。

8、TextBox:文本显示,与Lable类似,但Lable不可用户不可在界面编辑,TextBox默认用户可编辑,也可设置为只读。

9、Password:密码显示框,输入字符后默认显示“*”。

10、DatePicker:日期控件,选择日期。

11、Calendar:日历控件,选择日期。

12、Slider:滑块,Slider控件继承自RangeBase类型,同继承自RangeBase的控件还有ProgressBar和ScrollBar,这类控件都是在一定数值范围内表示一个值的用途。

13、ToolBar:工具条,是一组通常在功能上相关的命令或控件的容器,在ToolBar中可添加button、textbox、image、comboBox等等控件。

14、TreeViewStyle:树形控件,可在其中添加节点。

15、DataGrid:数据表控件,表头数据类型有DataGridTextColumn、DataGridComboBoxColumn、DataGridCheckBoxColumn、DataGridHyperlinkColumn,其属性设置比较多,如SelectionUnit:包含Cell、FullRow 和CellOrRowHeader 三种单元选择模式。 Cell:选择单元格;FullRow:选择全行;CellOrRowHeader:可选择单元格,也可以通过点击行首选择全行。

16、Style:风格,可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件。

附上控件之间继承关系图一张:

WPF常用控件应用demo

  • 小结:Style、Template结合的灵活使用可以很好的改变控件样式,而变成你想要的样式。控件与控件之间的合理搭配是为了更好地展现界面。鄙人因初学WPF,不足之处请批评指正。

WPF常用控件应用demo的更多相关文章

  1. WPF常用控件样式&lpar; 内含一简单插件式开发示例&rpar;

    最近离职,离职前面的一份外派然后又外包的工作,总觉得不妥,之后外派的办个入职手续都一再失约,干脆推了.恰逢清明时节,暴雨纷纷,于是打算先休息休息调整下状态,工作的事情还是谨慎点的好,免得影响心情.话说 ...

  2. WPF常用控件样式集锦

    1.不规则形状按钮(通过更改path实现) <Style x:Key="ButtonStyleForPath" TargetType="{x:Type Button ...

  3. WPF 10天修炼 第六天- 系统属性和常用控件

    WPF系统属性和常用控件 渐变的背景色 WPF中的前景色和背景色不同于传统Winform的设置,这些属性都是Brush类型的值.在XAML中,当为这些属性设置指定的颜色后将被转换为SolidColor ...

  4. WPF布局控件常用属性介绍

    WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0)   概述:WPF布局控件都是派生自System.Windows ...

  5. Windows Phone开发(11):常用控件(下)

    原文:Windows Phone开发(11):常用控件(下) WP控件大部分都可以从Silverlight中继承过来,这里我也只能拿一部分作演示,对于其它控件如何使用,可以参考SDK相关说明以及Sil ...

  6. Windows Phone开发(10):常用控件(上)

    原文:Windows Phone开发(10):常用控件(上) Windows Phone的控件有几个来源,和传统的桌面应用程序开发或Web开发一样,有默认提供的控件和第三方开者发布的控件.一般而言,如 ...

  7. 两款不同应用场景的Wpf分页控件

    简介 今天给大家分享两个Wpf分页控件,本篇博客主要介绍一些实现思路和使用方法,具体实现和应用代码请参考文末的Demo链接 废话不多说,先看一下效果~ (两款控件显示效果是一样的) 实现思路 一款控件 ...

  8. C&num; WPF DataGrid控件实现三级联动

    利用DataGrid控件实现联动的功能,在数据库客户软件中是随处可见的,然而网上的资料却是少之又少,令人崩溃. 本篇博文将介绍利用DataGrid控件模板定义的三个ComboBox实现“省.市.区”的 ...

  9. Android音乐、视频类APP常用控件:DraggablePanel(2)

     Android音乐.视频类APP常用控件:DraggablePanel(2) 附录文章1主要演示了如何使用DraggablePanel 的DraggableView.DraggablePanel ...

随机推荐

  1. Windows Azure 服务总线和物联网

    机器到机器 (M2M) 计算正迅速成为一种技术,所有开发人员和架构师需要拥抱. 许多研究表明一个未来世界的数百亿美元的设备 (在地球上的每一个人的出现).MSDN杂志有2篇文章讨论Azure服务总线和 ...

  2. Sql server 备份还原后出现&ldquo&semi;受限制用户&rdquo&semi;问题

    http://jingyan.baidu.com/article/eb9f7b6dcbf1ea869264e856.html SQL数据库作备份和还原操作几乎是日常性事务了.但某次在对Sql Serv ...

  3. leetcode 70

    70. Climbing Stairs You are climbing a stair case. It takes n steps to reach to the top. Each time y ...

  4. Bootstrap框架的要点--栅格系统

    不同的公司要求使用框架有所不同,而Bootstrap框架在工作中使用频次较高,其中栅格系统在这一框架中的地位不容小觑,下面我们开始聊聊它吧. 简单介绍: Bootstrap提供了一套响应式.移动设备优 ...

  5. &lbrack;UIKit学习&rsqb;05&period;关于plist

    plist是一种iOS本地化轻量级存储方式 创建plist 选择New File-> Resource->plist 加载plist //获得Plist文件的全路径 NSBundle *b ...

  6. poj:4091&colon;The Closest M Points

    poj:4091:The Closest M Points 题目 描写叙述 每到饭点,就又到了一日几度的小L纠结去哪吃饭的时候了.由于有太多太多好吃的地方能够去吃,而小L又比較懒不想走太远,所以小L会 ...

  7. Python学习&lowbar;12&lowbar;方法和类定制

    方法 在上一篇随笔中,简单提到了类的某些方法:__init__()等的调用,并简要说明方法和函数的区别. 方法是在类内部定义的函数,方法也是对象,所以方法是类的属性,这就是为什么说实例的方法存在于类定 ...

  8. 第二次作业-Steam软件分析

    1 .介绍产品相关信息 随着电子音频游戏产业的发展以及正版意识的崛起,Steam已经成为大部分游戏爱好者必备的一款游戏下载平台.这款软件也使得Valve公司从一个游戏制作公司成功扩展业务到一个承揽众多 ...

  9. jwt验证登录信息

    为什么要告别session?有这样一个场景,系统的数据量达到千万级,需要几台服务器部署,当一个用户在其中一台服务器登录后,用session保存其登录信息,其他服务器怎么知道该用户登录了?(单点登录), ...

  10. 2018DDCTF misc1

    一.题目: (╯°□°)╯︵ ┻━┻ d4e8e1f4a0f7e1f3a0e6e1f3f4a1a0d4e8e5a0e6ece1e7a0e9f3baa0c4c4c3d4c6fbb9e1e6b3e3b9e ...