1. 程式人生 > >WPF控制元件模板與樣式最方便的修改方法

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

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

比如要修改工具欄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 Property="Control.Background">
      <Setter.Value>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                      <GradientStop Color="#FFEFEEEB" Offset="0" />
                      <GradientStop Color="#FFE1E1DA" Offset="0.5" />
                      <GradientStop Color="#FF98987E" Offset="1" />
                    </LinearGradientBrush>
                  </Setter.Value>-->
                </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="Control.Background">
                  <Setter.Value>
                    <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                      <GradientStop Color="#FFEFEEEB" Offset="0" />
                      <GradientStop Color="#FFE1E1DA" Offset="0.5" />
                      <GradientStop Color="#FF98987E" Offset="1" />
                    </LinearGradientBrush>
                  </Setter.Value>
                </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,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

純前端表格控制元件SpreadJSJava結合,實現模板上傳和下載等功能

安裝部署: 開發環境: 後臺伺服器端採用 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

控制元件TextViewEditText的簡單運用

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

duilib CWebBrowser控制元件 cxxjs互動

轉自: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、 支援繪製背景,前景和邊框