Geek Answers Handbook

How to remove the dashed heading diagram of an Expander control in WPF (C #)?

How to remove the dashed heading diagram of an Expander control in WPF (C #)?

I tried to make FocusVisualStyle null, but no luck. Is there any other approach?

<UserControl x:Class="MyControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="373" Width="669"> <Expander FocusVisualStyle="{x:Null}" Expanded="expander1_Expanded" Focusable="False" Foreground="DarkBlue" Header="My Header" Height="219" Name="expander1" Width="525"> .....
+4
source share
4 answers

You need to make changes to this part (see the full template at the bottom of the message) This example makes a thicker red move:

 `<Style x: Key =" ExpanderHeaderFocusVisual ">
         <Setter Property = "Control.Template">
             <Setter.Value>
                 <ControlTemplate>
                     <Border>
                         <Rectangle Margin = "0" SnapsToDevicePixels = "true" Stroke = "Red" StrokeThickness = "2" StrokeDashArray = "1 2" />
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style> `

This is the original template for the expander, shot by Blend - it will be automatically applied to all expanders in this window.

     `<Window.Resources>
         <Style x: Key = "ExpanderRightHeaderStyle" TargetType = "{x: Type ToggleButton}">
             <Setter Property = "Template">
                 <Setter.Value>
                     <ControlTemplate TargetType = "{x: Type ToggleButton}">
                         <Border Padding = "{TemplateBinding Padding}">
                             <Grid Background = "Transparent" SnapsToDevicePixels = "False">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height = "19" />
                                     <RowDefinition Height = "*" />
                                 </Grid.RowDefinitions>
                                 <Grid>
                                     <Grid.LayoutTransform>
                                         <TransformGroup>
                                             <TransformGroup.Children>
                                                 <TransformCollection>
                                                     <RotateTransform Angle = "- 90" />
                                                 </TransformCollection>
                                             </TransformGroup.Children>
                                         </TransformGroup>
                                     </Grid.LayoutTransform>
                                     <Ellipse x: Name = "circle" HorizontalAlignment = "Center" Height = "19" Stroke = "DarkGray" VerticalAlignment = "Center" Width = "19" />
                                     <Path x: Name = "arrow" Data = "M 1.1.5 L 4.5.5 L 8.1.5" HorizontalAlignment = "Center" SnapsToDevicePixels = "false" Stroke = "# 666" StrokeThickness = "2" VerticalAlignment = "Center "/>
                                 </Grid>
                                 <ContentPresenter HorizontalAlignment = "Center" Margin = "0.4.0.0" Grid.Row = "1" RecognizesAccessKey = "True" SnapsToDevicePixels = "True" VerticalAlignment = "Top" />
                             </Grid>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property = "IsChecked" Value = "true">
                                 <Setter Property = "Data" TargetName = "arrow" Value = "M 1.4.5 L 4.5.1 L 8.4.5" />
                             </Trigger>
                             <Trigger Property = "IsMouseOver" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF3C7FB1" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# 222" />
                             </Trigger>
                             <Trigger Property = "IsPressed" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF526C7B" />
                                 <Setter Property = "StrokeThickness" TargetName = "circle" Value = "1.5" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# FF003366" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style x: Key = "ExpanderUpHeaderStyle" TargetType = "{x: Type ToggleButton}">
             <Setter Property = "Template">
                 <Setter.Value>
                     <ControlTemplate TargetType = "{x: Type ToggleButton}">
                         <Border Padding = "{TemplateBinding Padding}">
                             <Grid Background = "Transparent" SnapsToDevicePixels = "False">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width = "19" />
                                     <ColumnDefinition Width = "*" />
                                 </Grid.ColumnDefinitions>
                                 <Grid>
                                     <Grid.LayoutTransform>
                                         <TransformGroup>
                                             <TransformGroup.Children>
                                                 <TransformCollection>
                                                     <RotateTransform Angle = "180" />
                                                 </TransformCollection>
                                             </TransformGroup.Children>
                                         </TransformGroup>
                                     </Grid.LayoutTransform>
                                     <Ellipse x: Name = "circle" HorizontalAlignment = "Center" Height = "19" Stroke = "DarkGray" VerticalAlignment = "Center" Width = "19" />
                                     <Path x: Name = "arrow" Data = "M 1.1.5 L 4.5.5 L 8.1.5" HorizontalAlignment = "Center" SnapsToDevicePixels = "false" Stroke = "# 666" StrokeThickness = "2" VerticalAlignment = "Center "/>
                                 </Grid>
                                 <ContentPresenter Grid.Column = "1" HorizontalAlignment = "Left" Margin = "4,0,0,0" RecognizesAccessKey = "True" SnapsToDevicePixels = "True" VerticalAlignment = "Center" />
                             </Grid>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property = "IsChecked" Value = "true">
                                 <Setter Property = "Data" TargetName = "arrow" Value = "M 1.4.5 L 4.5.1 L 8.4.5" />
                             </Trigger>
                             <Trigger Property = "IsMouseOver" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF3C7FB1" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# 222" />
                             </Trigger>
                             <Trigger Property = "IsPressed" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF526C7B" />
                                 <Setter Property = "StrokeThickness" TargetName = "circle" Value = "1.5" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# FF003366" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style x: Key = "ExpanderLeftHeaderStyle" TargetType = "{x: Type ToggleButton}">
             <Setter Property = "Template">
                 <Setter.Value>
                     <ControlTemplate TargetType = "{x: Type ToggleButton}">
                         <Border Padding = "{TemplateBinding Padding}">
                             <Grid Background = "Transparent" SnapsToDevicePixels = "False">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height = "19" />
                                     <RowDefinition Height = "*" />
                                 </Grid.RowDefinitions>
                                 <Grid>
                                     <Grid.LayoutTransform>
                                         <TransformGroup>
                                             <TransformGroup.Children>
                                                 <TransformCollection>
                                                     <RotateTransform Angle = "90" />
                                                 </TransformCollection>
                                             </TransformGroup.Children>
                                         </TransformGroup>
                                     </Grid.LayoutTransform>
                                     <Ellipse x: Name = "circle" HorizontalAlignment = "Center" Height = "19" Stroke = "DarkGray" VerticalAlignment = "Center" Width = "19" />
                                     <Path x: Name = "arrow" Data = "M 1.1.5 L 4.5.5 L 8.1.5" HorizontalAlignment = "Center" SnapsToDevicePixels = "false" Stroke = "# 666" StrokeThickness = "2" VerticalAlignment = "Center "/>
                                 </Grid>
                                 <ContentPresenter HorizontalAlignment = "Center" Margin = "0.4.0.0" Grid.Row = "1" RecognizesAccessKey = "True" SnapsToDevicePixels = "True" VerticalAlignment = "Top" />
                             </Grid>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property = "IsChecked" Value = "true">
                                 <Setter Property = "Data" TargetName = "arrow" Value = "M 1.4.5 L 4.5.1 L 8.4.5" />
                             </Trigger>
                             <Trigger Property = "IsMouseOver" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF3C7FB1" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# 222" />
                             </Trigger>
                             <Trigger Property = "IsPressed" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF526C7B" />
                                 <Setter Property = "StrokeThickness" TargetName = "circle" Value = "1.5" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# FF003366" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style x: Key = "ExpanderHeaderFocusVisual">
             <Setter Property = "Control.Template">
                 <Setter.Value>
                     <ControlTemplate>
                         <Border>
                             <Rectangle Margin = "0" SnapsToDevicePixels = "true" Stroke = "Black" StrokeThickness = "1" StrokeDashArray = "1 2" />
                         </Border>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style x: Key = "ExpanderDownHeaderStyle" TargetType = "{x: Type ToggleButton}">
             <Setter Property = "Template">
                 <Setter.Value>
                     <ControlTemplate TargetType = "{x: Type ToggleButton}">
                         <Border Padding = "{TemplateBinding Padding}">
                             <Grid Background = "Transparent" SnapsToDevicePixels = "False">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width = "19" />
                                     <ColumnDefinition Width = "*" />
                                 </Grid.ColumnDefinitions>
                                 <Ellipse x: Name = "circle" HorizontalAlignment = "Center" Height = "19" Stroke = "DarkGray" VerticalAlignment = "Center" Width = "19" />
                                 <Path x: Name = "arrow" Data = "M 1.1.5 L 4.5.5 L 8.1.5" HorizontalAlignment = "Center" SnapsToDevicePixels = "false" Stroke = "# 666" StrokeThickness = "2" VerticalAlignment = "Center "/>
                                 <ContentPresenter Grid.Column = "1" HorizontalAlignment = "Left" Margin = "4,0,0,0" RecognizesAccessKey = "True" SnapsToDevicePixels = "True" VerticalAlignment = "Center" />
                             </Grid>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property = "IsChecked" Value = "true">
                                 <Setter Property = "Data" TargetName = "arrow" Value = "M 1.4.5 L 4.5.1 L 8.4.5" />
                             </Trigger>
                             <Trigger Property = "IsMouseOver" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF3C7FB1" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# 222" />
                             </Trigger>
                             <Trigger Property = "IsPressed" Value = "true">
                                 <Setter Property = "Stroke" TargetName = "circle" Value = "# FF526C7B" />
                                 <Setter Property = "StrokeThickness" TargetName = "circle" Value = "1.5" />
                                 <Setter Property = "Stroke" TargetName = "arrow" Value = "# FF003366" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style x: Key = "StyledExpander" TargetType = "{x: Type Expander}">
             <Setter Property = "Foreground" Value = "{DynamicResource {x: Static SystemColors.ControlTextBrushKey}}" />
             <Setter Property = "Background" Value = "Transparent" />
             <Setter Property = "HorizontalContentAlignment" Value = "Stretch" />
             <Setter Property = "VerticalContentAlignment" Value = "Stretch" />
             <Setter Property = "BorderBrush" Value = "Transparent" />
             <Setter Property = "BorderThickness" Value = "1" />
             <Setter Property = "Template">
                 <Setter.Value>
                     <ControlTemplate TargetType = "{x: Type Expander}">
                         <Border BorderBrush = "{TemplateBinding BorderBrush}" BorderThickness = "{TemplateBinding BorderThickness}" Background = "{TemplateBinding Background}" CornerRadius = "3" SnapsToDevicePixels = "true">
                             <DockPanel>
                                 <ToggleButton x: Name = "HeaderSite" ContentTemplate = "{TemplateBinding HeaderTemplate}" ContentTemplateSelector = "{TemplateBinding HeaderTemplateSelector}" Content = "{TemplateBinding Header}" DockPanel.Dock = "Top" Foreground = "{TemplateBinding Foreground}" FontWeight "{TemplateBinding FontWeight}" FocusVisualStyle = "{StaticResource ExpanderHeaderFocusVisual}" FontStyle = "{TemplateBinding FontStyle}" FontStretch = "{TemplateBinding FontStretch}" FontSize = "{TemplateBinding FontSize}" {FontFamily =} TemplateBinding HorizontalContentAlignment} "IsChecked =" {Binding IsExpanded, Mode = TwoWay, RelativeSource = {RelativeSource TemplatedParent}} "Margin =" 1 "MinWidth =" 0 "MinHeight =" 0 "Padding =" {TemplateBinding Padding} "Style =" { StaticResource ExpanderDownHeaderStyle} "VerticalContentAlignment =" {TemplateBinding VerticalContentAlignment} "/>
                                 <ContentPresenter x: Name = "ExpandSite" DockPanel.Dock = "Bottom" Focusable = "false" HorizontalAlignment = "{TemplateBinding HorizontalContentAlignment}" Margin = "{TemplateBinding Padding}" Visibility = "Collapsed" VerticalAlignment = "{TemplateBinding VerticalContentAlignment}" />
                             </DockPanel>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property = "IsExpanded" Value = "true">
                                 <Setter Property = "Visibility" TargetName = "ExpandSite" Value = "Visible" />
                             </Trigger>
                             <Trigger Property = "ExpandDirection" Value = "Right">
                                 <Setter Property = "DockPanel.Dock" TargetName = "ExpandSite" Value = "Right" />
                                 <Setter Property = "DockPanel.Dock" TargetName = "HeaderSite" Value = "Left" />
                                 <Setter Property = "Style" TargetName = "HeaderSite" Value = "{StaticResource ExpanderRightHeaderStyle}" />
                             </Trigger>
                             <Trigger Property = "ExpandDirection" Value = "Up">
                                 <Setter Property = "DockPanel.Dock" TargetName = "ExpandSite" Value = "Top" />
                                 <Setter Property = "DockPanel.Dock" TargetName = "HeaderSite" Value = "Bottom" />
                                 <Setter Property = "Style" TargetName = "HeaderSite" Value = "{StaticResource ExpanderUpHeaderStyle}" />
                             </Trigger>
                             <Trigger Property = "ExpandDirection" Value = "Left">
                                 <Setter Property = "DockPanel.Dock" TargetName = "ExpandSite" Value = "Left" />
                                 <Setter Property = "DockPanel.Dock" TargetName = "HeaderSite" Value = "Right" />
                                 <Setter Property = "Style" TargetName = "HeaderSite" Value = "{StaticResource ExpanderLeftHeaderStyle}" />
                             </Trigger>
                             <Trigger Property = "IsEnabled" Value = "false">
                                 <Setter Property = "Foreground" Value = "{DynamicResource {x: Static SystemColors.GrayTextBrushKey}}" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style x: Key = "ExpanderWithDifferentFocusRectagle" TargetType = "{x: Type Expander}">
             <Setter Property = "Foreground" Value = "{DynamicResource {x: Static SystemColors.ControlTextBrushKey}}" />
             <Setter Property = "Background" Value = "Transparent" />
             <Setter Property = "HorizontalContentAlignment" Value = "Stretch" />
             <Setter Property = "VerticalContentAlignment" Value = "Stretch" />
             <Setter Property = "BorderBrush" Value = "Transparent" />
             <Setter Property = "BorderThickness" Value = "1" />
             <Setter Property = "Template">
                 <Setter.Value>
                     <ControlTemplate TargetType = "{x: Type Expander}">
                         <Border BorderBrush = "{TemplateBinding BorderBrush}" BorderThickness = "{TemplateBinding BorderThickness}" Background = "{TemplateBinding Background}" CornerRadius = "3" SnapsToDevicePixels = "true">
                             <DockPanel>
                                 <ToggleButton x: Name = "HeaderSite" ContentTemplate = "{TemplateBinding HeaderTemplate}" ContentTemplateSelector = "{TemplateBinding HeaderTemplateSelector}" Content = "{TemplateBinding Header}" DockPanel.Dock = "Top" Foreground = "{TemplateBinding Foreground}" FontWeight "{TemplateBinding FontWeight}" FocusVisualStyle = "{StaticResource ExpanderHeaderFocusVisual}" FontStyle = "{TemplateBinding FontStyle}" FontStretch = "{TemplateBinding FontStretch}" FontSize = "{TemplateBinding FontSize}" {FontFamily =} TemplateBinding HorizontalContentAlignment} "IsChecked =" {Binding IsExpanded, Mode = TwoWay, RelativeSource = {RelativeSource TemplatedParent}} "Margin =" 1 "MinWidth =" 0 "MinHeight =" 0 "Padding =" {TemplateBinding Padding} "Style =" { StaticResource ExpanderDownHeaderStyle} "VerticalContentAlignment =" {TemplateBinding VerticalContentAlignment} "/>
                                 <ContentPresenter x: Name = "ExpandSite" DockPanel.Dock = "Bottom" Focusable = "false" HorizontalAlignment = "{TemplateBinding HorizontalContentAlignment}" Margin = "{TemplateBinding Padding}" Visibility = "Collapsed" VerticalAlignment = "{TemplateBinding VerticalContentAlignment}" />
                             </DockPanel>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property = "IsExpanded" Value = "true">
                                 <Setter Property = "Visibility" TargetName = "ExpandSite" Value = "Visible" />
                             </Trigger>
                             <Trigger Property = "ExpandDirection" Value = "Right">
                                 <Setter Property = "DockPanel.Dock" TargetName = "ExpandSite" Value = "Right" />
                                 <Setter Property = "DockPanel.Dock" TargetName = "HeaderSite" Value = "Left" />
                               <Setter Property = "Style" TargetName = "HeaderSite" Value = "{StaticResource ExpanderRightHeaderStyle}" />
                             </Trigger>
                             <Trigger Property = "ExpandDirection" Value = "Up">
                                 <Setter Property = "DockPanel.Dock" TargetName = "ExpandSite" Value = "Top" />
                                 <Setter Property = "DockPanel.Dock" TargetName = "HeaderSite" Value = "Bottom" />
                                 <Setter Property = "Style" TargetName = "HeaderSite" Value = "{StaticResource ExpanderUpHeaderStyle}" />
                             </Trigger>
                             <Trigger Property = "ExpandDirection" Value = "Left">
                                 <Setter Property = "DockPanel.Dock" TargetName = "ExpandSite" Value = "Left" />
                                 <Setter Property = "DockPanel.Dock" TargetName = "HeaderSite" Value = "Right" />
                                 <Setter Property = "Style" TargetName = "HeaderSite" Value = "{StaticResource ExpanderLeftHeaderStyle}" />
                             </Trigger>
                             <Trigger Property = "IsEnabled" Value = "false">
                                 <Setter Property = "Foreground" Value = "{DynamicResource {x: Static SystemColors.GrayTextBrushKey}}" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </Window.Resources> `
+2
source

Try changing FocusVisualStyle not only for Expander, but also for its parts of the template, for example. change the template with Blend and see which parts of the template also have a focus style.

0
source

I had the same problem.

The solution that worked for me is to handle the PreviewGotKeyboardFocus event

  private void Expander_PreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e) { e.Handled = true; }
0
source

The OP is unlikely to be interested, but if someone else ...

Here is an alternative approach. I wrapped the visual tree in the extension method and set the FocusVisualStyle ToggleButtons parameter to null. The only ToggleButtons in my application are in Expanders, but I think you could look for Expanders if you want.

I call this.RemoveFocusVisualStyleFromAllExpanders () in the Loaded event of my window.

 public static class WindowExtensions { public static void RemoveFocusVisualStyleFromAllExpanders(this Window window) { RecursivelyDelveVisualTreeRemovingFocusVisualStyleFromToggleButtons(window); } private static void RecursivelyDelveVisualTreeRemovingFocusVisualStyleFromToggleButtons(DependencyObject d) { var count = VisualTreeHelper.GetChildrenCount(d); for (int i = 0; i < count; i++) { var child = VisualTreeHelper.GetChild(d, i); var toggleButton = child as ToggleButton; if (toggleButton != null) { toggleButton.FocusVisualStyle = null; } else { RecursivelyDelveVisualTreeRemovingFocusVisualStyleFromToggleButtons(child); } } } }
0
source

More articles:


All Articles