2. 程式人生 > >WPF DataGrid 控制元件（自定義樣式篇）

WPF DataGrid 控制元件（自定義樣式篇）

阿新 • • 發佈：2019-02-11

   在《WPF 4 DataGrid 控制元件（基本功能篇）》中我們已經學習了DataGrid 的基本功能及使用方法。本篇將繼續介紹自定義DataGrid 樣式的相關內容，其中將涉及到ColumnHeader、RowHeader、Row、Cell 的各種樣式設定。

ColumnHeaderStyle 屬性

     一般來講列表頭是使用者首先注意的內容，那麼如何在DataGrid 中設計一個美觀的表頭呢。我們既可以在<DataGrid>中通過<DataGrid.ColumnHeaderStyle>來全域性定義；也可以針對個別列在<DataGrid.Columns>中通過<DataGridColumn.HeaderStyle>定義。

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
            SelectionUnit="CellOrRowHeader" IsReadOnly="True">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Background">
                <
 
Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Yellow" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1"/>
                    </
 
LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="13" />
        </Style>
    </DataGrid.ColumnHeaderStyle>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}">
            <DataGridColumn.HeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="SkyBlue" Offset="0.5"/>
                                <GradientStop Color="White" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontSize" Value="13"/>
                    <Setter Property="Width" Value="80"/>
<Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="ToolTip" Value="Sort by Column"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGridColumn.HeaderStyle>
        </DataGridTextColumn>
                
        <DataGridTextColumn Header="Age" Binding="{Binding Age}">
            <DataGridColumn.HeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="LightGreen" Offset="0.5"/>
                                <GradientStop Color="White" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontSize" Value="13"/>
                    <Setter Property="Width" Value="50"/>
                </Style>
            </DataGridColumn.HeaderStyle>
        </DataGridTextColumn>

        <DataGridComboBoxColumn Header="Sex" 
                                SelectedItemBinding="{Binding Sex}" 
                                ItemsSource="{Binding Source={StaticResource sexEnum}}">
            <DataGridColumn.HeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="LightPink" Offset="0.5"/>
                                <GradientStop Color="White" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontSize" Value="13"/>
                    <Setter Property="Width" Value="70"/>
                </Style>
            </DataGridColumn.HeaderStyle>
        </DataGridComboBoxColumn>
                
        <DataGridCheckBoxColumn Header="Pass Exam?" Width="100" 
                                Binding="{Binding Pass}"/>
                
        <DataGridHyperlinkColumn Header="Email" Width="150" 
                                 Binding="{Binding Email}"/>
    </DataGrid.Columns>
</DataGrid>

     其效果如下圖所示，Name、Age、Sex 列會按各自的樣式顯示。未定義樣式的Pass Exam 和Email 列將按<DataGrid.ColumnHeaderStyle>全域性定義顯示，並且當滑鼠移置到這兩列上方時會有“Sort by Column”提示資訊。

ColumnHeaderStyle

RowHeaderStyle 屬性

     列表頭介紹完了下面再來看看行表頭，其定義方式與列表頭相同，直接在<DataGrid>中加入<DataGrid.RowHeaderStyle>進行全域性定義，見如下程式碼：

... ...
<DataGrid.RowHeaderStyle>
    <Style TargetType="DataGridRowHeader">
        <Setter Property="Content" Value=" ·¤"/>
        <Setter Property="Width" Value="10"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="SkyBlue" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="ToolTip" Value="Select this Row"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowHeaderStyle>
... ...

效果圖：

RowHeaderStyle

RowStyle 屬性

     接下來我們來為行設定樣式，使每行的顏色變為藍色，並且當滑鼠移至行上方時，其背景顏色會變為灰色，文字顏色變為白色。

... ...
<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Setter Property="Background" Value="LightBlue" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>
... ...

效果圖：

RowStyle

CellStyle 屬性

     單元格部分我們繼續製作一個動態樣式，當滑鼠點選單元格後，其背景色將變為綠色。

... ...
<DataGrid.CellStyle>
    <Style TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="SeaGreen"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.CellStyle>
... ...

效果圖：

CellStyle

相關推薦

WPF DataGrid 控制元件（自定義樣式篇）

   在《WPF 4 DataGrid 控制元件（基本功能篇）》中我們已經學習了DataGrid 的基本功能及使用方法。本篇將繼續介紹自定義DataGrid 樣式的相關內容，其中將涉及到ColumnHeader、RowHeader、Row、Cell 的各種樣式設定。 ColumnHeaderStyle

html檔案上傳控制元件file自定義樣式

問題： HTML自帶的file上傳按鈕因在各種瀏覽器裡顯示樣式不一、不易自定義樣式給我們帶來很大的麻煩。 解決思路： 將input[type=file]控制元件隱藏，使用一個input[type=text]和button組合作為file控制元件的替代（樣式自行定義），並將

JSP頁面使用富文字控制元件ckeditor自定義樣式

  找到ckeditor目錄下的ckeditor.js，修改其中的內容，向裡面新增自己的設定 CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration

【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框

Html程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

Android ListView的應用（如何去實現ListView控制元件（自定義介面卡））

