WPF常用控件應用demo

本文轉載自查看原文 2016-08-22 10:28 2526

WPF常用控件應用demo

一、Demo

1、Demo截圖如下：

2、demo實現過程

總體布局：因放大縮小窗體，控件很根據空間是否足夠改變布局，故用WrapPanel布局。

1     <ScrollViewer BorderBrush="BlueViolet">
2         <WrapPanel  Margin="40,0,0,40">
3         </WrapPanel>
4     </ScrollViewer>

View Code

窗體資源：同一種控件多處使用會有重復代碼，為減少代碼冗余，在窗體資源中設置控件Style。在這里給出demo中的Button和ListBox控件的Style。

  1     <Window.Resources>
  2         <Style TargetType="Button"
  3                x:Key="ButtonStyle">
  4             <Setter Property="Width"
  5                     Value="75" />
  6             <Setter Property="Margin"
  7                     Value="0,15,0,0" />
  8             <Setter Property="BorderBrush"
  9                     Value="CornflowerBlue" />
 10             <Setter Property="Background">
 11                 <Setter.Value>
 12                     <LinearGradientBrush StartPoint="1,0"
 13                                          EndPoint="0,1">
 14                         <GradientStop Color="Aqua"
 15                                       Offset="0.0" />
 16                         <GradientStop Color="BlueViolet"
 17                                       Offset="0.55" />
 18                         <GradientStop Color="White"
 19                                       Offset="1.0" />
 20                     </LinearGradientBrush>
 21                 </Setter.Value>
 22             </Setter>
 23         </Style>
 24         <Style x:Key="ButtonColorStyle"
 25                TargetType="Button"
 26                BasedOn="{StaticResource ButtonStyle}">
 27             <!--修改模板屬性-->
 28             <Setter Property="Template">
 29                 <Setter.Value>
 30                     <!--控件模板-->
 31                     <ControlTemplate TargetType="Button">
 32                         <Border x:Name="back"
 33                                 Opacity="0.8"
 34                                 CornerRadius="3"
 35                                 Background="{TemplateBinding Background}"
 36                                 BorderBrush="{TemplateBinding BorderBrush}"
 37                                 BorderThickness="{TemplateBinding BorderThickness}">
 38                             <!--控件陰影效果-->
 39                             <Border.BitmapEffect>
 40                                 <DropShadowBitmapEffect Color="BlueViolet"
 41                                                         ShadowDepth="0"
 42                                                         Softness="0.8"
 43                                                         Noise="0"
 44                                                         Opacity="1"
 45                                                         Direction="315" />
 46                             </Border.BitmapEffect>
 47                             <Border x:Name="fore"
 48                                     BorderThickness="0"
 49                                     CornerRadius="3">
 50                                 <!--按鈕內容-->
 51                                 <ContentPresenter x:Name="content"
 52                                                   HorizontalAlignment="Center"
 53                                                   VerticalAlignment="Center"
 54                                                   Content="{TemplateBinding Content}">
 55                                     <ContentPresenter.BitmapEffect>
 56                                         <DropShadowBitmapEffect Color="Blue"
 57                                                                 Direction="90"
 58                                                                 ShadowDepth="2"
 59                                                                 Softness="0.1"
 60                                                                 Opacity="0.3" />
 61                                     </ContentPresenter.BitmapEffect>
 62                                 </ContentPresenter>
 63                             </Border>
 64                         </Border>
 65                         <!--觸發器-->
 66                         <ControlTemplate.Triggers>
 67                             <!--鼠標移入移出-->
 68                             <Trigger Property="IsMouseOver"
 69                                      Value="True">
 70                                 <Trigger.EnterActions>
 71                                     <BeginStoryboard HandoffBehavior="Compose">
 72                                         <Storyboard>
 73                                             <DoubleAnimation To="1"
 74                                                              Duration="0:0:0.1"
 75                                                              Storyboard.TargetName="back"
 76                                                              Storyboard.TargetProperty="Opacity" />
 77                                             <ColorAnimation To="LawnGreen"
 78                                                             BeginTime="0:0:0.2"
 79                                                             Duration="0:0:0.2"
 80                                                             Storyboard.TargetName="back"
 81                                                             Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Color)" />
 82                                             <DoubleAnimation To="0.4"
 83                                                              Duration="0:0:0.2"
 84                                                              Storyboard.TargetName="back"
 85                                                              Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Softness)" />
 86                                         </Storyboard>
 87                                     </BeginStoryboard>
 88                                 </Trigger.EnterActions>
 89                             </Trigger>
 90                             <!--按鈕按下彈起-->
 91                             <Trigger Property="IsPressed"
 92                                      Value="True">
 93                                 <Trigger.EnterActions>
 94                                     <BeginStoryboard>
 95                                         <Storyboard>
 96                                             <DoubleAnimation To="0.6"
 97                                                              Duration="0:0:0.3"
 98                                                              Storyboard.TargetName="back"
 99                                                              Storyboard.TargetProperty="Opacity" />
