none
Set focus on Image Control

    Question

  • I am looking to set focus on an image control so that user can know that Image control is selected. I found following code from somewhere but I think its not working.


    <Window x:Class="Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="485" Width="494" xmlns:local="clr-namespace:WpfApplication1">
    
        <Window.Resources>
            <Style x:Key="MyFocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="-2" StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
    
    
        <Grid>
            <Image FocusVisualStyle="{StaticResource MyFocusVisual}" Name="img" Margin="43,50,35,12" Focusable="True" FocusManager.IsFocusScope="True" />
            <Button Height="18" Margin="91,15,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="119"></Button>
        </Grid>
    </Window>

    Gaurav Khanna
    Monday, December 21, 2009 6:46 PM

All replies

  • Hi Gaurav,

    it sure works for me with a couple of minor modifications:

    <Window x:Class="WpfTests.ImageFocus"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="485" Width="494" 
        xmlns:local="clr-namespace:WpfTests">
       <Window.Resources>
          <Style x:Key="MyFocusVisual">
             <Setter Property="Control.Template">
                <Setter.Value>
                   <ControlTemplate>
                      <Rectangle Margin="-2" StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
                   </ControlTemplate>
                </Setter.Value>
             </Setter>
          </Style>
       </Window.Resources>
       <Grid>
          <Grid.RowDefinitions>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Image FocusVisualStyle="{StaticResource MyFocusVisual}" 
                 Name="img" 
                 Margin="10" 
                 Focusable="True" 
                 FocusManager.IsFocusScope="True"
                 Source="/Resources/LoveParade.jpg"/>
          <Button VerticalAlignment="Top" 
                  Margin="10"
                  Grid.Row="1"
                  Content="Huh?"
                  HorizontalAlignment="Stretch"/>
       </Grid>
    </Window>
    

    You'll have to replace the image's Source with something available. But even if the image control doesn't contain any image at all (i.e. if you delete the Source-prop), you'll see the focus-indicator as a tiny little square.
    Cheers,
    Olaf
    Monday, December 21, 2009 6:55 PM
  • Thanks Olaf. The above code works when we get the focus from keyboard. I would also like to show the focus on Mouse. But I think FocusVisualStyle only works for keyboard focus. So is there other property for Mouse focus?
    Gaurav Khanna
    Tuesday, December 22, 2009 5:59 AM
  • Hi Gaurav,

    yes, FocusVisualStyle works for keyboard focus only. The only way I could think of in order to get this to work with FocusVisualStyle and the mouse would be a click-handler behind which you'd set the focus. However, I just did a couple of tests to do exactly that (thinking it should be pretty simple). It turns out that it isn't - if the click-handler is fired and I set the keyboard-focus to the image, the image will have the keyboard-focus, but it won't show the border. I tried everything I can think of (like setting the focus-scope, focused element, etc.) - to no avail. Maybe it is something simple after all, but I, for one, can't find it.

    Now, depending on what you want to achieve, I guess a different mechanism - such as a trigger - for visualizing the situation in which your image is selected for i.e. an operation might be the way to go then. A look at this MSDN article might help ...
    Cheers,
    Olaf
    Tuesday, December 22, 2009 11:12 AM
  • Thanks Olaf.
    I too tried to get focus by focusscope, focuselement etc but can't get the Image to get focus on mouse. I even tried Trigger, Keyboard.Focus(ImageName) method on MouseEnter event but  didn't work. Suprisingly GotFocus, IsMouseCapturedChanged and LostFocus event does not work on image control (and even not on border control).
    Currently the easiest way I can think of is to have a border around image and set border =1 when MouseEnter event is raised (as GotFocus,IsMouseCapturedChanged events doesn't work on border).  :)
    Gaurav Khanna
    Tuesday, December 22, 2009 5:59 PM
  • Hi Gaurav,

    you're probably right, but just why is it that I have a feeling that I'm missing out something about focusing stuff ..? :-)
    Cheers,
    Olaf
    Wednesday, December 23, 2009 8:20 AM