I am making a style for button to appear in a custom way
The Idea is to write the Image source in the Tag property and the Text in the Content property
So the style goes like this
<Style x:Key="NormalButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="12,4,12,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{TemplateBinding Tag}" Height="{TemplateBinding Height}" Width="{TemplateBinding Height}"/>
<ContentPresenter x:Name="ContentPresenter" Grid.Column="1" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Image does not display and only the Text apears
I call the button like this in the MainWindow
<Button Style="{DynamicResource NormalButtonStyle}" Tag="/iPARK;component/Resources/Sign%20out_icon.png" HorizontalAlignment="Right" Margin="20" Click="Signout_Click"/>
If I set the image in the style file directly like this then it shows but then it cannot be reused for other images
<Image Source="/iPARK;component/Resources/Sign%20out_icon.png" Height="{TemplateBinding Height}" Width="{TemplateBinding Height}"/>
When you put an image URI into the Tag property it will not automatically be converted into an ImageSource (as it is done for the Image.Source property). You need to do that explicitly:
<Button ...>
<Button.Tag>
<BitmapImage UriSource="/iPARK;component/Resources/Sign%20out_icon.png"/>
</Button.Tag>
</Button>
Related
How can I change only the foreground color of a TabItem header text when it is selected or active without changing the foreground of any item inside that TabItemor anything? I'm new to all this so finding it difficult to figure out where in my TabItemstyling can I implement this little feature and how.
The TabControl style I'm using is:
<Style
x:Key="{x:Type TabControl}"
TargetType="{x:Type TabControl}">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Border
BorderThickness="0,0,1,1"
BorderBrush="#D0CEBF"
Grid.Row="1">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Border
Background="{TemplateBinding Background}">
<ContentPresenter
ContentSource="SelectedContent" />
</Border>
</Border>
</Border>
<TabPanel
Grid.Row="0"
IsItemsHost="true"
HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
TargetType="TabItem">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="VerticalContentAlignment"
Value="Center" />
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TabItem}">
<!--In order to click on the blank part of the TabItem can be successfully selected-->
<Border
Background="Transparent">
<Grid>
<Grid
x:Name="g">
<Path
Fill="{TemplateBinding Background}"
Margin="0,0,0,-1"
Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0 L 155,0 C 165,0 173,0 ,175,6 L175,30 C 175,30 175,38 182,40 Z" />
</Grid>
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
</Border>
<!--Add ControlTemplate.Triggers to change the background color of the selected TabItem.-->
<ControlTemplate.Triggers>
<Trigger
Property="IsSelected"
Value="false">
<Setter
Property="Visibility"
TargetName="g"
Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Adding a trigger in your TabItem control template unfortunately sets the foreground color of the TabItem content, too, when the tab is selected, so this does not work.
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
However, you could add an implicit TextBlock style (without x:Key) inside the ContentPresenter resources. It will be applied automatically only to TextBlocks inside of its scope, not affecting the TabItem content or even other elements in a custom header template other than TextBlocks.
<ContentPresenter
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
Value="true">
<Setter
Property="Foreground"
Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
Alternatively, a specialized solution is to create a header template and put the trigger there. In this case it does not force an overridden header template to apply the foreground to each TextBlock.
<Setter
Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
Value="true">
<Setter
Property="Foreground"
Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
I want to change the background color of MenuItem when IsMouseOver is triggered but without using a Template.
Could it happen?
Or should I use a Template to change background color of MenuItem when IsMouseOver is triggered?
Edit:
I try to add ControlTemplate using dhilmathy's advice, now I can change the background of the header when IsMouseOver is triggered, but how can I change the background of MenuItem? MenuItems now disappeared.
XAML below as:
<Menu Grid.Column="0" Background="#000d18" BorderBrush="#000d18" Cursor="Hand" Margin="28,0,0,0">
<MenuItem Header="Test1" Width="72" Height="42" Foreground="#d8d8d8" FontSize="16">
<MenuItem Header="Content1" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content2" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content3" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content4" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content5" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content6" Style="{StaticResource MenuItemStyle}"/>
</MenuItem>
<MenuItem Header="Test2" Width="72" Height="42" Foreground="#d8d8d8" FontSize="16">
<MenuItem.Style>
<Style TargetType="MenuItem">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border Width="72" Height="42" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Header}" ContentSource="Header" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#1271C8"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</MenuItem.Style>
<MenuItem Header="Content1" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content2" Style="{StaticResource MenuItemStyle}"/>
<MenuItem Header="Content3" Style="{StaticResource MenuItemStyle}"/>
</MenuItem>
<MenuItem Header="Test3" Width="72" Height="42" Foreground="#d8d8d8" FontSize="16"></MenuItem>
</Menu>
MenuItem Styles:
<Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Foreground" Value="#d8d8d8"/>
<Setter Property="Background" Value="#414141"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="#414141"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#011627"/>
<!--<Setter Property="Background" Value="#1271C8"/>-->
</Trigger>
</Style.Triggers>
</Style>
You need to modify the default ControlTemplate of MenuItem to achieve this. You can create a copy of the existing Template from Visual Studio,
Default template:
<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
<Path x:Name="Glyph" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Height="11" Width="10"/>
</Border>
<ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="True"/>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You need to edit IsHighlighted Trigger to match your requirements.
I have already solved my question.
In order to change MenuItem's background, it must use Template.
Here is MenuItem style:
<Style x:Key="TopLevelHeaderStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Background" Value="#000d18"/>
<Setter Property="Foreground" Value="#d8d8d8"/>
<Setter Property="Width" Value="72"/>
<Setter Property="Height" Value="42"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="MenuItemBorder" Width="72" Height="42" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Header}" ContentSource="Header" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup AllowsTransparency="True" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PlacementTarget="{Binding ElementName=MenuItemBorder}"
HorizontalOffset="1" VerticalOffset="-1">
<Border BorderBrush="#414141" Background="#414141">
<ScrollViewer Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" Value="#1271C8"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Set Template to revise original template, and use ContentPresenter to show content and Popup to show SubMenuItem whose ItemsPresenter can show subMenuItem content. Adjust Popup's style can meet expectaion.
Besides, Trigger IsHighlighted can change MenuItem's background until clicking other position.
SubMenuItem's style can use another customized style to change.
New Style:
I am trying to change the opacity of the RadioButton's Content which is some Text presumably a TextBlock. Problem is with this current style it changes the opacity of the Text just fine but it doesn't show the actual radio button itself. Please help.
<UserControl.Resources>
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<TextBlock x:Name="RadioLabel"
Text="{TemplateBinding Content}"
Background="{x:Null}" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="RadioLabel"
Property="Background"
Value="Transparent"/>
<Setter TargetName="RadioLabel"
Property="Opacity"
Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
This is my RadioButton
<RadioButton x:Name="rbn1" Style="{StaticResource RadioLabel}" GroupName="rbnApplication"
IsChecked="{Binding Path=CurrentApplicationType,
Converter={StaticResource EnumComparisonConverter},
ConverterParameter={x:Static utils:ApplicationType.QXManagerRegulatory}}"
IsEnabled="{Binding Path=CurrentApplicationType,
Converter={StaticResource EnumComparisonConverter},
ConverterParameter={x:Static utils:ApplicationType.QXManagerRegulatory}}"
Content="QX Manager Regulatory"/>
In general the easiest way to achieve this is to declare a RadioButton (or any other control) and then in the properties tab go to the Miscellaneous -> Template, left-click on the little square button on the right and choose "Convert to local value". This will expand the full existing ControlTemplate, which you can then edit and/or add triggers to etc:
<RadioButton x:Name="template" >
<RadioButton.Template>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>
This is because you're setting ControlTemplate to your RadioButton. Which changes your whole control. Instead you need to use ContentTemplate to change your Content.
Below Style should work for your case.
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type RadioButton}">
<TextBlock x:Name="RadioLabel"
Text="{TemplateBinding Content}"
Background="{x:Null}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsChecked,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Value="False">
<Setter TargetName="RadioLabel"
Property="Background"
Value="Transparent"/>
<Setter TargetName="RadioLabel"
Property="Opacity"
Value="0.5"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
How I can change binded property in custom template?
Button with Path Fill which is binded to Foreground of button:
<Button Style="{DynamicResource CustomButtonStyle}"Foreground="White" >
<Path Data="PATH_DATA" Stretch="Uniform" Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" ></Path>
</Button>
Here is custom style with override template:
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#d5113f"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="#d5113f"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But changing Foregroud in trigger
<Setter Property="Foreground" Value="#d5113f"/>
will do nothing
Because you set Foreground to a fixed value, according to Dependency Property Setting Precedence List, your style trigger will not override this value. You need to bring Foreground set into Style as another setter like this:
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
...
</Style>
I have image to display when I do mouseover on column header. But imp thing is it should be display below columnheader area.
I am able to create that but's it's overlapping with below cell. Here is image.
Here is my code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="26" />
<Setter Property="Width" Value="126" />
<Setter Property="Foreground" Value="{DynamicResource ContrastWhiteBrush}" />
<Setter Property="Background" Value="{DynamicResource ContentToGreyedOutBrush}" />
<Setter Property="Template" Value="{StaticResource ColumnHeaderControlTemplate}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
<Trigger Property="prism:DataGridProperties.IsMouseOverGridCellColumnHeader" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
</Style.Triggers>
<ControlTemplate x:Key="ColumnHeaderControlTemplate" TargetType="{x:Type DataGridColumnHeader}" >
<AdornerDecorator>
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader" Panel.ZIndex="10001">
<ad:Interaction.Behaviors>
<GridColumnHeaderControl:GridAdornerBehavior AdornerTemplate="{StaticResource AdornerDataTemplate}" Panel.ZIndex="19999">
<ad:Interaction.Triggers>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseEnter">
<ad:InvokeCommandAction CommandName="ShowAdornerCommand"/>
</ad:EventTrigger>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseLeave">
<ad:InvokeCommandAction CommandName="HideAdornerCommand"/>
</ad:EventTrigger>
</ad:Interaction.Triggers>
</GridColumnHeaderControl:GridAdornerBehavior>
</ad:Interaction.Behaviors>
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7" x:Name="PART_Rectangle" Fill="{DynamicResource ContentOutofFocusBrush}"></Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="AdornerDataTemplate">
<Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,13,0,0" Grid.ZIndex="99">
<Button Content="X" Width="28" Height="26" Panel.ZIndex="10002" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctrls:RhinoDataGrid}}, Path=RemoveSelectedColumnCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Heavy"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}" CornerRadius="0,0,12,12" BorderThickness="1,0,1,1" BorderBrush="Black">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
Some how my rowheader is working. my row header width is 36 and close button width is 28 with left margin 26. and some how image is no overlapping there with cell
Pls help me to fix.
Thanks
Dee
The height of the header is 26
<Setter Property="Height" Value="26" />
How do you expect it to display an image with a height > 26 ?
In order to show your “Close” button on top of the other control, you have to add “Popup” control and add “Close” button as its child. You can define maximum one child, which can be any UIElement.
You should define Event trigger for DatagridColumnHeader’s mouse over event and set “IsOpen = true” of popup control.
e.g.
<Popup Name="myPopup">
<TextBlock Name="myPopupText"
Background="LightBlue"
Foreground="Blue">
Popup Text
</TextBlock>
</Popup>
You can also set below properties to get the expected result.
AllowsTransparency="True"
Placement="Relative"
PlacementTarget="{Binding ElementName=Border}" /* your control name */
HorizontalOffset="0"
VerticalOffset="60"
PopupAnimation="Fade"