Textbox is becoming readonly in flyout, UWP store app

Question

In button flyout I am using one usercontrol inside that I have textbox. when running the app the textbox is appearing as readonly, don't know why I am getting this issue. nowhere I am setting readonly.

<TextBox Margin="2" Height="32" 
                     MaxHeight="60"
                     TextWrapping="Wrap"
                     HorizontalAlignment="Stretch" 
                     TextAlignment="Left"
                     Text="ramesh"
                     Style="{x:Null}"/>

http://stackoverflow.com/questions/39096758/cant-enter-enter-text-in-textbox-control-inside-flyout — RTDev, Oct 12 '16 at 12:49
Your code works well in my side. How do you implement the flyout? Could you share a [mcve] that can reproduce your issue? — Jay Zuo, Oct 13 '16 at 07:38

score 2 · Accepted Answer · edited Dec 10 '18 at 06:29

Figure out the issue it's because of anniversary update.

https://blogs.msdn.microsoft.com/wsdevsol/2016/09/14/combobox-from-an-appbarbutton-loses-mouse-input-on-1607/

I created attached property for solution given in above link. Below is the attached property

public class CompatExtensions
{
    public static bool GetAllowFocusOnInteraction(DependencyObject obj)
    {
        return (bool)obj.GetValue(AllowFocusOnInteractionProperty);
    }
    public static void SetAllowFocusOnInteraction(DependencyObject obj, bool value)
    {
        obj.SetValue(AllowFocusOnInteractionProperty, value);
    }
    // Using a DependencyProperty as the backing store for AllowFocusOnInteraction.  
    // This enables animation, styling, binding, etc...
    public static readonly DependencyProperty AllowFocusOnInteractionProperty =
        DependencyProperty.RegisterAttached("AllowFocusOnInteraction", 
                                            typeof(bool),
                                            typeof(CompatExtensions),
                                            new PropertyMetadata(0, AllowFocusOnInteractionChanged));

    private static bool allowFocusOnInteractionAvailable = 
        Windows.Foundation.Metadata.ApiInformation.IsPropertyPresent(
            "Windows.UI.Xaml.FrameworkElement", 
            "AllowFocusOnInteraction");
    private static void AllowFocusOnInteractionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (allowFocusOnInteractionAvailable)
        {
            var element = d as FrameworkElement;
            if (element != null)
            {
                element.AllowFocusOnInteraction = (bool)e.NewValue;
            }
        }
    }
}

And an example of it used:

<AppBarButton local:CompatExtensions.AllowFocusOnInteraction="True" Icon="Setting">
    <AppBarButton.Flyout>
        <Flyout>
            <StackPanel Orientation="Vertical" >
                <ComboBox>
                    <ComboBoxItem Content="Red" IsSelected="True" />
                    <ComboBoxItem Content="Green" />
                    <ComboBoxItem Content="Blue"/>
                </ComboBox>
            </StackPanel>
        </Flyout>
    </AppBarButton.Flyout>
</AppBarButton>

you need to mark this as the answer. And Thank you!!! exactly what I was struggling with. — Dave Friedel, Dec 09 '18 at 23:36

score 0 · Answer 2 · answered Oct 12 '16 at 12:53

Difficult to be sure about any answer given how the few details have been provided but I once saw something similar due to sizing of the TextBox. The UWP text box has a "delete" button (a small cross) at the end of the box to delete the current content. When the TextBox was sized vertically, the delete button scaled to take up the entirety of the TextBox thereby making it look read only.

If you're facing a similar issue, try setting AcceptsReturn="True" and InputScope="Text" on the TextBox.

Textbox is becoming readonly in flyout, UWP store app

2 Answers2