Displaying a focus rectangle around custom user control

Question

I created an ellipse as a UserControl with the code below:

<UserControl x:Class="PropertyGridTest.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">

        <Ellipse Name="myEllipse" Width="124" Height="117"></Ellipse>

</UserControl>

I then added the user control into my main application Window within a canvas like this:

<Canvas>            
            <sample:UserControl1 x:Name="myEllipse" Fill="Yellow" Stroke="Red"></sample:UserControl1>           
</Canvas>

I wish to be able to click the ellipse and make it appear selected (by displaying a focus rectangle around the shape).

Thanks.

Answer 1

Hi Tryxxo,

Create a FocusVisual style firstly, and then apply it to your Ellipse:

<Style x:Key="MyFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Ellipse StrokeThickness="6"
    Stroke="Black"
    StrokeDashArray="1 2"
    SnapsToDevicePixels="true"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 <Ellipse FocusVisualStyle="{DynamicResource MyFocusVisual}" Name="myEllipse" Width="124" Height="117"  Fill="Yellow" Stroke="Red" GotFocus="myEllipse_GotFocus" Focusable="True"></Ellipse>

For more information, you could refer to:

http://msdn.microsoft.com/en-us/library/ms744790.aspx

http://msdn.microsoft.com/en-us/library/bb613567.aspx

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi Sheldon. I've tried the code and it doesn't work. It seems the FocusVisualStyle works only for Keyboard focus not mouse. I got this from one of the links you posted: "Focus visual styles act only when the focus action was initiated by the keyboard."

It said another option is to use 'setters', but I'm still trying to understand how that works.