Control.UseSystemFocusVisuals Control.UseSystemFocusVisuals Control.UseSystemFocusVisuals Control.UseSystemFocusVisuals Property

Definition

Gets or sets a value that indicates whether the control uses focus visuals that are drawn by the system or those defined in the control template.

public : Platform::Boolean UseSystemFocusVisuals { get; set; }
bool UseSystemFocusVisuals();

void UseSystemFocusVisuals(bool usesystemfocusvisuals);
public bool UseSystemFocusVisuals { get; set; }
Public ReadWrite Property UseSystemFocusVisuals As bool

Property Value

bool bool

true if the control uses focus visuals drawn by the system; false if the control uses focus visuals defined in the ControlTemplate. The default is false; see Remarks.

Examples

This example shows a ControlTemplate that defines custom focus visuals for a Button.

Some elements of the control template aren't shown to make the relevant parts more clear. To see the full control template for Button, see Button styles and templates.

<Style TargetType="Button">
 
<!-- Set UseSystemFocusVisuals to false. -->
    <Setter Property="UseSystemFocusVisuals" Value="False"/> 
     ...

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                             ...

                            </VisualState>
                        </VisualStateGroup>

<!-- Add VisualStateGroup for FocusStates. -->
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="PointerFocused"/>
                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="3">
                        <ContentPresenter x:Name="ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          AutomationProperties.AccessibilityView="Raw"/>
                    </Border>

<!-- Add elements for focus visuals. -->
                    <Rectangle x:Name="FocusVisualWhite"
                               IsHitTestVisible="False"
                               Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="1.5"/>
                    <Rectangle x:Name="FocusVisualBlack"
                               IsHitTestVisible="False"
                               Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="0.5"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Remarks

This property is false by default so that a custom ControlTemplate that defines its own focus visuals works as expected. However, all XAML framework controls set this property to true in their ControlTemplate and use system drawn focus visuals.

To define custom focus visuals for a control, you need to provide a custom ControlTemplate. In the ControlTemplate, do the following:

  • If you're modifying a default ControlTemplate, be sure to set the UseSystemFocusVisuals property to false to turn off the system focus visuals. When set to false, the focus states in the VisualStateManager are called.
  • Define a VisualStateGroup for FocusStates.
  • In the FocusStates group, define VisualState s for Focused, Unfocused, and PointerFocused.
  • Define the focus visuals.

See also