【原】WPF控件模板与样式最方便的修改方法

话就不多说,直接给给个例子

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

选择ToolBar在属性栏右键点Template将值提取到资源(如下图)

View Code

<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的写法.