WPF控制元件模板與樣式最方便的修改方法

阿新 • • 發佈：2019-01-16

話就不多說,直接給給個例子

比如要修改工具欄ToolBar的Background,

選擇ToolBar在屬性欄右鍵點Template將值提取到資源(如下圖)

提取到的資源儲存,最好儲存在資源字典裡方便管理.
如提取ToolBar的模板如下

<ControlTemplate x:Key="ToolBarTemplate1" TargetType="ToolBar">
      <Grid Margin="3,1,1,1" Name="Grid" SnapsToDevicePixels="True">
        <Grid HorizontalAlignment="Right" Name="OverflowGrid">
          <ToggleButton ClickMode="Press"
                        FocusVisualStyle="{x:Null}"
                        IsChecked="{Binding Path=IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                        IsEnabled="{TemplateBinding ToolBar.HasOverflowItems}"
                        Name="OverflowButton">
            <ToggleButton.Style>

              <Style TargetType="ToggleButton">
                <Style.Triggers>
                  <DataTrigger Binding="{Binding}" Value="true">
                    <Setter Property="Control.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                  </DataTrigger>
                </Style.Triggers>
    
                <Setter Property="Control.Background" Value="#FFD5DCE8">
    
                  
                </Setter>
                <Setter Property="FrameworkElement.MinHeight" Value="0" />
                <Setter Property="FrameworkElement.MinWidth" Value="0" />
                <Setter Property="Control.Template">
                  <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                      <Border Background="{TemplateBinding Control.Background}"
                              CornerRadius="0,3,3,0" Name="Bd" SnapsToDevicePixels="True">
                        <Canvas Height="7" HorizontalAlignment="Right"
                                Margin="7,2,2,2" SnapsToDevicePixels="True" VerticalAlignment="Bottom" Width="6">
                          <Path Data="M1,1.5L6,1.5" Stroke="White" />
                          <Path Data="M0,0.5L5,0.5" Stroke="{TemplateBinding Control.Foreground}" />
                          <Path Data="M0.5,4L6.5,4 3.5,7z" Fill="White" />
                          <Path Data="M-0.5,3L5.5,3 2.5,6z" Fill="{TemplateBinding Control.Foreground}" />
                        </Canvas>
                      </Border>
                      <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                          <Setter Property="Border.Background" TargetName="Bd" Value="#FFC1D2EE" />
                        </Trigger>
                        <Trigger Property="UIElement.IsKeyboardFocused" Value="True">
                          <Setter Property="Border.Background" TargetName="Bd" Value="#FFC1D2EE" />
                        </Trigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                          <Setter Property="Control.Foreground" Value="#FFC1BEB3" />
                        </Trigger>
                      </ControlTemplate.Triggers>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
              </Style>

            </ToggleButton.Style>
          </ToggleButton>
          <Popup AllowsTransparency="True" Focusable="False" IsOpen="{Binding Path=IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}" Name="OverflowPopup" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" StaysOpen="False">
            <my:SystemDropShadowChrome Color="Transparent" Name="Shdw">
              <Border Background="#FFFCFCF9" BorderBrush="#FF8A867A" BorderThickness="1" Name="ToolBarSubMenuBorder" RenderOptions.ClearTypeHint="Enabled">
                <ToolBarOverflowPanel FocusVisualStyle="{x:Null}" Focusable="True" KeyboardNavigation.DirectionalNavigation="Cycle" KeyboardNavigation.TabNavigation="Cycle" Margin="2" Name="PART_ToolBarOverflowPanel" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" WrapWidth="200" />
              </Border>
            </my:SystemDropShadowChrome>
          </Popup>
        </Grid>
        <Border Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}" Name="MainPanelBorder" Padding="{TemplateBinding Control.Padding}">
          <Border.Style>
            <Style TargetType="Border">
              <Style.Triggers>
                <DataTrigger Binding="{Binding}" Value="true">
                  <Setter Property="Border.CornerRadius" Value="0" />
                </DataTrigger>
              </Style.Triggers>
              <Setter Property="FrameworkElement.Margin" Value="0,0,11,0" />
              <Setter Property="Border.CornerRadius" Value="3" />
            </Style>
          </Border.Style>
          <DockPanel KeyboardNavigation.TabIndex="1" KeyboardNavigation.TabNavigation="Local">
            <Thumb Margin="-3,-1,0,0" Name="ToolBarThumb" Padding="6,5,1,6" Width="10">
              <Thumb.Style>
                <Style TargetType="Thumb">
                  <Setter Property="Control.Template">
                    <Setter.Value>
                      <ControlTemplate TargetType="Thumb">
                        <Border Background="Transparent" Padding="{TemplateBinding Control.Padding}" SnapsToDevicePixels="True">
                          <Rectangle>
                            <Rectangle.Fill>
                              <DrawingBrush TileMode="Tile" Viewbox="0,0,4,4" ViewboxUnits="Absolute" Viewport="0,0,4,4" ViewportUnits="Absolute">
                                <DrawingBrush.Drawing>
                                  <DrawingGroup>
                                    <GeometryDrawing Brush="White" Geometry="M1,1L1,3 3,3 3,1z" />
                                    <GeometryDrawing Brush="#FFC1BEB3" Geometry="M0,0L0,2 2,2 2,0z" />
                                  </DrawingGroup>
                                </DrawingBrush.Drawing>
                              </DrawingBrush>
                            </Rectangle.Fill>
                          </Rectangle>
                        </Border>
                        <ControlTemplate.Triggers>
                          <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="FrameworkElement.Cursor" Value="SizeAll" />
                          </Trigger>
                        </ControlTemplate.Triggers>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </Style>
              </Thumb.Style>
            </Thumb>
            <ContentPresenter Content="{TemplateBinding HeaderedItemsControl.Header}" ContentSource="Header" ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" ContentTemplate="{TemplateBinding HeaderedItemsControl.HeaderTemplate}" HorizontalAlignment="Center" Margin="4,0" Name="ToolBarHeader" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="Center" />
            <ToolBarPanel IsItemsHost="True" Margin="0,1,2,2" Name="PART_ToolBarPanel" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
          </DockPanel>
        </Border>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="ToolBar.IsOverflowOpen" Value="True">
          <Setter Property="UIElement.IsEnabled" TargetName="ToolBarThumb" Value="False" />
        </Trigger>
        <Trigger Property="HeaderedItemsControl.Header" Value="{x:Null}">
          <Setter Property="UIElement.Visibility" TargetName="ToolBarHeader" Value="Collapsed" />
        </Trigger>
        <Trigger Property="ToolBarTray.IsLocked" Value="True">
          <Setter Property="UIElement.Visibility" TargetName="ToolBarThumb" Value="Collapsed" />
        </Trigger>
        <Trigger Property="Popup.HasDropShadow" SourceName="OverflowPopup" Value="True">
          <Setter Property="FrameworkElement.Margin" TargetName="Shdw" Value="0,0,5,5" />
          <Setter Property="UIElement.SnapsToDevicePixels" TargetName="Shdw" Value="True" />
          <Setter Property="my:SystemDropShadowChrome.Color" TargetName="Shdw" Value="#71000000" />
        </Trigger>
        <Trigger Property="ToolBar.Orientation" Value="Vertical">
          <Setter Property="FrameworkElement.Margin" TargetName="Grid" Value="1,3,1,1" />
          <Setter Property="FrameworkElement.Style" TargetName="OverflowButton">
            <Setter.Value>
              <Style TargetType="ToggleButton">
                <Style.Triggers>
                  <DataTrigger Binding="{Binding}" Value="true">
                    <Setter Property="Control.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                  </DataTrigger>
                </Style.Triggers>
    
                <Setter Property="Control.Background" Value="#FFD5DCE8">
    
                
                <Setter Property="FrameworkElement.MinHeight" Value="0" />
                <Setter Property="FrameworkElement.MinWidth" Value="0" />
                <Setter Property="Control.Template">
                  <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                      <Border Background="{TemplateBinding Control.Background}" CornerRadius="0,0,3,3" Name="Bd" SnapsToDevicePixels="True">
                        <Canvas Height="6" HorizontalAlignment="Right" Margin="2,7,2,2" SnapsToDevicePixels="True" VerticalAlignment="Bottom" Width="7">
                          <Path Data="M1.5,1L1.5,6" Stroke="White" />
                          <Path Data="M0.5,0L0.5,5" Stroke="{TemplateBinding Control.Foreground}" />
                          <Path Data="M3.5,0.5L7,3.5 4,6.5z" Fill="White" />
                          <Path Data="M3,-0.5L6,2.5 3,5.5z" Fill="{TemplateBinding Control.Foreground}" />
                        </Canvas>
                      </Border>
                      <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                          <Setter Property="Border.Background" TargetName="Bd" Value="#FFC1D2EE" />
                        </Trigger>
                        <Trigger Property="UIElement.IsKeyboardFocused" Value="True">
                          <Setter Property="Border.Background" TargetName="Bd" Value="#FFC1D2EE" />
                        </Trigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                          <Setter Property="Control.Foreground" Value="#FFC1BEB3" />
                        </Trigger>
                      </ControlTemplate.Triggers>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
              </Style>
            </Setter.Value>
          </Setter>
          <Setter Property="FrameworkElement.Height" TargetName="ToolBarThumb" Value="10" />
          <Setter Property="FrameworkElement.Width" TargetName="ToolBarThumb" Value="Auto" />
          <Setter Property="FrameworkElement.Margin" TargetName="ToolBarThumb" Value="-1,-3,0,0" />
          <Setter Property="Control.Padding" TargetName="ToolBarThumb" Value="5,6,6,1" />
          <Setter Property="FrameworkElement.Margin" TargetName="ToolBarHeader" Value="0,0,0,4" />
          <Setter Property="FrameworkElement.Margin" TargetName="PART_ToolBarPanel" Value="1,0,2,2" />
          <Setter Property="DockPanel.Dock" TargetName="ToolBarThumb" Value="Top" />
          <Setter Property="DockPanel.Dock" TargetName="ToolBarHeader" Value="Top" />
          <Setter Property="FrameworkElement.HorizontalAlignment" TargetName="OverflowGrid" Value="Stretch" />
          <Setter Property="FrameworkElement.VerticalAlignment" TargetName="OverflowGrid" Value="Bottom" />
          <Setter Property="Popup.Placement" TargetName="OverflowPopup" Value="Right" />
          <Setter Property="FrameworkElement.Margin" TargetName="MainPanelBorder" Value="0,0,0,11" />
          <Setter Property="Control.Background">
            <Setter.Value>
              <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                <GradientStop Color="#FFFAF9F5" Offset="0" />
                <GradientStop Color="#FFEBE7E0" Offset="0.5" />
                <GradientStop Color="#FFC0C0A8" Offset="0.9" />
                <GradientStop Color="#FFA3A37C" Offset="1" />
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
        </Trigger>
        <Trigger Property="UIElement.IsEnabled" Value="False">
          <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

