Need to focus the grid which placed inside the Scroll Viewer on Mouse Click

Question

Problem 1:

I need to focus the Grid(UI Element) when it is placed inside the Scroll viewer.

Code:

   <ScrollViewer>  
           <Grid x:Name="RootGrid">  
               <Border   
                       Height="24"  
                       Width="300"  
                       Focusable="True"  
                       Background="White"  
                       BorderBrush="Silver"  
                       BorderThickness="1"  
                       SnapsToDevicePixels="True">  
                   <Grid Background="Red" Focusable="True" x:Name="ViewGrid">  
                   </Grid>  
               </Border>  
           </Grid>  
       </ScrollViewer>  

Problem Faced:

1.When I click the above control, scroll viewer is the focused element but i need Grid element needs to focused.
Please suggest solution to fix this.

Problem 2:

I have custom control. There is an unwanted white space was shown between border and grid in higher scaling like 125, 150 etc.,

Code

   <Grid x:Name="RootGrid">  
               <Border   
                       Height="24"  
                       Width="300"  
                       Focusable="True"  
                       Background="White"  
                       BorderBrush="Silver"  
                       BorderThickness="1"  
                       SnapsToDevicePixels="True">  
                   <Grid Background="Red" Focusable="True" x:Name="ViewGrid">  
                   </Grid>  
               </Border>  
           </Grid>  
       </ScrollViewer  

Image:

Please suggest solution to resolve this.

Answer 1

Welcome to our Microsoft Q&A platform!

Problem 1:

You can try to use FocusManager.FocusedElement:

 <ScrollViewer FocusManager.FocusedElement="{Binding ElementName=RootGrid}">
            <Grid x:Name="RootGrid" Width="200" Height="200" >

                <Border 
                    Height="24"
                    Width="300"
                    Focusable="True"
                    Background="White"
                    BorderBrush="Silver"
                    BorderThickness="1"
                    SnapsToDevicePixels="True">
                    <Grid Background="Red" Focusable="True" x:Name="ViewGrid">
                    </Grid>
                </Border>
            </Grid>
        </ScrollViewer>

Problem 2:

If you set BorderThickness="0",the white spack is still exists?

Thanks.

Answer 2

It would help if you would show the complete XAML. What you show is just part and makes it hard to use as a basis. When I try with what you show there is no white space as I used the following:

<Grid x:Name="RootGrid">
    <ScrollViewer>
        <Border 
                Height="24"
                Width="300"
                Focusable="True"
                Background="White"
                BorderBrush="Silver"
                BorderThickness="1"
                SnapsToDevicePixels="True">
            <Grid Background="Red" Focusable="True" x:Name="ViewGrid">
            </Grid>
        </Border>
    </ScrollViewer>
</Grid>