100                                             <ColorAnimation To="Red"
101                                                             Duration="0:0:0.1"
102                                                             Storyboard.TargetName="back"
103                                                             Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Color)" />
104                                             <DoubleAnimation To="0.2"
105                                                              Duration="0:0:0.1"
106                                                              Storyboard.TargetName="back"
107                                                              Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Softness)" />
108                                         </Storyboard>
109                                     </BeginStoryboard>
110                                 </Trigger.EnterActions>
111                             </Trigger>
112                         </ControlTemplate.Triggers>
113                     </ControlTemplate>
114                 </Setter.Value>
115             </Setter>
116         </Style>
117 
118         <Style TargetType="ListBox"
119                x:Key="ListBoxStyle">
120             <Setter Property="Margin"
121                     Value="0,0,40,0" />
122             <Setter Property="BorderBrush"
123                     Value="White" />
124         </Style>
125     </Window.Resources>

View Code

控件使用，調用資源。在此只給出Button、ListView和DataGrid結合使用的代碼，Button控件是包含在ListBox里面的。

  1             <ListBox Style="{StaticResource ListBoxStyle}">
  2                 <Label Style="{StaticResource LableStyle}"
  3                        Content="Button" />
  4                 <Button Content="Hover"
  5                         Click="BtnHover"
  6                         ClickMode="Hover"
  7                         Command="{Binding HoverCommand}"
  8                         Style="{StaticResource ButtonStyle}"></Button>
  9                 <Button Content="Press"
 10                         Click="BtnPress"
 11                         ClickMode="Press"
 12                         Command="{Binding PressCommand}"
 13                         Style="{StaticResource ButtonStyle}"></Button>
 14                 <Button Content="Release"
 15                         Click="BtnRelease"
 16                         ClickMode="Release"
 17                         Command="{Binding ReleaseCommand}"
 18                         Style="{StaticResource ButtonStyle}"></Button>
 19                 <Button IsDefault="True"
 20                         Content="Default"
 21                         Style="{StaticResource ButtonStyle}"></Button>
 22                 <Button IsEnabled="False"
 23                         Content="Disabled"
 24                         Style="{StaticResource ButtonStyle}"></Button>
 25                 <Button Content="Color"
 26                         Style="{StaticResource ButtonColorStyle}"></Button>
 27             </ListBox>
 28 
 29             <ListBox Style="{StaticResource ListBoxStyle}">
 30                 <Label Style="{StaticResource LableStyle}"
 31                        Content="ListView***DataGrid" />
 32                 <ListView>
 33                     <Grid>
 34                         <DataGrid Name="Data"
 35                                   Width="200"
 36                                   Height="180"
 37                                   Margin="5"
 38                                   CanUserAddRows="False"
 39                                   AutoGenerateColumns="False"
 40                                   Style="{StaticResource DataGridStyle}"
 41                                   ItemsSource="{Binding}">
 42                             <DataGrid.Columns>
 43                                 <DataGridTextColumn Header="Name"
 44                                                     Binding="{Binding Name}" />
 45                                 <DataGridTextColumn Header="Description"
 46                                                     Binding="{Binding Description}" />
 47                                 <DataGridComboBoxColumn Header="Sex"
 48                                                         SelectedItemBinding="{Binding Sex}"
 49                                                         ItemsSource="{Binding Source={StaticResource sexEnum}}" />
 50                                 <DataGridCheckBoxColumn Header="CheckBox"
 51                                                         Binding="{Binding CheckBox}" />
 52                                 <DataGridHyperlinkColumn Header="Email"
 53                                                          Binding="{Binding Email}" />
 54                             </DataGrid.Columns>
 55                             <DataGrid.CellStyle>
 56                                 <Style TargetType="DataGridCell">
 57                                     <Setter Property="Template">
 58                                         <Setter.Value>
 59                                             <ControlTemplate TargetType="DataGridCell">
 60                                                 <TextBlock TextAlignment="Center"
 61                                                            VerticalAlignment="Center">
 62                            <ContentPresenter />
 63                                                 </TextBlock>
 64                                             </ControlTemplate>
 65                                         </Setter.Value>
 66                                     </Setter>
 67                                     <Style.Triggers>
 68                                         <Trigger Property="IsSelected"
 69                                                  Value="True">
 70                                             <Setter Property="Foreground"
 71                                                     Value="Black" />
 72                                         </Trigger>
 73                                     </Style.Triggers>
 74                                 </Style>
 75                             </DataGrid.CellStyle>
 76                             <DataGrid.RowStyle>
 77                                 <Style TargetType="{x:Type DataGridRow}">
 78                                     <Setter Property="Background"
 79                                             Value="#F2F2F2" />
 80                                     <Setter Property="Height"
 81                                             Value="25" />
 82                                     <Setter Property="Foreground"
 83                                             Value="Black" />
 84                                     <Style.Triggers>
 85                                         <!--隔行換色-->
 86                                         <Trigger Property="AlternationIndex"
 87                                                  Value="0">
 88                                             <Setter Property="Background"
 89                                                     Value="#e7e7e7" />
 90                                         </Trigger>
 91                                         <Trigger Property="AlternationIndex"
 92                                                  Value="1">
 93                                             <Setter Property="Background"
 94                                                     Value="#f2f2f2" />
 95                                         </Trigger>
 96                                         <Trigger Property="IsMouseOver"
 97                                                  Value="True">
 98                                             <Setter Property="Background"
 99                                                     Value="LightGray" />
100                                         </Trigger>
101                                         <Trigger Property="IsSelected"
102                                                  Value="True">
103                                             <Setter Property="Foreground"
104                                                     Value="Black" />
105                                         </Trigger>
106                                     </Style.Triggers>
107                                 </Style>
108                             </DataGrid.RowStyle>
109                         </DataGrid>
110                     </Grid>
111                 </ListView>
112             </ListBox>

View Code

二、控件

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來設置控件的某些屬性值，並使該設置影響到指定范圍內的所有該類控件或影響指定的某一控件。

附上控件之間繼承關系圖一張：

小結：Style、Template結合的靈活使用可以很好的改變控件樣式，而變成你想要的樣式。控件與控件之間的合理搭配是為了更好地展現界面。鄙人因初學WPF，不足之處請批評指正。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF 入門《常用控件》 WPF中常用控件（TreeView, ComboBox, DataGrid, ListView)使用MVVM模式綁定的demo [WPF]Slider控件常用方法 [WPF]控件應用多個樣式 WPF 幾種常用控件樣式的總結 WPF RichTextBox 控件常用方法和屬性 WPF常用第三方控件 WPF中TabControl控件和ListBox控件的簡單應用（MVVM） WPF控件 WPF 控件