question

MageshSankar-9134 avatar image
2 Votes"
MageshSankar-9134 asked ·

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

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: 7511-microsoftteams-image-9.png

Please suggest solution to resolve this.

wpf
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlexLi-MSFT avatar image
0 Votes"
AlexLi-MSFT answered ·

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.

· 2 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi AlexLi,

For Problem 2, if we set BorderThickness as 0 the reported space issue resolves. But, i need to show the border around the grid can you please provide any other alternative solutions?

Thanks

0 Votes 0 · ·
AlexLi-MSFT avatar image AlexLi-MSFT MageshSankar-9134 ·

I tested your code,but there is no blank space shows.

0 Votes 0 · ·
LloydSheen-3317 avatar image
0 Votes"
LloydSheen-3317 answered ·

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>
· 1 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

This is my complete xaml

Blockquote

<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>

Blockquote

0 Votes 0 · ·