WPF控制項模板

2022-01-06 CSharp編程大全

 引言:在進行WPF項目開發過程中,由於項目的需要,經常要對某個控制項進行特殊的設定,其中就牽涉到模板的相關方面的內容。本文也是在自己進行項目開發過程中遇到控制項模板設定時集中搜集資料後整理出來的,以供在以後的項目開發過程中查閱。WPF有控制項模板和數據模板,從字面上來看,控制項模板主要是用來改變控制項的外觀,數據模板則定義控制項中數據的表現方式。下面讓逐一進行介紹。

 

控制項模板ControlTemplate,有兩部分:VistualTree視覺樹,即是能看到的外觀;Trigger觸發器,裡面包括外部條件達到某一條件下會引起的響應。

參考代碼:

<Button Content="Button" Grid.Row="1" Height="136" HorizontalAlignment="Left" Margin="114,80,0,0" Name="button1" VerticalAlignment="Top" Width="205" >            <Button.Template >                <ControlTemplate >                    <Grid >                        <Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/>                        <TextBlock Name="txtBlock"  />                    </Grid >                    <ControlTemplate.Triggers >                        <Trigger Property="Button.IsMouseOver" Value="True">                            <Setter Property="Button.Background" Value="blue"/>                        </Trigger >                    </ControlTemplate.Triggers >                </ControlTemplate >            </Button.Template >        </Button >

 在上面的前臺代碼中,包含button控制項的視覺樹和觸發器。Grid部分是改變button控制項的視覺樹部分,意思是將button控制項顯示部分橢圓,而背景色是控制項的原本色調;Triggers部分是當有滑鼠在button控制項上面是控制項的背景色變為藍色。

 

為了便於多次利用,可以將其寫入模板中,如下:

<Window.Resources >        <ControlTemplate x:Key="buttonTemplate" TargetType="Button" >            <Grid >                <Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/>                <TextBlock Name="txtBlock"  />            </Grid >            <ControlTemplate.Triggers >                <Trigger Property="Button.IsMouseOver" Value="True">                    <Setter Property="Button.Background" Value="blue"/>                </Trigger >            </ControlTemplate.Triggers >        </ControlTemplate >    </Window.Resources >

調用時:

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="216,224,0,0" Name="button3"  Width="75" Template="{StaticResource buttonTemplate}"/>

 

 

DataTemplate模板:

參考代碼:

<ListBox Height="202" HorizontalAlignment="Left" Margin="21,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="384" >            <ListBox.ItemTemplate >                <DataTemplate >                    <StackPanel Orientation="Horizontal" >                        <TextBox Width="60" Text="{Binding Path=Name}"/>                        <TextBox Width="60" Text="{Binding Path=ID}"/>                        <TextBox Width="60" Text="{Binding Path=Age}"/>                    </StackPanel >                </DataTemplate >            </ListBox.ItemTemplate >        </ListBox >

上例是將listbox作為實例來做展示,在一個listbox控制項中為了顯示多行和多列數據,使用ItemTemplate進行構造。

 

 

 

WPF中的style:style,樣式風格的意思,簡單來說就是對屬性值的批處理,在實際使用過程中幫助非常大。

參考代碼:

<Window.Resources >        <ResourceDictionary >            <Style x:Key="dgButton" TargetType="Button" >                <Setter Property="Background" Value="Blue" />                <Setter Property="FontSize" Value="20"/>            </Style >            <Style x:Key="cb" TargetType="CheckBox" >                <Style.Triggers >                    <Trigger Property="IsChecked" Value="True">                        <Setter Property="FontSize" Value=" 40"/>                        <Setter Property="Foreground" Value="Red" />                    </Trigger >                </Style.Triggers >            </Style >        </ResourceDictionary >    </Window.Resources >

調用方式:

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="216,224,0,0" Name="button3" VerticalAlignment="Top" Width="75" Style ="{StaticResource dgbutton}"/><CheckBox Content="CheckBox" Height="58" HorizontalAlignment="Left" Margin="654,16,0,0" Name="checkBox1" VerticalAlignment="Top" Width="175" Style="{StaticResource cb}" Grid.Row="1" />

 

上述代碼有兩個組成部分:

1 設置button的的背景色和字體大小,說到底也是對button的屬性進行批量處理。當然在實際使用button控制項時也可單獨使用,此處只是便於處理。

