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
純前端表格控制元件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、 支援繪製背景,前景和邊框