1. 在style中使用trigger无效的场景
原因是直接在对象上设置值将导致style中的值无效,去掉TextBlock对象的Foreground后,Trigger将正常工作
<TextBlock Text="AAA" Foreground="Black" > <TextBlock.Style> <Style TargetType="TextBlock"> <Setter Property="Foreground" Value="Orange"></Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Foreground" Value="Red"></Setter> </Trigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock>
2.ControlTemplate 的Trigger
假如有以下需求:
1.需要自定义一个IconButton,他有两个主要依赖属性:Icon和Header,属性类型为Object
2.鼠标滑过IconButton时,可以修改背景色和前景色
代码:
<!--使用了Object和MouseOverObject两个对象,是为了处理图片的切换,比如美工针对鼠标进入和离开两种场景提供了两张图片,Header也类似,以及其他场景,如下:-->
<localControls:IconButton Height="100" Width="200" HeaderWidth="*" Icon="MMM" MouseOverForeground="White" MouseOverBackground="Black"> <localControls:IconButton.Header> <Border> <TextBlock Text="asdfasdf"></TextBlock> </Border> </localControls:IconButton.Header> <localControls:IconButton.MouseOverHeader> <TextBlock Foreground="Orange" Text="MouseONver"></TextBlock> </localControls:IconButton.MouseOverHeader> </localControls:IconButton>
<Style x:Key="IconButtonStyle" TargetType="{x:Type localControls:IconButton}">
<!--Foreground这个属性,如果直接在IconButton对象上设置Foreground默认值,将导致Trigger无效,所以添加了NormalForeground--> <Setter Property="NormalBackground" Value="Gray"></Setter> <Setter Property="NormalForeground" Value="Black"></Setter> <Setter Property="MouseOverBackground" Value="{Binding NormalBackground, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="MouseOverForeground" Value="{Binding NormalForeground, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="MouseOverIcon" Value="{Binding Icon, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="MouseOverHeader" Value="{Binding Header, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="DisabledBackground" Value="{Binding NormalBackground, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="DisabledForeground" Value="{Binding NormalForeground, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="DisabledIcon" Value="{Binding Icon, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="DisabledHeader" Value="{Binding Header, RelativeSource={RelativeSource Self}}"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type localControls:IconButton}"> <Border x:Name="TemplateRoot" Background="{TemplateBinding NormalBackground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="{TemplateBinding IconWidth}"></ColumnDefinition> <ColumnDefinition Width="{TemplateBinding HeaderWidth}"></ColumnDefinition> </Grid.ColumnDefinitions> <ContentPresenter x:Name="IconContentSite" Content="{TemplateBinding Icon}" Margin="{TemplateBinding IconMargin}" HorizontalAlignment="{TemplateBinding IconHorizontalAlignment}" VerticalAlignment="{TemplateBinding IconVerticalAlignment}"></ContentPresenter> <ContentPresenter x:Name="HeaderContentSite" Grid.Column="1" Margin="{TemplateBinding HeaderMargin}" HorizontalAlignment="{TemplateBinding HeaderHorizontalAlignment}" VerticalAlignment="{TemplateBinding HeaderVerticalAlignment}" Content="{TemplateBinding Header}"></ContentPresenter> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="IconContentSite" Property="Content" Value="{Binding MouseOverIcon,RelativeSource={RelativeSource TemplatedParent}}"></Setter> <Setter TargetName="HeaderContentSite" Property="Content" Value="{Binding MouseOverHeader,RelativeSource={RelativeSource TemplatedParent}}"></Setter> <Setter TargetName="TemplateRoot" Property="Background" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource TemplatedParent}}"></Setter>
<!--因为是要设置IconButton的依赖属性值,所以不设置TargetName,并且Model为Self,如果为TemplateParent,将无法绑定到目标值,具体原因看MSDN关于此枚举的介绍--> <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource Self}}"></Setter> </Trigger> <Trigger Property="IsMouseOver" Value="false"> <Setter Property="Foreground" Value="{Binding NormalForeground,RelativeSource={RelativeSource Self}}"></Setter> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter TargetName="IconContentSite" Property="Content" Value="{Binding DisabledIcon,RelativeSource={RelativeSource TemplatedParent}}"></Setter> <Setter TargetName="HeaderContentSite" Property="Content" Value="{Binding DisabledHeader,RelativeSource={RelativeSource TemplatedParent}}"></Setter> <Setter TargetName="TemplateRoot" Property="Background" Value="{Binding DisabledBackground,RelativeSource={RelativeSource TemplatedParent}}"></Setter> <Setter Property="Foreground" Value="{Binding DisabledForeground,RelativeSource={RelativeSource Self}}"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
public class IconButton : Control { public IconButton() { } #region DependencyProperty public object Icon { get { return (object)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } // Using a DependencyProperty as the backing store for Icon. This enables animation, styling, binding, etc... public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(object), typeof(IconButton), new PropertyMetadata(null)); public Thickness IconMargin { get { return (Thickness)GetValue(IconMarginProperty); } set { SetValue(IconMarginProperty, value); } } // Using a DependencyProperty as the backing store for IconMargin. This enables animation, styling, binding, etc... public static readonly DependencyProperty IconMarginProperty = DependencyProperty.Register("IconMargin", typeof(Thickness), typeof(IconButton), new PropertyMetadata(new Thickness(0d))); public GridLength IconWidth { get { return (GridLength)GetValue(IconWidthProperty); } set { SetValue(IconWidthProperty, value); } } // Using a DependencyProperty as the backing store for IconWidth. This enables animation, styling, binding, etc... public static readonly DependencyProperty IconWidthProperty = DependencyProperty.Register("IconWidth", typeof(GridLength), typeof(IconButton), new PropertyMetadata(GridLength.Auto)); public HorizontalAlignment IconHorizontalAlignment { get { return (HorizontalAlignment)GetValue(IconHorizontalAlignmentProperty); } set { SetValue(IconHorizontalAlignmentProperty, value); } } // Using a DependencyProperty as the backing store for IconHorizontalAlignment. This enables animation, styling, binding, etc... public static readonly DependencyProperty IconHorizontalAlignmentProperty = DependencyProperty.Register("IconHorizontalAlignment", typeof(HorizontalAlignment), typeof(IconButton), new PropertyMetadata(HorizontalAlignment.Center)); public VerticalAlignment IconVerticalAlignment { get { return (VerticalAlignment)GetValue(IconVerticalAlignmentProperty); } set { SetValue(IconVerticalAlignmentProperty, value); } } // Using a DependencyProperty as the backing store for IconVerticalAlignment. This enables animation, styling, binding, etc... public static readonly DependencyProperty IconVerticalAlignmentProperty = DependencyProperty.Register("IconVerticalAlignment", typeof(VerticalAlignment), typeof(IconButton), new PropertyMetadata(VerticalAlignment.Center)); public object MouseOverIcon { get { return (object)GetValue(MouseOverIconProperty); } set { SetValue(MouseOverIconProperty, value); } } // Using a DependencyProperty as the backing store for MouseOverIcon. This enables animation, styling, binding, etc... public static readonly DependencyProperty MouseOverIconProperty = DependencyProperty.Register("MouseOverIcon", typeof(object), typeof(IconButton), new PropertyMetadata(null)); public object DisabledIcon { get { return (object)GetValue(DisabledIconProperty); } set { SetValue(DisabledIconProperty, value); } } // Using a DependencyProperty as the backing store for DisabledIcon. This enables animation, styling, binding, etc... public static readonly DependencyProperty DisabledIconProperty = DependencyProperty.Register("DisabledIcon", typeof(object), typeof(IconButton), new PropertyMetadata(0)); public object Header { get { return (object)GetValue(HeaderProperty); } set { SetValue(HeaderProperty, value); } } // Using a DependencyProperty as the backing store for Header. This enables animation, styling, binding, etc... public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(object), typeof(IconButton), new PropertyMetadata(null)); public Thickness HeaderMargin { get { return (Thickness)GetValue(HeaderMarginProperty); } set { SetValue(HeaderMarginProperty, value); } } // Using a DependencyProperty as the backing store for HeaderMargin. This enables animation, styling, binding, etc... public static readonly DependencyProperty HeaderMarginProperty = DependencyProperty.Register("HeaderMargin", typeof(Thickness), typeof(IconButton), new PropertyMetadata(new Thickness(0d))); public HorizontalAlignment HeaderHorizontalAlignment { get { return (HorizontalAlignment)GetValue(HeaderHorizontalAlignmentProperty); } set { SetValue(HeaderHorizontalAlignmentProperty, value); } } // Using a DependencyProperty as the backing store for HeaderHorizontalAlignment. This enables animation, styling, binding, etc... public static readonly DependencyProperty HeaderHorizontalAlignmentProperty = DependencyProperty.Register("HeaderHorizontalAlignment", typeof(HorizontalAlignment), typeof(IconButton), new PropertyMetadata(HorizontalAlignment.Center)); public VerticalAlignment HeaderVerticalAlignment { get { return (VerticalAlignment)GetValue(HeaderVerticalAlignmentProperty); } set { SetValue(HeaderVerticalAlignmentProperty, value); } } // Using a DependencyProperty as the backing store for HeaderVerticalAlignment. This enables animation, styling, binding, etc... public static readonly DependencyProperty HeaderVerticalAlignmentProperty = DependencyProperty.Register("HeaderVerticalAlignment", typeof(VerticalAlignment), typeof(IconButton), new PropertyMetadata(VerticalAlignment.Center)); public GridLength HeaderWidth { get { return (GridLength)GetValue(HeaderWidthProperty); } set { SetValue(HeaderWidthProperty, value); } } // Using a DependencyProperty as the backing store for HeaderWidth. This enables animation, styling, binding, etc... public static readonly DependencyProperty HeaderWidthProperty = DependencyProperty.Register("HeaderWidth", typeof(GridLength), typeof(IconButton), new PropertyMetadata(GridLength.Auto)); public object MouseOverHeader { get { return (object)GetValue(MouseOverHeaderProperty); } set { SetValue(MouseOverHeaderProperty, value); } } // Using a DependencyProperty as the backing store for MouseOverHeader. This enables animation, styling, binding, etc... public static readonly DependencyProperty MouseOverHeaderProperty = DependencyProperty.Register("MouseOverHeader", typeof(object), typeof(IconButton), new PropertyMetadata(null)); public object DisabledHeader { get { return (object)GetValue(DisabledHeaderProperty); } set { SetValue(DisabledHeaderProperty, value); } } // Using a DependencyProperty as the backing store for DisabledHeader. This enables animation, styling, binding, etc... public static readonly DependencyProperty DisabledHeaderProperty = DependencyProperty.Register("DisabledHeader", typeof(object), typeof(IconButton), new PropertyMetadata(null)); public Brush MouseOverBackground { get { return (Brush)GetValue(MouseOverBackgroundProperty); } set { SetValue(MouseOverBackgroundProperty, value); } } // Using a DependencyProperty as the backing store for MouseOverBackground. This enables animation, styling, binding, etc... public static readonly DependencyProperty MouseOverBackgroundProperty = DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(IconButton), new PropertyMetadata(null)); public Brush MouseOverForeground { get { return (Brush)GetValue(MouseOverForegroundProperty); } set { SetValue(MouseOverForegroundProperty, value); } } // Using a DependencyProperty as the backing store for MouseOverForeground. This enables animation, styling, binding, etc... public static readonly DependencyProperty MouseOverForegroundProperty = DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(IconButton), new PropertyMetadata(new SolidColorBrush(Colors.Transparent))); public Brush NormalBackground { get { return (Brush)GetValue(NormalBackgroundProperty); } set { SetValue(NormalBackgroundProperty, value); } } // Using a DependencyProperty as the backing store for NormalBackground. This enables animation, styling, binding, etc... public static readonly DependencyProperty NormalBackgroundProperty = DependencyProperty.Register("NormalBackground", typeof(Brush), typeof(IconButton), new PropertyMetadata(null)); public Brush NormalForeground { get { return (Brush)GetValue(NormalForegroundProperty); } set { SetValue(NormalForegroundProperty, value); } } // Using a DependencyProperty as the backing store for NormalForeground. This enables animation, styling, binding, etc... public static readonly DependencyProperty NormalForegroundProperty = DependencyProperty.Register("NormalForeground", typeof(Brush), typeof(IconButton), new PropertyMetadata(null)); public Brush DisabledBackground { get { return (Brush)GetValue(DisabledBackgroundProperty); } set { SetValue(DisabledBackgroundProperty, value); } } // Using a DependencyProperty as the backing store for DisabledBackground. This enables animation, styling, binding, etc... public static readonly DependencyProperty DisabledBackgroundProperty = DependencyProperty.Register("DisabledBackground", typeof(Brush), typeof(IconButton), new PropertyMetadata(null)); public Brush DisabledForeground { get { return (Brush)GetValue(DisabledForegroundProperty); } set { SetValue(DisabledForegroundProperty, value); } } // Using a DependencyProperty as the backing store for DisabledForeground. This enables animation, styling, binding, etc... public static readonly DependencyProperty DisabledForegroundProperty = DependencyProperty.Register("DisabledForeground", typeof(Brush), typeof(IconButton), new PropertyMetadata(null)); #endregion }