ComboBox Selection Behavoir - Cursor not lined up with selection

Question

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.

Answer 1

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.

Answer 2

@Yan Gu - 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

Answer 3

Hi wery good .
thanks.
آموزشگاه زبان انگلیسی در اصفهان

Answer 4

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

RaJl8iGoS8o

Answer 5

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.