ComboBox Selection Behavoir - Cursor not lined up with selection

gary hengeveld 41 Reputation points
2021-03-13T17:57:31.48+00:00

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

Universal Windows Platform (UWP)
{count} votes

Accepted answer
  1. Yan Gu - MSFT 2,671 Reputation points
    2021-03-29T09:53:22.92+00:00

    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.


4 additional answers

Sort by: Most helpful
  1. gary hengeveld 41 Reputation points
    2021-03-21T03:20:08.65+00:00

    @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


  2. 2021-03-21T03:27:01.183+00:00
    No comments

  3. gary hengeveld 41 Reputation points
    2021-03-26T15:03:20.28+00:00

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

    RaJl8iGoS8o

    No comments

  4. gary hengeveld 41 Reputation points
    2021-03-30T05:57:47.38+00:00

    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.