Remove the dotted line from the controls!

Question

How do you change the look of the dotted line that appears when you modify a control's control template?

For example, modifying a ListBox and ListBoxItem, when you selected an item, the border of an item is the dotted black and white line.

Does anyone know how to change it?

Thanks,

Jaco

 

Answer 1

I presume it is because of the focus. Can you set Focusable="false" on the panel from the ListBoxItem template?

Answer 2

The dotted lines is a FocusVisual. You can get rid of the FocusVisualStyle by setting FocusVisualStyle="{x:Null}" or customize it. I happen to have a sample page on hand that works on the February CTP release:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <Style x:Key="CustomFocusVisualStyle" TargetType="{x:Type Control}">
          <Setter Property="Control.Template">
            <Setter.Value>
              <ControlTemplate>

                <ControlTemplate.Triggers>
                  <EventTrigger RoutedEvent="Control.Loaded">
                    <EventTrigger.Actions>
                      <BeginStoryboard>
                        <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.3"/>
                          <DoubleAnimation Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity" To=".25" BeginTime="0:0:0.3" Duration="0:0:1" AutoReverse="true" RepeatBehavior="Forever"/>
                          <DoubleAnimation Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="RenderTransform.ScaleX" From="0" To="1" Duration="0:0:0.4"/>
                          <DoubleAnimation Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:0:0.4"/>
                        </Storyboard>
                      </BeginStoryboard>
                    </EventTrigger.Actions>
                  </EventTrigger>
                </ControlTemplate.Triggers>

                <Grid>
                  <Border x:Name="OuterBorder" CornerRadius="10" BorderBrush="Gold" BorderThickness="4" Margin="-10">
                      <Border.RenderTransform>
                         <ScaleTransform CenterX="100" CenterY="25" ScaleX="1" ScaleY="1"/>
                      </Border.RenderTransform>
                  </Border>
                </Grid>

              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>

        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
  <Setter Property="Width" Value="200"/>
  <Setter Property="Height" Value="50"/>
  <Setter Property="Margin" Value="10"/>
  <Setter Property="Content" Value="Hello world"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource CustomFocusVisualStyle}"/>
        </Style>
    </Page.Resources>

    <StackPanel>
 <Button Style="{StaticResource ButtonStyle}"/>
 <Button Style="{StaticResource ButtonStyle}"/>
 <Button Style="{StaticResource ButtonStyle}"/>
    </StackPanel>

</Page>

Answer 3

Hi there,

 

I have tried setting FocusVisualStyle="{x:Null}" on page elements, however it does nothing at all?

Is there another way to hide the focus from the user?

 

Cheers,

 

Justin