修改後ToolBar的樣式(呵呵,跟VS的工具欄一樣)

這樣右邊ToggleButton的Background就改不了(不知高人有何簡單的方法)

<Style TargetType="ToolBar">
          <Setter Property="Background" Value="#FFD5DCE8"/>
</<Style>

使用提取模板與樣式,可以很方便修改裡面的Style與Trigger,還可學習MS的寫法.

WPF控制元件模板與樣式最方便的修改方法

話就不多說,直接給給個例子比如要修改工具欄ToolBar的Background, 選擇ToolBar在屬性欄右鍵點Template將值提取到資源(如下圖) 提取到的資源儲存,最好儲存在資源字典裡方便管理. 如提取ToolBar的模板如下 <ControlTempl

MFC對話方塊修改背景顏色或新增背景圖片、控制元件背景與字型顏色的修改

MFC對話方塊修改背景顏色：在CXXXDlg::OnInitDialog()中新增： CDialogEx::SetBackgroundColor(RGB(155,170,190)); 效果如

【轉】WPF自定義控制元件與樣式(5)-Calendar/DatePicker日期控制元件自定義樣式及擴充套件

一．前言　　申明：WPF自定義控制元件與樣式是一個系列文章，前後是有些關聯的，但大多是按照由簡到繁的順序逐步釋出的等。本文主要內容：日曆控制元件Calendar自定義樣式；日期控制元件DatePicker自定義樣式，及Label標籤、水印、清除日期功能擴充套件；二．Calend

