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>
I'm trying to switch between two styles in WPF according to a property.
To switch between the styles I used ControlTemplate for each style and one style with triggers that switching between the ControlTemplates.
My problem is that I have a ContentPresenter inside each basic style and I cannot set it from outside (from the usages).
This is my code in xaml:
<Style x:Key="SecondaryButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Padding" Value="10,0,10,0"/>
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SecondaryButtonWithArrowStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Padding" Value="20,0"/>
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="NormalButton">
<Button Style="{StaticResource SecondaryButtonStyle}" />
</ControlTemplate>
<ControlTemplate x:Key="ArrowButton">
<Button Style="{StaticResource SecondaryButtonWithArrowStyle}" />
</ControlTemplate>
<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Template" Value="{StaticResource NormalButton}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template" Value="{StaticResource ArrowButton}" />
</Trigger>
</Style.Triggers>
</Style>
The usage is:
<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />
How can I make the button to take the Content="Back"?
Thank You!
Anna.
I found a solution for this:
I changed the styles to ControlTemplate and created a basic style that will be the BasedOn style of the main style with the triggers.
The new code is:
<Style x:Key="BaseButtonWithArrowStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
</Style>
<ControlTemplate x:Key="NormalButton" TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,0,0,0">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ArrowButton" TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Viewbox Width="55" Height="55" Grid.Column="2">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,4,4,4" RenderTransformOrigin="0.5,0.5">
<Path Data="F1M53.214,40.132C54.801,36.559 55.708,32.607 55.708,28.435 55.708,12.757 43.212,0 27.854,0 12.495,0 0,12.757 0,28.435 0,44.116 12.495,56.873 27.854,56.873 32.587,56.873 37.042,55.653 40.95,53.521"
Fill="White"/>
<Path Data="F1M46.556,38.537L45.676,39.265 45.723,46.108 28.875,46.108 28.875,44.318 28.221,44.594 28.221,42.656 46.556,35.641z M27.854,0C23.121,0,18.666,1.221,14.759,3.353L24.395,25.827C33.549,28.967 39.062,26.315 40.16,25.926 41.325,25.514 42.419,25.702 43.139,25.904 44.271,26.215 46.152,28.391 45.442,29.216 41.664,33.584 30.583,38.32 28.825,38.204 27.066,38.092 23.007,38.156 23.007,38.156L22.645,39.563 14.373,41.318C14.373,41.318 13.041,38.472 12.885,37.841 12.728,37.209 13.26,36.858 13.26,36.858 12.355,36.334 11.869,33.725 11.626,31.787L9.378,32.791 2.494,16.743C0.906,20.314 0,24.267 0,28.439 0,44.117 12.496,56.873 27.854,56.873 43.213,56.873 55.708,44.117 55.708,28.439 55.708,12.759 43.213,0 27.854,0"
Fill="#FFFF8241" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonWithArrowStyle}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Template" Value="{StaticResource NormalButton}" />
<Setter Property="Padding" Value="42,0,70,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template" Value="{StaticResource ArrowButton}" />
<Setter Property="Padding" Value="20,0"/>
</Trigger>
</Style.Triggers>
</Style>
And now the content of the button changing according to the Content property in:
<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />
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"
<ListBox>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ListBoxItem.IsSelected" Value="True"/>
</Style>
</ListBox.Resources>
<ListBox>
Items are not selected.
http://www.11011.net/archives/000692.html this articale gives some cues, but ListBoxItem belongs to inheritance tree of Control class.
I know about ItemContainerStyle property. I'm just curious why style is not applied.
Update1:
It really works for ListBox, but not for derived class with the default style:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wcl="clr-namespace:SecurityFramework.UI.WpfControlsLibrary">
<Style TargetType="{x:Type wcl:ListBoxEx}">
<Setter Property="SelectAllToggleStyle">
<Setter.Value>
<Style TargetType="ToggleButton">
<Setter Property="Content" Value="Select All"/>
<Setter Property="Focusable" Value="True"/>
<Setter Property="Margin" Value="2,0,0,0"/>
<Setter Property="IsThreeState" Value="False"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type wcl:ListBoxEx}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true"
Padding="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}">
<DockPanel VerticalAlignment="Top" HorizontalAlignment="Stretch" LastChildFill="True">
<CheckBox Name="PART_SelectAllToggle" DockPanel.Dock="Top"/>
<Separator Margin="4" Visibility="{Binding Path=Visibility, ElementName=PART_SelectAllToggle}" DockPanel.Dock="Top"/>
<ScrollViewer>
<ItemsPresenter DockPanel.Dock="Top"/>
</ScrollViewer>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style>
<Setter Property="ListBoxItem.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
SnapsToDevicePixels="true"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="0"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="Stretch"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=wcl:ListBoxEx, Mode=FindAncestor}, Path=ItemBackground}"/>
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType=wcl:ListBoxEx, Mode=FindAncestor}, Path=ItemForeground}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{x:Static SystemColors.HighlightBrush}"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=wcl:ListBoxEx, Mode=FindAncestor}, Path=SelectedItemBackground}"/>
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType=wcl:ListBoxEx, Mode=FindAncestor}, Path=SelectedItemForeground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Control.VerticalAlignment" Value="Center"/>
<Setter Property="Control.FocusVisualStyle">
<Setter.Value>
<Style TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="0" StrokeThickness="2" Stroke="Black" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4"/>
<Setter Property="SelectedItemBackground" Value="{x:Static SystemColors.HighlightBrush}"/>
<Setter Property="SelectedItemForeground" Value="White"/>
<Setter Property="ItemBackground" Value="Transparent"/>
<Setter Property="ItemForeground" Value="Black"/>
<Setter Property="MouseOverItemBackground" Value="LightGray"/>
<Setter Property="MouseOverItemForeground" Value="Black"/>
</Style>
</ResourceDictionary>
Update2:
parallel thread: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f7f0558b-c041-492e-bd96-896f97a7b07e/
I have a set of buttons inside a stack panel. I want them all to have a background image. How can i do it using styles? since i don't want to set manually the Background image for each button.
Here is a code snippet:
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4" />
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom">
<Button.Background>
<ImageBrush ImageSource="images/Tab.png" />
</Button.Background>
</Button>
<Button>A</Button>
<Button>R</Button>
<Button>S</Button>
</StackPanel>
Thanks.
Well, you specify a setter for the Background property within the style, and you set its value to the ImageBrush.
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="images/Tab.png"/>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom"/>
<Button>A</Button>
<Button>R</Button>
<Button>S</Button>
</StackPanel>
Below is the style for your button and backgroung image is set to it.You can change the source of the ImageBrush to the one which you wanted .
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" >
<Setter.Value>
<ImageBrush ImageSource="pic.png"></ImageBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then just use it:
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4" />
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom" Style="{StaticResource ButtonStyle1}">
</Button>
<Button Style="{StaticResource ButtonStyle1}" >A</Button>
<Button Style="{StaticResource ButtonStyle1}">R</Button>
<Button Style="{StaticResource ButtonStyle1}">S</Button>
</StackPanel>