稀稀拉拉學了有快1年的Android了，但是依然跟剛入門的小白一樣，用到啥學啥，上網查別人的程式碼，然後複製貼上過去，最後什麼都沒學到，現在是深有體會，我希望記錄一些知識點，踏踏實實的走好每一步，希望剛入門的小白能用到。首先Android Studio中有許多系統自帶的空間，

android自定義控制元件_完全自定義控制元件（自定義開關）

前面總結到自定義控制元件分為 組合控制元件 繼承已有控制元件 比如自定義SmartImageView繼承ImageView 完全自定義控制元件 上一篇寫了自定義控制元件的自定義屬性深入理解點選連結檢視，是自定控制元件比較難以理解的地方，但是是很重

JavaFX UI控制元件教程（二十八）之UI控制元件的自定義

翻譯自  Customization of UI Controls 本章介紹了UI控制元件自定義的各個方面，並總結了Oracle提供的一些提示和技巧，以幫助您修改UI控制元件的外觀和行為。 您可以通過應用層疊樣式表（CSS），重新定義預設行為和使用單元工廠來學習如何從UI

UIPickerView控制元件中自定義顯示的字型大小及樣式

//重寫方法 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIVi

自定義時間選擇控制元件（仿ios滾動效果）

1.先上自定義的控制元件： /** * 滾輪選擇器 * author LH * data 2016/8/20 17:26 */ public class WheelView extends View { public static final String

[WPF自定義控制元件庫] 自定義控制元件的程式碼如何與ControlTemplate互動

1. 前言 WPF有一個靈活的UI框架，使用者可以輕鬆地使用程式碼控制控制元件的外觀。例設我需要一個控制元件在滑鼠進入的時候背景變成藍色，我可以用下面這段程式碼實現： protected override void OnMouseEnter(MouseEventArgs e) { base.OnMou

[WPF自定義控制元件庫]自定義Expander

1. 前言 上一篇文章介紹了使用Resizer實現Expander簡單的動畫效果，執行效果也還好，不過只有展開/摺疊而缺少了淡入/淡出的動畫(畢竟Resizer模仿Expander只是附帶的功能)。這篇繼續Measure的話題，自定義了一個帶有動畫的ExtendedExpander。 2. ExtendedE

C# WPF 歌詞控制元件（支援逐字定位描色效果）

原文: C# WPF 歌詞控制元件（支援逐字定位描色效果） 之前做了一個模仿網易雲歌詞的控制元件，實現了載入網易雲歌詞並能隨音樂播放進度定位歌詞。今天呢將在這個控制元件的基礎上增加逐字定位描色功能，如下圖效果（QQ音樂PC）所示：   我所使用的實現方法很簡單粗暴，把每句歌詞每個字切開，單

[Android自定義控制元件] Android自定義控制元件

轉載自： http://blog.163.com/[email protected]/blog/static/103242241201382210910473/ 開發自定義控制元件的步驟: 1、瞭解View的工作原理  2、

echart.js控制元件畫圖自定義tooltip

function makeSelfTooltip(_options){     _options = $.extend(_options, {         'tooltip': {       &

C#為ComboBox等陣列型控制元件設定自定義資料

ComboBox、ListBox、CheckedListBox等列表型控制元件，可以單獨為每個Item設定顯示文字和資料。 為此，我們定義一個類，來實現這個Item的文字顯示和資料關聯： public class ListComponentItem { p

自定義FlowLayout控制元件實現自定義寬度並換行

最近的需求是實現新增購物車頁面，展示規格的時候會出現顯示不全，資料會自動剪下掉，後邊重新自定義了FlowLayout問題得到解決，下面直接上程式碼 public class FlowLayoutView extends ViewGroup { private final int DE

$emit( ) 觸發元件（自定義元素）當前例項的事件

$emit(event, args ) 引數： event：事件名 args：事件相關引數 用法： 觸發當前例項上的事件。附加引數都會傳給監聽器回撥。 在元件模板中，不能直接通過 v-on 繫結觸發 vue 例項中的方法，而需要先使用$emit( ) 繫結自

MD控制元件之自定義behavior

首先這裡介紹系統自帶的behavior中的一些方法 /** * 表示是否給應用了Behavior 的View 指定一個依賴的佈局，通常，當依賴的View 佈局發生變化時 * 不管被被依賴View 的順序怎樣，被依賴的View也會重新佈局

【安卓自定義控制元件】自定義ViewGroup實現透明背景的ViewPager效果

HelloWorld! 作為一名屌絲程式設計師，在部落格園寫第一篇技術部落格內心是無比激動滴，其實作為一名忙成狗的Android開發人員，一直覺得自己永遠都不會有時間去寫部落格， 因為我TM連找女朋友的時間都沒用== 言歸正傳，今天自定義控制元件系列要實現的效果是自定義Vi

自定義dorado控制元件之自定義繼承自DataTreeGrid的行政區劃樹列表控制元件

這篇文章是基於已經實現了一個springBoot+mybatis+mysql的行政區劃後臺程式碼後在寫一個dorado控制元件的，具體程式碼之後會上傳到部落格。程式碼包為folivora-sysAdminDivisions。不貼出springBoot+mybaties+mysql實現部分原因