【轉】WPF自定義控制元件與樣式(9)-樹控制元件TreeView與選單Menu-ContextMenu

一．前言　　申明：WPF自定義控制元件與樣式是一個系列文章，前後是有些關聯的，但大多是按照由簡到繁的順序逐步釋出的等。　　本文主要內容：選單Menu的自定義樣式；右鍵選單ContextMenu的自定義樣式；樹控制元件TreeView的自定義樣式，及右鍵選單實現。二．選單M

純前端表格控制元件SpreadJS與Java結合，實現模板上傳和下載等功能

安裝部署: 開發環境：後臺伺服器端採用 Java 、SpringMVC。資料儲存到 \demo_web\WEB-INF\FileDatabase.txt 檔案中，不需要依賴DB。採用 Eclipse Java EE IDE for Web Develope

WPF控制元件（Control類：顏色與字型）

WPF控制元件分類：內容控制元件標題內容控制元件文字控制元件列表控制元件基於範圍的控制元件日期控制元件控制元件類控制元件是與使用者互動的元素。控制元件可以獲得焦點，能接受鍵盤或滑鼠的輸入。所有控制元件的基類是System.Wi

WPF學習（17）-控制元件模板

在我們構建程式外觀的時候，總會出於美觀或者業務邏輯的需求，需要定製更加酷炫或者複雜的控制元件，樣式，已經允許我們更改控制元件或者元素的外觀了，但是有一個問題，如果我們需要更大範圍的更改，比如一個按鈕，可以通過樣式修改背景，前景，圓角，甚至特殊幾

