question

garyhengeveld-9763 avatar image
0 Votes"
garyhengeveld-9763 asked YanGu-MSFT commented

ComboBox Selection Behavoir - Cursor not lined up with selection

As you can see from the picture I included. when attempting to select 'Dessert' in this example. the mouse courser doesn't line up with the item I am selecting. In fact my arrow is completely off the combobox just to select 'dessert'. How can I fix this.


77443-comboboxhelp.jpg


windows-uwp
comboboxhelp.jpg (474.5 KiB)
· 2
5 |1600 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.

@garyhengeveld-9763 I’m little confused about your description. Usually, the blue rectangle represents the current selected item in a ComboBox control, and the gray rectangle represents the item over which the pointer is hovering. Could you please tell me if you have clicked the target item when your pointer hovers over the item Dessert to select the item? It is better to share us some code about the ComboBox control if there is any operation on it. A last question is that are you using a UWP project?


0 Votes 0 ·

@garyhengeveld-9763 Could you please tell if your problem has been resolved?

0 Votes 0 ·
YanGu-MSFT avatar image
0 Votes"
YanGu-MSFT answered YanGu-MSFT commented

Hello,

Welcome to Microsoft Q&A.

Yes, in your scenario, it is the ViewBox control causing the problem. You need to set the Viewbox.Stretch property as None.

Here is the explaination.

A Viewbox control is used to define a content decorator(here is the ComboBox control) that can stretch and scale a single child to fill the available space. Viewbox.Stretch property determines how content fits into the available, the default is Uniform. You could try to get the actual width of the ComboBox control. In your code, its value is 64, which is smaller than the Width value(the value is 100 in your code) set for the Viewbox control. Threrefore, with the default Stretch property as Uniform, the size of the ComboBox control will be magnified proportionally, which causes the misalignment of the pointer.

To fix the problem, just set the value of Stretch property as None so that we could avoid the scaling of the ComboBox control. By testing, in your code, you could also try to set the value of Margin property of ComboBox control as 20(the value is not fixed, basing on specific scenario) to offset the misalignment.

Update:

If you want to use the scaling function of the Viewbox control, there is a workaround to fix the misalignment of the pointer in the scenario. You could try to set a very small rotation transform on the Viewbox control. The very small rotation won’t have any visible effect on screen.

For example:

   <Viewbox Width="100" >
         <Viewbox.RenderTransform>
             <RotateTransform Angle="0.0001"/>
         </Viewbox.RenderTransform>
         <ComboBox x:Name="CbTest" >
             <ComboBoxItem Content="a"/>
             <ComboBoxItem Content="b"/>
             <ComboBoxItem Content="c"/>
             <ComboBoxItem Content="d"/>
             <ComboBoxItem Content="e"/>
             <ComboBoxItem Content="f"/>
         </ComboBox>
     </Viewbox>



If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 1
5 |1600 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.

@garyhengeveld-9763 The misalignment of pointer on a ComboBox control within a Viewbox control is an issue which has been reported in GitHub.

0 Votes 0 ·
garyhengeveld-9763 avatar image
0 Votes"
garyhengeveld-9763 answered YanGu-MSFT edited

@YanGu-MSFT To answer your Question. If I put the mouse pointer directly over 'Dessert' and click it will not select dessert. If I click the mouse with the cursor exactly where it is in the picture above it will Click 'Dessert' the mouse does not correspond with the actual selection.

I determined the following - The problem is caused by a <ViewBox>. I was using <ViewBox> to make the page dynamically change size for whatever size the window is. However when This happens Viewbox screws up the mouse location.

If you add the following code to a project you will see what I mean:

     <Viewbox Width="100">
             <ComboBox x:Name="CbTest">
                 <ComboBoxItem Content="a"/>
                 <ComboBoxItem Content="b"/>
                 <ComboBoxItem Content="c"/>
                 <ComboBoxItem Content="d"/>
                 <ComboBoxItem Content="e"/>
                 <ComboBoxItem Content="f"/>
             </ComboBox>
         </Viewbox>


Any thoughts as to how to overcome this

· 1
5 |1600 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.

@garyhengeveld-9763 I have tested the code in my machine and it works fine. You could try to test the code in another machine to determine if the problem is related to your machine.

0 Votes 0 ·
httpskhabazianacademycom-9355 avatar image
0 Votes"
httpskhabazianacademycom-9355 answered httpskhabazianacademycom-9355 edited
5 |1600 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.

garyhengeveld-9763 avatar image
0 Votes"
garyhengeveld-9763 answered garyhengeveld-9763 edited

@YanGu-MSFT
Here's a video to show what's going on

RaJl8iGoS8o


5 |1600 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.

garyhengeveld-9763 avatar image
0 Votes"
garyhengeveld-9763 answered YanGu-MSFT edited

If I set Viewbox stretch to none. that Defeats the purpose of using Viewbox in the first place. The object is to use viewbox to resize the content to keep it all viewable regardless of how large or small the windows is made by the user. If I set it to none then nothing is resized and I may as well just use grid or stack panel.

While viewbox does an excellent job of resizing (Scaling) the view. listboxes, comboboxes, and gridviews tend to lose their ability to stay synced with the pointer. Setting the Margin only helps if the combo box is the only control in the viewbox. it does nothing if the viewbox is inside of a stackpanel or grid.



· 3
5 |1600 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.

@garyhengeveld-9763 There is a workaround to fix the misalignment of the pointer in the scenario. You could try to set a very small rotation transform on the Viewbox control. The very small rotation won’t have any visible effect on screen.

For example:

   <Viewbox Width="100" >
         <Viewbox.RenderTransform>
             <RotateTransform Angle="0.0001"/>
         </Viewbox.RenderTransform>
         <ComboBox x:Name="CbTest" >
             <ComboBoxItem Content="a"/>
             <ComboBoxItem Content="b"/>
             <ComboBoxItem Content="c"/>
             <ComboBoxItem Content="d"/>
             <ComboBoxItem Content="e"/>
             <ComboBoxItem Content="f"/>
         </ComboBox>
     </Viewbox>





0 Votes 0 ·

This works Perfectly! Thank you so much! I wish I could mark this as the answer but the system is not giving me a button to mark this comment as the answer.

0 Votes 0 ·

@garyhengeveld-9763 I'm glad the approach could be helpful for you. I have add the content of the comment as an Update to the previous answer which you could mark.

0 Votes 0 ·