本著每天記錄一點(diǎn)成長(zhǎng)一點(diǎn)的原則，打算將目前完成的一個(gè)WPF項(xiàng)目相關(guān)的技術(shù)分享出來，供團(tuán)隊(duì)學(xué)習(xí)與總結(jié)。
總共分三個(gè)部分：
基礎(chǔ)篇主要爭(zhēng)對(duì)C#初學(xué)者，鞏固C#常用知識(shí)點(diǎn)；
中級(jí)篇主要爭(zhēng)對(duì)WPF布局與MaterialDesign美化設(shè)計(jì)，在減輕代碼量的情況做出漂亮的應(yīng)用；
終極篇為框架應(yīng)用實(shí)戰(zhàn)，包含MVVM框架Prism，ORM框架EntityFramework Core，開源數(shù)據(jù)庫Postgresql。
目錄
- Prism+MaterialDesign+EntityFramework Core+Postgresql WPF開發(fā)總結(jié) 之 基礎(chǔ)篇
- Prism+MaterialDesign+EntityFramework Core+Postgresql WPF開發(fā)總結(jié) 之 中級(jí)篇
- Prism+MaterialDesign+EntityFramework Core+Postgresql WPF開發(fā)總結(jié) 之 終極篇（待續(xù)）
前言
WPF的發(fā)布同時(shí)伴隨著MVVM框架的發(fā)布，此篇將圍繞MVVM框架做表示與數(shù)據(jù)分離設(shè)計(jì)，包含基礎(chǔ)UI設(shè)計(jì)以及MaterialDesign的高端設(shè)計(jì)。MVVM框架細(xì)節(jié)請(qǐng)參照終極篇。其中的一個(gè)效果圖如下，其他效果圖請(qǐng)往下看。
MaterialDesign設(shè)計(jì)的登錄界面
基礎(chǔ)UI設(shè)計(jì)
用Windows Presentation Foundation (WPF)，可以創(chuàng)建具有非凡視覺效果的桌面Windows 應(yīng)用程序。目前.NET Core 3.0 支持使用 Windows Presentation Foundation (WPF) Windows 桌面應(yīng)用程序，以后有可能擴(kuò)展到其他OS平臺(tái)。
WPF設(shè)計(jì)中使用的XAML標(biāo)記語言，類似XML標(biāo)記語言。XAML以及WPF自帶的基礎(chǔ)控件此處不做介紹可以參照微軟文檔。
一、常見布局
布局關(guān)鍵點(diǎn)就是不管什么像素下都能適應(yīng)窗體大小。WPF內(nèi)部提供了一套強(qiáng)大的布局系統(tǒng)，設(shè)計(jì)人員只需要使用相對(duì)定位布局就可以。
通用布局：網(wǎng)格，堆疊，?？?。掌握這三種差不多可以應(yīng)對(duì)所有開發(fā)。
1、網(wǎng)格布局
也就是常用的Grid布局。通過行列把界面劃分為網(wǎng)格，子控件指定相應(yīng)的行列號(hào)布局到指定格子。
行與列的高寬可以使用【*】按比例劃分，也可以使用【Auto】根據(jù)內(nèi)容自動(dòng)調(diào)整。默認(rèn)情況下，行和列占用的空間量最少，以容納給定行或列中包含的任何單元內(nèi)的最大內(nèi)容。
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <; <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <; <TextBox Grid.Column="0" Text="column1 auto" /> <TextBox Grid.Column="1" Text="column2 auto" /> <TextBox Grid.Column="2" Text="column3 auto" /> </Grid> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> <; <TextBox Grid.Column="0" Text="column1 auto" /> <TextBox Grid.Column="1" Text="column2 *" /> <TextBox Grid.Column="2" Text="column3 auto" /> </Grid> <Grid Grid.Row="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="2*" /> <; <TextBox Grid.Column="0" Text="column1 *" /> <TextBox Grid.Column="1" Text="column2 2*" /> </Grid> <Grid Grid.Row="3"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="2*" /> <; <TextBox Grid.Column="0" Height="100" Text="column1 * height=100" /> <TextBox Grid.Column="1" Text="column2 2*" /> </Grid> </Grid>效果如圖：大小隨窗體自動(dòng)調(diào)整。
網(wǎng)格布局效果
2、堆疊
控件按指定方向排列，顯示不下的時(shí)候根據(jù)所使用的控件不同會(huì)有區(qū)別。
- StackPanel：子控件按垂直或水平堆疊，超出空間不換行。
- VirtualizingStackPanel：子控件在水平或垂直的行上虛擬化并排列，超出空間不換行。(大量數(shù)據(jù)綁定時(shí)常用)
- WrapPanel：子控件按從左到右的順序定位，在當(dāng)前行上的控件超出允許的空間時(shí)，換行到下一行。(列表模板常用)
<Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="60" /> <RowDefinition Height="60" /> <RowDefinition Height="60" /> <RowDefinition Height="60" /> <RowDefinition Height="60" /> <RowDefinition Height="60" /> <; <StackPanel Orientation="Horizontal"> <TextBlock Text="statckpanelHorizontal 1" /> <TextBlock Text="statckpanelHorizontal 2" /> <TextBlock Text="statckpanelHorizontal 3" /> <TextBlock Text="statckpanelHorizontal 4" /> <TextBlock Text="statckpanelHorizontal 5" /> <TextBlock Text="statckpanelHorizontal 6" /> </StackPanel> <StackPanel Grid.Row="1" Orientation="Vertical"> <TextBlock Text="statckpanelVertical 1" /> <TextBlock Text="statckpanelVertical 2" /> <TextBlock Text="statckpanelVertical 3" /> <TextBlock Text="statckpanelVertical 4" /> <TextBlock Text="statckpanelVertical 5" /> <TextBlock Text="statckpanelVertical 6" /> </StackPanel> <VirtualizingStackPanel Grid.Row="2" Orientation="Horizontal"> <TextBlock Text="VirtualizingStackPanelHorizontal 1" /> <TextBlock Text="VirtualizingStackPanelHorizontal 2" /> <TextBlock Text="VirtualizingStackPanelHorizontal 3" /> <TextBlock Text="VirtualizingStackPanelHorizontal 4" /> <TextBlock Text="VirtualizingStackPanelHorizontal 5" /> <TextBlock Text="VirtualizingStackPanelHorizontal 6" /> </VirtualizingStackPanel> <VirtualizingStackPanel Grid.Row="3" Orientation="Vertical"> <TextBlock Text="VirtualizingStackPanelVertical 1" /> <TextBlock Text="VirtualizingStackPanelVertical 2" /> <TextBlock Text="VirtualizingStackPanelVertical 3" /> <TextBlock Text="VirtualizingStackPanelVertical 4" /> <TextBlock Text="VirtualizingStackPanelVertical 5" /> <TextBlock Text="VirtualizingStackPanelVertical 6" /> </VirtualizingStackPanel> <WrapPanel Grid.Row="4" Orientation="Horizontal"> <TextBlock Text="WrapPanelHorizontal 1" /> <TextBlock Text="WrapPanelHorizontal 2" /> <TextBlock Text="WrapPanelHorizontal 3" /> <TextBlock Text="WrapPanelHorizontal 4" /> <TextBlock Text="WrapPanelHorizontal 5" /> <TextBlock Text="WrapPanelHorizontal 6" /> </WrapPanel> <WrapPanel Grid.Row="5" Orientation="Vertical"> <TextBlock Text="WrapPanelVertical 1" /> <TextBlock Text="WrapPanelVertical 2" /> <TextBlock Text="WrapPanelVertical 3" /> <TextBlock Text="WrapPanelVertical 4" /> <TextBlock Text="WrapPanelVertical 5" /> <TextBlock Text="WrapPanelVertical 6" /> </WrapPanel> </Grid>效果如下：
堆疊布局效果
StackPanel與VirtualizingStackPanel布局效果一樣。WrapPanel比較特殊：指定水平方向堆疊時(shí)，水平放不下自動(dòng)換成下一行顯示；指定垂直方向堆疊時(shí)，垂直放不下時(shí)自動(dòng)換成下一列顯示。
3、?？?/p>
DockPanel：子控件與面板的邊緣對(duì)齊。這個(gè)分模塊布局時(shí)用的最多。
<DockPanel> <WrapPanel Height="50" Background="LightBlue" DockPanel.Dock="Top" Orientation="Horizontal"> <TextBlock Text="Header----DockPanel.Dock=Top" /> <TextBlock Text="Header1" /> <TextBlock Text="Header1" /> <TextBlock Text="Header1" /> <TextBlock Text="Header1" /> <TextBlock Text="Header1" /> </WrapPanel> <WrapPanel Background="LightGray" DockPanel.Dock="Left" Orientation="Vertical"> <TextBlock Text="Le; /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> <TextBlock Text="menu1" /> </WrapPanel> <WrapPanel Background="LightSkyBlue" DockPanel.Dock="Right" Orientation="Horizontal"> <TextBlock Text="Rig; /> <TextBlock Text="Content" /> <TextBlock Text="content" /> <TextBlock Text="content" /> <TextBlock Text="content" /> <TextBlock Text="content" /> <TextBlock Text="content" /> </WrapPanel> </DockPanel>效果如下：與Grid類似，不過是固定區(qū)域按方向自動(dòng)延展。
停靠布局效果
二、式樣與模板
通過定義式樣和模板，重復(fù)使用它能讓應(yīng)用代碼量下降，同時(shí)也方便以后維護(hù)修改。
1、式樣 Style
<Window.Resources> <!-- 默認(rèn)表示字體為16pt --> <Style TargetType="TextBlock"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="FontSize" Value="16" /> </Style> <!-- 繼承默認(rèn)設(shè)置并擴(kuò)展 --> <Style x:Key="Title" BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="TextBlock"> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="FontSize" Value="20" /> </Style> <; <StackPanel Orientation="Vertical"> <TextBlock Text="default style" /> <TextBlock Style="{StaticResource Title}" Text="Title style" /> </StackPanel>自定義式樣效果圖：
自定義樣式
2、模板 Template
WPF的所有控件都提供了默認(rèn)的模板ControlTemplate，模板一般和式樣結(jié)合使用。模板中需要特別學(xué)習(xí)VisualState和Trigger，通過VisualState可以設(shè)計(jì)在不同狀態(tài)（鼠標(biāo)按下，松開等）時(shí)控件顯示樣式，而通過Trigger可以讓控件跟隨參照對(duì)象數(shù)據(jù)或者綁定的數(shù)據(jù)做式樣變化，內(nèi)容比較多此篇不詳細(xì)介紹。
如下是一個(gè)根據(jù)綁定的數(shù)據(jù)內(nèi)容顯示不同控件的例子。
<Window x:Class="WPFUI.Core.Template" xmlns="; xmlns:x="; xmlns:d="; xmlns:local="clr-namespace:WPFUI.Core" xmlns:mc="; xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="Template" Width="800" Height="450" mc:Ignorable="d"> <Window.Resources> <!-- TextBox的顯示模板 --> <DataTemplate x:Key="typeText" DataType="sys:String"> <TextBox Width="100" Text="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" /> </DataTemplate> <!-- Label的顯示模板 --> <DataTemplate x:Key="typelabel" DataType="sys:String"> <Label Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" /> </DataTemplate> <!-- CheckBox的顯示模板 --> <DataTemplate x:Key="typeCheck" DataType="sys:String"> <CheckBox Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" /> </DataTemplate> <!-- Image的顯示模板 --> <DataTemplate x:Key="typeimg" DataType="sys:String"> <Label Background="LightBlue" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" /> </DataTemplate> <DataTemplate x:Key="typeTemp"> <ContentPresenter x:Name="detail" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" ContentTemplate="{StaticResource typeText}" /> <Da; <!-- 如果字符為text，則顯示TextBox模板 --> <DataTrigger Binding="{Binding}" Value="text"> <Setter TargetName="detail" Property="ContentTemplate" Value="{StaticResource typeText}" /> </DataTrigger> <!-- 如果字符為label，則顯示Label模板 --> <DataTrigger Binding="{Binding}" Value="label"> <Setter TargetName="detail" Property="ContentTemplate" Value="{StaticResource typelabel}" /> </DataTrigger> <!-- 如果字符為check，則顯示CheckBox模板 --> <DataTrigger Binding="{Binding}" Value="check"> <Setter TargetName="detail" Property="ContentTemplate" Value="{StaticResource typeCheck}" /> </DataTrigger> <!-- 如果字符為img，則顯示Image模板 --> <DataTrigger Binding="{Binding}" Value="img"> <Setter TargetName="detail" Property="ContentTemplate" Value="{StaticResource typeimg}" /> </DataTrigger> </Da; </DataTemplate> <; <Grid> <ListView ItemTemplate="{StaticResource typeTemp}"> <!-- 測(cè)試數(shù)據(jù) --> <Li; <x:Array Type="sys:String"> <sys:String>text</sys:String> <sys:String>label</sys:String> <sys:String>check</sys:String> <sys:String>img</sys:String> </x:Array> </Li; <Li; <ItemsPanelTemplate> <WrapPanel Orientation="Vertical" /> </ItemsPanelTemplate> </Li; </ListView> </Grid> </Window>效果如下：
模板設(shè)計(jì)
高端UI設(shè)計(jì) MaterialDeisgn
它是Google開源的一套UI設(shè)計(jì)系統(tǒng)，用它可以設(shè)計(jì)出非常美觀的Web頁面，App，桌面程序，尤其是圖標(biāo)非常全面。有它你不用懂Photoshop也可以設(shè)計(jì)出高端的界面。
官網(wǎng)地址：
MaterialDesign設(shè)計(jì)
一、引入MaterialDesign
WPF專用的MaterialDesign開源代碼地址：
項(xiàng)目介紹網(wǎng)站：
1、添加MaterialDesignThemes包
安裝materialdesign包
2、編輯A添加資源
全局引入MaterialDesign的資源文件
<prism:PrismApplication x:Class="W; xmlns="; xmlns:x="; xmlns:local="clr-namespace:WpfMaterial.Core" xmlns:prism=";> <A; <ResourceDictionary> <Re; <ResourceDictionary Source="pack://application:,,,;component/Theme; /> <ResourceDictionary Source="pack://application:,,,;component/Theme; /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary; /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accen; /> </Re; </ResourceDictionary> </A; </prism:PrismApplication>3、配置MaterialDesign參照和字體
添加命名空間和字體(字體對(duì)圖標(biāo)顯示很重要)，這樣就可以使用它里面的控件了。
<Window x:Class="W; xmlns="; xmlns:x="; xmlns:materialDesign="winfx/xaml/themes" xmlns:prism="; Title="{Binding Title}" Width="525" Height="350" prism:ViewModelLocator.AutoWireViewModel="True" Background="{DynamicResource MaterialDesignPaper}" FontFamily="{DynamicResource MaterialDesignFont}"> <Grid> <materialDesign:Card Margin="16" Padding="32"> <TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}">My First Material Design App</TextBlock> </materialDesign:Card> </Grid> </Window>卡片效果：
MaterialDesing卡片效果
二、使用MaterialDesign
場(chǎng)景一：登錄界面
簡(jiǎn)單又美麗，圖標(biāo)都是MaterialDesign自帶的。
MaterialDesign登錄界面
相關(guān)代碼：
<materialDesign:Card Width="425" Height="350" Margin="16" Padding="32"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <; <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <; <TextBlock Grid.Row="0" Grid.ColumnSpan="4" Margin="20" HorizontalAlignment="Center" FontSize="28" Text="Login" /> <materialDesign:PackIcon Grid.Row="2" Grid.Column="0" Width="30" Height="30" Margin="30,15,10,15" VerticalAlignment="Center" Kind="Account" /> <TextBox Grid.Row="2" Grid.Column="2" Margin="0,10,30,10" materialDesign:HintAssist.Hint="用戶名" Style="{StaticResource MaterialDesignFloatingHintTextBox}" /> <materialDesign:PackIcon Grid.Row="3" Grid.Column="0" Width="30" Height="30" Margin="30,15,10,15" VerticalAlignment="Center" Kind="Key" /> <PasswordBox Grid.Row="3" Grid.Column="2" Margin="0,10,30,10" materialDesign:HintAssist.Hint="密碼" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" /> <Button Grid.Row="4" Grid.ColumnSpan="4" Height="50" Margin="40,20,40,25" Content="登錄" FontSize="20" /> </Grid> </materialDesign:Card>場(chǎng)景二：列表界面
常見使用
MaterialDesign列表界面
相關(guān)代碼：
<Window x:Class="W; xmlns="; xmlns:x="; xmlns:materialDesign="winfx/xaml/themes" xmlns:prism="; xmlns:vm="clr-namespace:WpfMaterial.Core.ViewModels" Background="{DynamicResource MaterialDesignPaper}" FontFamily="{DynamicResource MaterialDesignFont}" FontSize="16"> <Window.DataContext> <vm:ListViewViewModel /> <; <Window.Resources> <Style x:Key="CrudIsSelectedCheckBoxStyle" BasedOn="{StaticResource {x:Type CheckBox}}" TargetType="{x:Type CheckBox}"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style x:Key="CrudDataGridColumnHeaderStyle" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" /> <Setter Property="BorderBrush" Value="LightGray" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="IsEnabled" Value="False" /> <Setter Property="Padding" Value="2" /> <Setter Property="Height" Value="30" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" /> </Style> <Style x:Key="CrudDataGridRowHeaderStyle" BasedOn="{StaticResource {x:Type DataGridRowHeader}}" TargetType="{x:Type DataGridRowHeader}"> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Width" Value="0" /> </Style> <Style x:Key="CrudDataGridRowStyle" BasedOn="{StaticResource {x:Type DataGridRow}}" TargetType="{x:Type DataGridRow}"> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="Height" Value="30" /> <S; <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" /> </Trigger> </S; </Style> <Style x:Key="CrudDataGridCellStyle" BasedOn="{StaticResource {x:Type DataGridCell}}" TargetType="{x:Type DataGridCell}"> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" /> <Setter Property="BorderBrush" Value="LightGray" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="Padding" Value="0" /> <S; <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" /> <Setter Property="BorderBrush" Value="LightGray" /> </Trigger> </S; </Style> <Style x:Key="CrudEditButtonStyle" BasedOn="{StaticResource MaterialDesignFlatButton}" TargetType="{x:Type Button}"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="Cursor" Value="Hand" /> <Setter Property="ToolTip" Value="編輯" /> <Setter Property="Content" Value="編輯" /> </Style> <; <Grid> <DataGrid Margin="5" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" CellStyle="{StaticResource CrudDataGridCellStyle}" ColumnHeaderStyle="{StaticResource CrudDataGridColumnHeaderStyle}" ItemsSource="{Binding Items}" RowHeaderStyle="{StaticResource CrudDataGridRowHeaderStyle}" RowStyle="{StaticResource CrudDataGridRowStyle}" SelectionMode="Single" SelectionUnit="FullRow"> <Da; <DataGridTemplateColumn> <Da; <DataTemplate> <CheckBox IsChecked="{Binding Selected, Mode=TwoWay}" Style="{StaticResource CrudIsSelectedCheckBoxStyle}" /> </DataTemplate> </Da; </DataGridTemplateColumn> <DataGridTextColumn Width="*" Binding="{Binding Name}" Header="姓名" /> <DataGridTextColumn Width="Auto" Binding="{Binding Age}" Header="年齡" /> <DataGridTemplateColumn Width="Auto" Header="編輯"> <Da; <DataTemplate> <Button Style="{StaticResource CrudEditButtonStyle}"> <materialDesign:PackIcon Kind="Edit" /> </Button> </DataTemplate> </Da; </DataGridTemplateColumn> </Da; </DataGrid> </Grid> </Window>場(chǎng)景三：消息界面
編輯彈出框
MaterialDesign編輯界面
相關(guān)代碼：
<Window x:Class="W; xmlns="; xmlns:x="; xmlns:materialDesign="winfx/xaml/themes" xmlns:prism="; xmlns:system="clr-namespace:System;assembly=mscorlib" xmlns:vm="clr-namespace:WpfMaterial.Core.ViewModels" Background="{DynamicResource MaterialDesignPaper}" FontFamily="{DynamicResource MaterialDesignFont}" FontSize="16"> <Window.DataContext> <vm:ListViewViewModel /> <; <Window.Resources> <Style x:Key="CrudIsSelectedCheckBoxStyle" BasedOn="{StaticResource {x:Type CheckBox}}" TargetType="{x:Type CheckBox}"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style x:Key="CrudDataGridColumnHeaderStyle" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" /> <Setter Property="BorderBrush" Value="LightGray" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="IsEnabled" Value="False" /> <Setter Property="Padding" Value="2" /> <Setter Property="Height" Value="30" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" /> </Style> <Style x:Key="CrudDataGridRowHeaderStyle" BasedOn="{StaticResource {x:Type DataGridRowHeader}}" TargetType="{x:Type DataGridRowHeader}"> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Width" Value="0" /> </Style> <Style x:Key="CrudDataGridRowStyle" BasedOn="{StaticResource {x:Type DataGridRow}}" TargetType="{x:Type DataGridRow}"> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="Height" Value="30" /> <S; <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" /> </Trigger> </S; </Style> <Style x:Key="CrudDataGridCellStyle" BasedOn="{StaticResource {x:Type DataGridCell}}" TargetType="{x:Type DataGridCell}"> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" /> <Setter Property="BorderBrush" Value="LightGray" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="Padding" Value="0" /> <S; <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" /> <Setter Property="BorderBrush" Value="LightGray" /> </Trigger> </S; </Style> <Style x:Key="CrudEditButtonStyle" BasedOn="{StaticResource MaterialDesignFlatButton}" TargetType="{x:Type Button}"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="Cursor" Value="Hand" /> <Setter Property="ToolTip" Value="編輯" /> <Setter Property="Content" Value="編輯" /> </Style> <; <materialDesign:DialogHost DialogMargin="8" Style="{StaticResource MaterialDesignEmbeddedDialogHost}"> <materialDesign:DialogHost.DialogContent> <StackPanel Margin="20"> <TextBlock FontSize="20" FontWeight="Bold" Text="添加用戶" /> <TextBox Width="200" Margin="0,8,0,0" HorizontalAlignment="Stretch" materialDesign:HintAssist.Hint="姓名" Style="{StaticResource MaterialDesignFloatingHintTextBox}" /> <TextBox Width="200" Margin="0,8,0,0" HorizontalAlignment="Stretch" materialDesign:HintAssist.Hint="年齡" Style="{StaticResource MaterialDesignFloatingHintTextBox}" /> <StackPanel HorizontalAlignment="Right" Orientation="Horizontal"> <Button Margin="0,8,8,0" Command="materialDesign:DialogHost.CloseDialogCommand" IsDefault="True" Style="{StaticResource MaterialDesignFlatButton}"> <Bu; <system:Boolean xmlns:system="clr-namespace:System;assembly=mscorlib"> True </system:Boolean> </Bu; 確定 </Button> <Button Margin="0,8,8,0" Command="materialDesign:DialogHost.CloseDialogCommand" IsCancel="True" Style="{StaticResource MaterialDesignFlatButton}"> <Bu; <system:Boolean xmlns:system="clr-namespace:System;assembly=mscorlib"> False </system:Boolean> </Bu; 取消 </Button> </StackPanel> </StackPanel> </materialDesign:DialogHost.DialogContent> <Grid> <DataGrid Margin="5" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" CellStyle="{StaticResource CrudDataGridCellStyle}" ColumnHeaderStyle="{StaticResource CrudDataGridColumnHeaderStyle}" ItemsSource="{Binding Items}" RowHeaderStyle="{StaticResource CrudDataGridRowHeaderStyle}" RowStyle="{StaticResource CrudDataGridRowStyle}" SelectionMode="Single" SelectionUnit="FullRow"> <Da; <DataGridTemplateColumn> <Da; <DataTemplate> <CheckBox IsChecked="{Binding Selected, Mode=TwoWay}" Style="{StaticResource CrudIsSelectedCheckBoxStyle}" /> </DataTemplate> </Da; </DataGridTemplateColumn> <DataGridTextColumn Width="*" Binding="{Binding Name}" Header="姓名" /> <DataGridTextColumn Width="Auto" Binding="{Binding Age}" Header="年齡" /> <DataGridTemplateColumn Width="Auto" Header="編輯"> <Da; <DataTemplate> <Button Style="{StaticResource CrudEditButtonStyle}"> <materialDesign:PackIcon Kind="Edit" /> </Button> </DataTemplate> </Da; </DataGridTemplateColumn> </Da; </DataGrid> <Button Margin="0,0,28,20" HorizontalAlignment="Right" VerticalAlignment="Bottom" Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"> <materialDesign:PackIcon Width="22" Height="22" Kind="Plus" /> </Button> </Grid> </materialDesign:DialogHost> </Window>總結(jié)
以上效果有沒有覺得很炫，用MaterialDesign設(shè)計(jì)界面簡(jiǎn)單又美觀，這也是我推薦的原因。
其他顯示效果可以參考Github上的模擬程序：/releases
DemoAp下載
模擬程序主題配色一覽如下：
MaterialDesign主題配色
每天成就一小步，積累下來就是一大步。 轉(zhuǎn)發(fā)本文請(qǐng)注明出處，謝謝您的閱讀與分享！
1.《wpf如何遍歷checkbox、wpf如何遍歷控件?》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識(shí)，僅代表作者本人觀點(diǎn)，與本網(wǎng)站無關(guān)，侵刪請(qǐng)聯(lián)系頁腳下方聯(lián)系方式。
2.《wpf如何遍歷checkbox、wpf如何遍歷控件?》僅供讀者參考，本網(wǎng)站未對(duì)該內(nèi)容進(jìn)行證實(shí)，對(duì)其原創(chuàng)性、真實(shí)性、完整性、及時(shí)性不作任何保證。
3.文章轉(zhuǎn)載時(shí)請(qǐng)保留本站內(nèi)容來源地址，http://f99ss.com/keji/3223778.html