I have an adorner to show error messages, and the problem is the message get clipped under the window, when the window is small.
So I'm trying to re-position the adorner to button or left according to the window size, or if the user resized the window.
textbox:
<TextBox IsReadOnly="False" Grid.Column="3" Grid.Row="0" Text="{Binding TextValue}" />
style:
<ControlTemplate x:Key="errorToolTipTemplate">
<ControlTemplate.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
</ControlTemplate.Resources>
<DockPanel LastChildFill="true">
<Border Height="Auto" Margin="4,0,0,0" Background="Tomato" BorderBrush="Black" BorderThickness="1" CornerRadius="2" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
</Border>
<AdornedElementPlaceholder Name="customAdorner">
<Border BorderBrush="Red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Width" Value="120" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,2,4,2" />
<Setter Property="Validation.ErrorTemplate" Value="{DynamicResource errorToolTipTemplate}" />
<!--<Setter Property="FontSize" Value="8" />-->
<Setter Property="Background" Value="{DynamicResource entryFieldsBrush}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="{StaticResource windowBrush}" />
</Trigger>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding Path=(Validation.Errors)[0].ErrorContent, RelativeSource={x:Static RelativeSource.Self}}" />
</Trigger>
</Style.Triggers>
</Style>
Using popups was the way to go for me. this link here has a working example of a popup error message.
The Popup control provides a way to display content in a separate
window that floats over the current application window relative to a
designated element or screen coordinate. This topic introduces the
Popup control and provides information about its use.
source
Related
I have the following WPF control containing a Data Visualization Chart (while this is the C# code behind it). My problem is that whatever I try, I can't change the tooltips of the points.
I tried looking for other quests and I saw different kind of solutions. One kind assigned an certain event to the chart, but my LineChart doesn't have these events. I tried adding a template, but nothing happen (I still see the same tooltip)
<DVC:Chart Canvas.Top="80" Canvas.Left="10" x:Name="LineChart" Title="Linea" Foreground="Black" Background="{DynamicResource Brush09}" BorderBrush="Transparent" PlotAreaStyle="{DynamicResource GridStyle1}" Margin="0,5,0,0">
<DVC:Chart.TitleStyle>
<Style TargetType="{x:Type DV:Title}">
<Setter Property="FontSize" Value="15" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DVC:Chart.TitleStyle>
<DVC:Chart.LegendStyle>
<Style TargetType="{x:Type DV:Legend}">
<Setter Property="FontSize" Value="10" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Margin" Value="15,0"/>
<Setter Property="Width" Value="{Binding LegendVisibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush09}"/>
<Setter Property="Foreground" Value="{StaticResource Brush08}" />
<Setter Property="Background" Value="{DynamicResource Brush09}" />
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</DVC:Chart.LegendStyle>
<DVC:Chart.Axes>
<DVC:DateTimeAxis x:Name="xAxis" Orientation="X" Foreground="Black" FontFamily="Segoe UI" FontSize="10"/>
<DVC:LinearAxis x:Name="yAxis" Orientation="Y" Minimum="0" Foreground="Black" FontFamily="Segoe UI" FontSize="10">
</DVC:LinearAxis>
</DVC:Chart.Axes>
<DVC:LineSeries x:Name="SeriesColumn" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" DataContext="{Binding}" Margin="0">
<DVC:LineSeries.Background>
<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB9D6F7"/>
<GradientStop Color="#FF284B70" Offset="1"/>
</RadialGradientBrush>
</DVC:LineSeries.Background>
</DVC:LineSeries>
</DVC:Chart>
What I want is the following result. I want to keep all my values as double, but I want the tooltip to show "number+s" if the value is less then 60, while I want to see "number+m number+s" if the number is greater then 60. Is it possible?
How can I remove the space between the TabItem and edge of Window. There also seems to be a border around the tab content box as well that is not needed. How can I remove that as well?
Here's my XAML:
<Grid>
<TabControl Margin="0" ItemsSource="{Binding TabItems}" SelectedIndex="0">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<Border Name="Border"
Margin="0,0,-4,0">
</Border>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="Orange" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Header" Value="{Binding Header}"/>
<Setter Property="Content" Value="{Binding Content}"/>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</Grid>
I tried adding a border and setting it to -4 margin, but doesn't seem to be working. Any help will be appreciated. Thanks!
Set the TabControl's BorderThickness property to 0:
<TabControl Margin="0"
ItemsSource="{Binding TabItems}"
SelectedIndex="0"
BorderThickness="0">
<!--The rest of your code here-->
</TabControl>
Update - Adjusting the tab headers
This one is a bit trickier - this will require updating the TabControl's template. You can do this by hand but the TabControl's template is quite large so I recommend using Blend to get started. Open your project in Blend, open the 'Objects and Timeline' window, right click your TabControl, click edit template, and then 'Edit a copy'. This will create a copy of the default TabControl's template for you to start working with.
This is going to create a lot of XAML for you. You will end up with a style resource that looks something like this:
<Style x:Key="TabControlStyle1"
TargetType="{x:Type TabControl}">
<Setter Property="Padding"
Value="2" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Background"
Value="{StaticResource TabItem.Selected.Background}" />
<Setter Property="BorderBrush"
Value="{StaticResource TabItem.Selected.Border}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot"
ClipToBounds="true"
SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0" />
<ColumnDefinition x:Name="ColumnDefinition1"
Width="0" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0"
Height="Auto" />
<RowDefinition x:Name="RowDefinition1"
Height="*" />
</Grid.RowDefinitions>
<TabPanel x:Name="headerPanel"
Background="Transparent"
Grid.Column="0"
IsItemsHost="true"
Margin="2,2,2,0"
Grid.Row="0"
KeyboardNavigation.TabIndex="1"
Panel.ZIndex="1" />
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement"
Value="Bottom">
<Setter Property="Grid.Row"
TargetName="headerPanel"
Value="1" />
<Setter Property="Grid.Row"
TargetName="contentPanel"
Value="0" />
<Setter Property="Height"
TargetName="RowDefinition0"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition1"
Value="Auto" />
<Setter Property="Margin"
TargetName="headerPanel"
Value="2,0,2,2" />
</Trigger>
<Trigger Property="TabStripPlacement"
Value="Left">
<Setter Property="Grid.Row"
TargetName="headerPanel"
Value="0" />
<Setter Property="Grid.Row"
TargetName="contentPanel"
Value="0" />
<Setter Property="Grid.Column"
TargetName="headerPanel"
Value="0" />
<Setter Property="Grid.Column"
TargetName="contentPanel"
Value="1" />
<Setter Property="Width"
TargetName="ColumnDefinition0"
Value="Auto" />
<Setter Property="Width"
TargetName="ColumnDefinition1"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition0"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition1"
Value="0" />
<Setter Property="Margin"
TargetName="headerPanel"
Value="2,2,0,2" />
</Trigger>
<Trigger Property="TabStripPlacement"
Value="Right">
<Setter Property="Grid.Row"
TargetName="headerPanel"
Value="0" />
<Setter Property="Grid.Row"
TargetName="contentPanel"
Value="0" />
<Setter Property="Grid.Column"
TargetName="headerPanel"
Value="1" />
<Setter Property="Grid.Column"
TargetName="contentPanel"
Value="0" />
<Setter Property="Width"
TargetName="ColumnDefinition0"
Value="*" />
<Setter Property="Width"
TargetName="ColumnDefinition1"
Value="Auto" />
<Setter Property="Height"
TargetName="RowDefinition0"
Value="*" />
<Setter Property="Height"
TargetName="RowDefinition1"
Value="0" />
<Setter Property="Margin"
TargetName="headerPanel"
Value="0,2,2,2" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="TextElement.Foreground"
TargetName="templateRoot"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Find the TabPanel with the name 'headerPanel' and set its left margin to 0. One last thing, if you used Blend it should have set your TabControl's style to use your new style but if not you need make sure you set the style yourself:
Style="{StaticResource TabControlStyle1}"
I have the following Column in my datagrid :
<DataGridTemplateColumn CanUserReorder="False" CanUserResize="True" Header="">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate />
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="DataGridCell" BasedOn="{StaticResource DatagridCellHyperlinkStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock Width="Auto" Height="Auto" TextTrimming="CharacterEllipsis">
<Hyperlink>
<InlineUIContainer TextDecorations="{Binding Path=TextDecorations, RelativeSource={RelativeSource AncestorType=TextBlock}}" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=TextBlock}}">
<ContentPresenter Width="Auto" Height="Auto" Content="{Binding DataContext.Value, RelativeSource={RelativeSource AncestorType=DataGridRow}}"/>
</InlineUIContainer>
<Hyperlink.Style>
<Style TargetType="Hyperlink" BasedOn="{StaticResource HyperlinkStyle}">
<EventSetter Event="Hyperlink.Click" Handler="Click" />
</Style>
</Hyperlink.Style>
</Hyperlink>
</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
The hyperlink works perfectly (with my style also) but the text trimming doesn't work. How can I change my code to make it work ?
The 2 styles attached :
<Style x:Key="DatagridCellHyperlinkStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Padding" Value="5" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Helvetica" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Foreground" Value="{StaticResource CouleurBouton}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBouton}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurFond}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBouton}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurFond}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBoutonHover}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurTexteBoutonHover}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="HyperlinkStyle" TargetType="{x:Type Hyperlink}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource CouleurBoutonPressed}" />
</Trigger>
</Style.Triggers>
<Setter Property="Foreground" Value="{DynamicResource CouleurBouton}" />
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
Thank you !
You have nothing that will restrict the TextBlock.Width, so the text in it will never wrap, or be trimmed. To fix this problem, you just need to set some kind of Width restriction on it... you could try something like this:
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock MaxWidth="250" TextTrimming="CharacterEllipsis">
...
Well, for WPF engine to understand that the trimming is needed it should see that the control cannot be put into the space available. If the control can be resized(AutoSize) it will just increase its dimensions without any trimming.
From MSDN:
Gets or sets the text trimming behavior to employ when content
overflows the content area.
And I can't see anything in your template that suggests that the space limit will be encountered.
So try to set width limit, either on Column, or on the TextBlock. Or restrict the resize in some other way.
<TextBlock Width="Auto" Height="Auto"
MaxWidth="100"
MinWidth="30"
TextTrimming="CharacterEllipsis">
I want to create a template for a XAML WPF application.
I have two problems:
1) I have to set positione TabItem Header on top right of UserControl
2) I set TabItem Style, but when ouse go over tabItem Header, i see default Item effetcs on text.
<TabControl>
<TabItem Header="{DynamicResource tab_header_graphic_interface}" Style="{StaticResource generalTabItem}">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" Name="scrDrvPan">
</ScrollViewer>
</TabItem>
<TabItem Header="{DynamicResource tab_header_list_view}" Style="{StaticResource generalTabItem}">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" Name="scrDrvList">
</ScrollViewer>
</TabItem>
</TabControl>
And i set style for TabItem
<Grid.Resources>
<Style x:Key="generalTabItem" TargetType="{x:Type TabItem}">
<Setter Property="FontFamily" Value="/Font/#Futura Std Medium" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Height" Value="30" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<!--<DockPanel IsItemsHost="True" LastChildFill="False" Margin="2,2,2,0" HorizontalAlignment="Right">
</DockPanel>-->
<!--<ContentPresenter Content="{TemplateBinding Property=TabItem.Header}"/>-->
<TextBlock Background="Transparent" Text="ciao" />
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="TabItem.IsSelected" Value="True">
<Setter Property="FontFamily" Value="/Font/#Futura Std Bold" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Height" Value="30" />
</Trigger>
<Trigger Property="TabItem.IsFocused" Value="True">
<Setter Property="FontFamily" Value="/Font/#Futura Std Bold" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Height" Value="30" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
Have you tried this in your HeaderTemplate DataTemplate?`
<TextBlock Background="Transparent" Text="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Top" />
I based a custom menu on some code I once received. It looks OK, but I'm going crazy over how to remove the thin black border around the entire section of menuitems?! Where is this border/padding defined?
Thanks to any WPF guru that might help me with this :)
Valid XHTML http://img843.imageshack.us/img843/8813/testn.png
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HighlightedBackgroundBrush" Color="#003466" />
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="#003466" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="SolidMenuFontBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="HighlightedText" Color="#FFFFFFFF" />
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border Background="{DynamicResource AppBackground}"
BorderBrush="{DynamicResource AppBackground}"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid Background="{DynamicResource AppBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" />
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="1" Padding="2,2,2,2">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="2" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{DynamicResource HighlightedBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{DynamicResource AppBackground}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AppBackground}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
...
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup ...>
<Border x:Name="SubMenuBorder" ... Padding="0">...</Border>...</Popup>