官方文檔
往期回顧
零基礎(chǔ)筆記
WPF 零基礎(chǔ)入門(mén)筆記（0）：WPF簡(jiǎn)介
項(xiàng)目實(shí)戰(zhàn)（已完結(jié)）
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（0）:github 項(xiàng)目Demo運(yùn)行
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（1）首頁(yè)搭建
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（2）首頁(yè)導(dǎo)航欄樣式
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（3）動(dòng)態(tài)側(cè)邊欄
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（4）側(cè)邊欄路由管理
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（5）:設(shè)計(jì)首頁(yè)
WPF MaterialDesign 初學(xué)項(xiàng)目實(shí)戰(zhàn)（6）:設(shè)計(jì)首頁(yè)（2），設(shè)置樣式觸發(fā)器。已完結(jié)
WPF項(xiàng)目創(chuàng)建
我們這里選擇.net core版本的WPF
為什么選net core版本
.NET core是以后.NET 發(fā)展的方向。
.NET core 特點(diǎn)
- 微軟主推的方向，.NET framework目前只有維護(hù)性更新
- 跨平臺(tái)，雖然WPF不能跨平臺(tái)，但是你以后寫(xiě)MAUI，控制臺(tái)程序，WEBAPI，都可以在Linux端運(yùn)行。跨平臺(tái)主要就是跨linux，方便項(xiàng)目部署。
- 配套的生態(tài)都已經(jīng)從NET Framework 遷移過(guò)來(lái)了。
- 你都選擇WPF而不是 winform，那順便多學(xué)一點(diǎn)唄
WPF 靜態(tài)頁(yè)面
如果學(xué)過(guò)web端，我這里就拿Web端來(lái)進(jìn)行比較。
web包含:html,css,JS。
- html：聲明有什么元素
- CSS：讓界面更加好看
- JS：頁(yè)面邏輯代碼
在WPF中，分離會(huì)更加徹底。WPF包含Xmal和C#。
- Xmal：聲明元素，聲明樣式，負(fù)責(zé)交互邏輯
- 對(duì)應(yīng)Web端的 Html+CSS+簡(jiǎn)單頁(yè)面交互
- C#：復(fù)雜頁(yè)面交互和業(yè)務(wù)邏輯
控件我就略過(guò)了，沒(méi)什么好說(shuō)的，就是按鈕，文本，輸入框。參數(shù)自己去了解一下。不占用太多篇幅
比如Button類(lèi)
WPF Button
但是我只能說(shuō)，微軟的文檔寫(xiě)的一坨狗屎，第一我查不到WPF專(zhuān)門(mén)的
WPF 頁(yè)面布局
我之前寫(xiě)過(guò)，就不重復(fù)寫(xiě)了。
WPF：WPF原生布局說(shuō)明
WPF樣式
我們輸入
<Style>
<S //出現(xiàn)提示
</Style>
這里我們可以看到有好幾種樣式
- Style.Setters
- Style樣式：類(lèi)似于CSS，用于設(shè)置頁(yè)面的形象
- Style.Tirggers
- 觸發(fā)器，用于設(shè)置簡(jiǎn)單的交互
- Sytle.Resource
- 資源，沒(méi)怎么用過(guò)
Style樣式
如果安裝CSS的方式來(lái)說(shuō)，WPF分為行內(nèi)樣式和行外樣式
效果，生成如下圖片
行內(nèi)樣式
<Rectangle Width="200"
Height="160"
Stroke="Blue">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">//使用行內(nèi)標(biāo)簽來(lái)對(duì)代碼進(jìn)行優(yōu)化
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.2"
Color="LightBlue" />
<GradientStop Offset="0.7"
Color="DarkBlue" />
<GradientStop Offset="1.0"
Color="LightBlue" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
行外樣式
如果是簡(jiǎn)單樣式，可以這么寫(xiě)
<Style x:Key="MyButton"
TargetType="Button">
<Style.Setters>
<Setter Property="Content"
Value="" />
</Style.Setters>
</Style>
如果是復(fù)雜樣式
<Window.Resources>
<!--x:Key為樣式的名稱(chēng)，TargetType是樣式生效的目標(biāo)-->
<Style x:Key="MyRectFill" TargetType="Rectangle">
<!--Style是樣式設(shè)置-->
<Style.Setters>
<!--設(shè)置Recangle的Fill屬性。使用Property=屬性,Value=值的形式-->
<Setter Property="Fill" >
<Setter.Value><!--對(duì)應(yīng)的樣式屬性，如果Value是簡(jiǎn)單字符串，可以不展開(kāi)-->
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1">
<GradientStop Offset="0.2"
Color="LightBlue" />
<GradientStop Offset="0.7"
Color="DarkBlue" />
<GradientStop Offset="1.0"
Color="LightBlue" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Rectangle Width="200"
Height="160"
Stroke="Blue" Style="{StaticResource MyRectFill}" >
</Rectangle>
</Grid>
WPF樣式繼承
一個(gè)簡(jiǎn)單的按鈕
<Window.Resources>
<Style x:Key="MyButton"
TargetType="Button">
<Style.Setters>
<Setter Property="Content"
Value="按鈕" />
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="30"/>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MyButton}"/>
</Grid>
<Window.Resources>
<Style x:Key="MyButton"
TargetType="Button">
<Style.Setters>
<Setter Property="Content"
Value="按鈕" />
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="30"/>
</Style.Setters>
</Style>
<!--使用繼承，繼承MyButton-->
<Style x:Key="MyButton2" BasedOn="{StaticResource MyButton}" TargetType="Button">
<Style.Setters >
<Setter Property="Background"
Value="Yellow" />
<Setter Property="BorderBrush" Value="Red"/>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MyButton2}"/>
</Grid>
效果
WPF觸發(fā)器
WPF觸發(fā)器用于簡(jiǎn)單的交互邏輯
WPF為了實(shí)現(xiàn)業(yè)務(wù)和界面邏輯盡可能的分離，在Xmal中可以實(shí)現(xiàn)簡(jiǎn)單的交互邏輯和頁(yè)面元素溝通。而簡(jiǎn)單的交互邏輯就是通過(guò)WPF觸發(fā)器來(lái)實(shí)現(xiàn)的
單條件觸發(fā)器
這里設(shè)計(jì)一個(gè)簡(jiǎn)單的觸發(fā)器，通過(guò)鼠標(biāo)懸停事件來(lái)進(jìn)行區(qū)分。
<Window.Resources>
<Style x:Key="MyButton" TargetType="Button">
<!--設(shè)置觸發(fā)器-->
<Style.Triggers>
<!--當(dāng)鼠標(biāo)停留屬性為T(mén)ure時(shí)-->
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground"
Value="Red" />
<Setter Property="FontSize"
Value="30" />
</Trigger>
<!--當(dāng)鼠標(biāo)停留事件為False時(shí)-->
<Trigger Property="IsMouseOver"
Value="False">
<Setter Property="Foreground"
Value="Blue" />
<Setter Property="FontSize"
Value="20" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Width="100"
Height="50"
Content="按鈕"
Style="{StaticResource MyButton}" />
</Grid>
實(shí)現(xiàn)效果文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-507260.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-507260.html
多條件觸發(fā)
<Window.Resources>
<Style x:Key="MyButton" TargetType="Button">
<!--設(shè)置觸發(fā)器-->
<Style.Triggers>
<!--多條件觸發(fā)-->
<MultiTrigger>
<!--當(dāng)鼠標(biāo)懸停+鼠標(biāo)點(diǎn)擊時(shí)，字體顏色變紅-->
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
<Condition Property="IsFocused"
Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Red"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Width="100"
Height="50"
Content="按鈕"
Style="{StaticResource MyButton}" />
</Grid>
到了這里，關(guān)于WPF 零基礎(chǔ)入門(mén)筆記（1）：WPF靜態(tài)頁(yè)面，布局+樣式+觸發(fā)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