2 設置checkbox的觸發器,當對check進行選擇是,字體和背景色都會做出改變。

 

總結:在項目開發過程中,經常使用的也就是這些了,如果有更為特殊需求,那就需要另外尋求方案處理了。

相關焦點

  • MFC,QT與WinForm,WPF簡介
    另外你可能可能聽說過STL(standard template library),標準模板庫相當於把數據結構及對數據的操作(算法)這些常用的東東都做好給你調用,相當於把數據結構和算法那些思想實現成通用的代碼供你調用.
  • WPF 對控制項截圖
    突然需要一個Logo,找又找不到,就自己做嘍,首先想到的是ps,簡單方便,轉念一想,w
  • WPF的內容控制項使用
    RadioButton:可以用自定義的分組,用屬性:GroupName也可以將其放在同一個父元素中,實現分組。frame: 類似於HTML中的Frame,它有屬性:content,Source但是由於frame不支持子元素,必須顯示的實現content, ....Source屬性可以設置連結的URL兩者的優先級是,content高於source。
  • 你知道WPF與WinForms的區別嗎?
    在很大程度上,WinForms允許開發人員在Windows窗體上拖放控制項,並允許開發人員使用可以具有C#,VB.NET或任何其他.NET語言的代碼隱藏文件來操縱這些控制項。每個WinForms控制項都是一個類的實例,因為WinForms作為具有一組C++類的包裝器存在。Microsoft的Visual Studio使WinForms的開發更容易,因為開發人員可以輕鬆地從工具箱中拖放控制項。
  • 有多少人了解WPF?
    2.數據綁定筆者以前開發WinForm的時候,顯示數據需要我們給控制項賦值,更新的時候又要去賦值,存數據時需要我們去控制項獲取值,非常麻煩。WPF從根本上解決了這個問題。它提供了一個數據綁定引擎自動來幹這件事。此引擎的核心是Binding類。它的作用就是將控制項綁定到數據對象上。
  • 【譯】Visual Studio 2019 中 WPF & UWP 的 XAML 開發工具新特性
    XAML設計器建議的操作(v16.5預覽):在此版本中,我們提供了一個名為「建議的操作」的新預覽功能,當在 XAML 設計器中選擇控制項時,可以輕鬆訪問常用屬性。要使用此功能,請先通過「選項」>「預覽功能」>「 XAML建議的操作」將其啟用。啟用後,請單擊受支持的控制項,然後使用燈泡展開並與「建議操作」用戶界面進行交互。
  • 【Excel模板】送你一個小工具,輸入日期的好幫手-日期選擇控制項
    今天送大家一個小工具,可以幫助你快速輸入日期。
  • C# WPF項目實戰
    重要的知識點本篇內容基於CM框架編寫,涉及以下知識點:① CM框架下一個控制項附加多個事件:cal:Message.Attach="[Event MouseRightButtonDown]=[datagrid_MouseRightButtonDown($source,$eventArgs)];
  • LabVIEW中結構體控制項編程實例
    另外,在結構體控制項中,包含的元素必須同時都是輸入控制項或同時是顯示控制項。由於結構體控制項把數據類型不同,但邏輯相關的多個控制項封裝在了一起,因此,在編程中使用結構體控制項的好處是操作更方便,條理更清晰,特別是在編寫子VI程序時,如果使用結構體控制項作為輸入輸出參數的話,則可以在一個數據埠上傳遞多個不同的參數,可以大大減少連線及埠的數量。
  • C# WPF 嵌入網頁版WebGL油田三維可視化監控
    因為我們的三維管理是基於網頁的WebGL開發出來的,所以我想,尋找的方向是在WPF中找是否有類似瀏覽器的控制項。經過查找找到了,就是WebBrowser 控制項,大致使用如下,<WebBrowser x:Name="WebBrowser1" Source ="xxx.com"></WebBrowser>然而不幸的是,該控制項確實可以顯示網頁,但是不支持WebGL。開始以為是因為使用了IE內核的原因,後來切換到chrome的內核,發現還是不行。
  • SpreadJS 純前端表格控制項應用案例:風險指標補錄系統
    系統統一了管理模板的設計和制定,基於SpreadJS構建了填報模板的設計模塊,允許用戶在線填報表單,並在模板中直接指定指標入庫的位置、數據校驗規則和權限管控。 項目架構圖 模板設計完成好後將模板保存起來,填報人員登錄系統後便可以通過臺帳功能加載模板,並在線填報。
  • 解讀WPF中的Xaml
    1.Overview這篇文章主要分享從原始碼角度解讀wpf中xaml。
  • WPF快速入門系列(1)——WPF布局概覽
    眾所周知,在實現桌面應用程式之前,第一步必然是對窗體進行布局,WPF為了更好地實現布局,提供了很多布局控制項,下面就讓我們一起去看看WPF布局組件。三、WPF布局詳解  WPF的布局控制項都繼承於System.Windows.Controls.Panel這個類,本文主要介紹在Panel基類下的幾個常用的布局控制項。
  • SpreadJS 純前端表格控制項應用案例:某計量檢測雲平臺
    項目截圖SpreadJS主要應用於某計量檢測雲平臺中的模板管理和證書管理模塊開發,如:在模板管理模塊首頁,提供了已有證書模板的查詢列表展示、添加新證書模板、編輯或設計已有證書模板的功能按鈕。表格技術帶來的價值(選擇表格控制項SpreadJS的主要原因)1.設計精度大幅提升計量檢測行業對於檢定證書精確度的要求十分嚴謹,需要證書欄位不能有絲毫的偏差,利用純前端表格控制項SpreadJS,鯨控儀器實現了基於單元格級別的設計精度,使得在線設計證書模板
  • 《深入淺出WPF》學習筆記之深入淺出話Binding
    除了對象作為數據源外,還可以有很多選擇,控制項自己或自己的容器或子集元素、集合作為ItemsControl的數據源、XML作為TreeView或Menu的數據源、把多個控制項關聯到一個「數據制高點」上、甚至乾脆不給Binding指定數據源,讓它自己去找 6.3.1 把控制項作為Binding源與Binding標記拓展  大多數情況下Binding
  • SpreadJS 純前端表格控制項應用案例:貨運代理客戶服務平臺
    三、項目背景 過去,物流公司的財務人員在面對數據獲取、模板管理、對帳、提交等財務結算的工作時,經常通過手工製作模板,從各個系統中複製數據,再填充到對應客戶公司的模板裡。這樣的操作過程,對財務人員來說,既耗費了大量時間和精力,又會在切換系統、對齊數據、來回郵寄時,造成誤操作和人為疏漏。
  • Excel 控制項【窗體控制項】和【ActiveX控制項】使用基礎教程
    excel 控制項有兩種,分別是【窗體控制項】和【ActiveX控制項】。兩種控制項做出相同的效果,但它倆也有很多不同的地方。  Excel 控制項是放置於窗體上的一些圖形對象,可用來顯示或輸入數據、執行操作或使窗體更易於閱讀。這些對象包括文本框、列表框、選項按鈕、命令按鈕及其他一些對象。控制項提供給用戶一些可供選擇的選項,或是某些按鈕,單擊後可運行宏程序。
  • 純前端表格控制項SpreadJS以專注業務、提升效率贏得用戶與市場
    在這種混亂中,一種減少重複工作,提升效率的工具——控制項,悄然興起。創建控制項的最大意義在於封裝重複的工作,其次是可以擴充現有控制項的功能。通俗的來說,控制項就如同帶有魔法的積木一樣,只需要拿起來堆堆疊疊,就可以做出一輛小車、幾棵植物,建起一座城池。
  • 【案例分享】在 React 框架中使用 SpreadJS 純前端表格控制項
    本期葡萄城公開課,將由國電聯合動力技術有限公司,資深前端開發工程師——李林慧女士,與大家在線分享「在 React 框架中使用 SpreadJS 純前端表格控制項」的實戰開發經驗。 在採購SpreadJS 純前端表格控制項之前,公司使用excel進行數據匯總,無法保證各部門的數據流通及時、共享。在經過技術調研後,決定使用SpreadJS(該控制項的功能、布局和操作均接近原生Excel)開發業務流程管理系統。
  • WPF漂亮界面框架實現原理分析及源碼分享
    樹使用TreeView,空白顯示區域的父控制項是DockPanel。那麼,該框架實現的核心就是將NavigationNode的集合轉換成TreeViewNode集合,當點擊TreeViewNode時,能夠將其對應的用戶控制項加載。界面框架的XAML如下所示。