WPF 學習之控制元件模板 ControlTemplate Triggers

控制元件模板ControlTemplate，有兩部分：VistualTree視覺樹，即是能看到的外觀；Trigger觸發器，裡面包括外部條件達到某一條件下會引起的響應。 <Window.Resources> <ControlTemplate x:Key="ButtonT

WPF:動態載入控制元件並設定樣式

這個問題想了一下午，網上查找了一些資料。終於解決了。拿出來晒一下，希望能夠幫助到你們。下面這個例子是動態新增的TextBlock控制元件，面板是StackPanel，如下： TextBlock tb = (TextBlock)XamlToObj("<TextBl

WPF Button控制元件模板

<Window x:Class="ControlTemplateDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmln

WPF模板(一)：控制元件模板、資料模板、面板模板

模板使用方式：首先定義模板，然後在把對應的key應用到控制元件對應的屬性中；屬性對應：控制元件模板，對應控制元件的Template；資料模板，對應控制元件的ItemTemplate屬性；面板模板，對應控制元件的ItemsPanel屬性。控制元件模板：如果控制元件的

【WPF學習】第五十九章理解控制元件模板

　　最近工作比較忙，未能及時更新內容，敬請了解！！！　　對於視覺化樹的分析引出了幾個有趣問題。例如，控制元件如何從邏輯樹表示擴張成視覺化樹表示？　　每個控制元件都有一個內建的方法，用於確定如何渲染控制元件（作為一組更基礎的元素）。該方法稱為控制元件模板(control template),是用XAML標記

【WPF學習】第六十章建立控制元件模板

　　經過數十天的忙碌，今天終於有時間寫部落格。　　前面一章通過介紹有關模板工作方式相關的內容，同時介紹了FrameWorkElement下所有控制元件的模板。接下來將介紹如何構建一個簡單的自定義按鈕，並在該過程中學習有關控制元件模板的一些細節。　　通過上一章內容，基本Button控制元件使用ButtonC

控制元件TextView與EditText的簡單運用

文字框(TextView) 簡介 TextView直接繼承View，作用就是在介面上顯示文字(類似於Swing中的JLabel)，同時它還是EditText、Button兩個UI元件類的父類。另外Android關閉了它的文字編輯功能，如果想編輯內容，則可以使用EditText。

duilib CWebBrowser控制元件 cxx與js互動

轉自：http://blog.csdn.net/sunflover454/article/details/60873557（侵刪） C++和js相互呼叫是個有意思的事情。一、js中呼叫C++函式。函式原型 [html] view plain

WPF 控制元件獲取焦點後有個虛框。怎麼取消掉

剛用WPF對他可謂是一臉懵逼。後來百度查些資料發現。當一個容器裡面有一個或多個可以獲得焦點的控制元件時候，我們按tab鍵那些控制元件就會依次獲得焦點，獲得了焦點的控制元件就會呈現出一種特殊的外觀，預設為我們看到的虛線，也可以修改成其他的外觀，背景色，前景色，邊框等屬性都可以在獲得焦點後發生改變，失去焦點後

wpf控制元件設計時支援(3)

原文: wpf控制元件設計時支援(3) wpf設計時除錯編輯模型裝飾器 1.wpf設計時除錯為了更好的瞭解wpf設計時框架,那麼除錯則非常重要,通過以下配置可以除錯控制元件的設計時程式碼 (1)將啟動專案配置成外部的visua

wpf控制元件設計時支援(1)

原文: wpf控制元件設計時支援(1) 這部分內容幾乎是大家忽略的內容,我想還是來介紹一下. 本篇原始碼下載 1.屬性元資料在vs IDE中,在asp.net,winfrom等開發環境下,右側的PropertyGrid屬性面板,會對屬性進行分類,這有利於瞭解控制元件屬

wpf控制元件設計時支援(2)

原文: wpf控制元件設計時支援(2) 這篇介紹在wpf設計時集合項屬性新增項的定義和自定義控制元件右鍵選單的方法集合項屬性設計時支援 1.為集合屬性設計器識別具體項型別 wpf設計器允許定義集合項的型別,如新發布的WPF的DataGrid控制元件,其中的Columns包括一下幾種型

wpf控制元件

控制元件——載應用程式上與使用者進行互動的元素所有的控制元件都是繼承自System.windows.Control類，該類提供了一些基本的屬性 1、設定控制元件對齊方式 2、設定Tab鍵順序 3、支援繪製背景，前景和邊框