Question

I have a textbox that is on the same screen as a listbox. When I remove an item from the listbox, which is bound to an observable collection, the textbox gains focus. Is there a way to stop this from happening?

I am using MVVM but am open to putting some code in the code behind if it fixes this problem.

EDIT:

CodeBehind View:

namespace Offload.WinPhone.Views
{
using System.Windows.Controls;
using Microsoft.Phone.Controls;

public partial class MainPageView : PhoneApplicationPage
{
    public MainPageView()
    {
        InitializeComponent();
    }

    private void QuickNoteBodyEditor_TextChanged(object sender, TextChangedEventArgs e)
    {
        var senderAsTextbox = (TextBox)sender;

        if (senderAsTextbox.Text.Length == 0)
            this.Focus();
    }
}

}

View:

<Grid x:Name="LayoutRoot" Background="Transparent" Margin="12,0,12,0">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock Text="OFFLOAD" FontFamily="Segoe WP Bold" Grid.Row="0"/>

    <ListBox x:Name="QuickNotes" Grid.Row="1" TabIndex="1">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="0,5,0,5" Orientation="Vertical">
                    <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" TextWrapping="Wrap" Text="{Binding Body}"/>
                    <TextBlock Style="{StaticResource PhoneTextAccentStyle}" Text="{Binding Timestamp, StringFormat='{}{0:dd MMM HH:mm}'}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>  
    </ListBox>

    <TextBox x:Name="QuickNoteBodyEditor" AcceptsReturn="True" Grid.Row="2" InputScope="Chat" TextChanged="QuickNoteBodyEditor_TextChanged" IsTabStop="True" />

</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

        <shell:ApplicationBar.Buttons>
            <cal:AppBarButton IconUri="/AppFramework/Resources/Icons/Add.png" Text="Add" Message="AddQuickNote" />
            <cal:AppBarButton IconUri="/AppFramework/Resources/Icons/Delete.png" Text="Delete" Message="DeleteSelectedQuickNote" />
        </shell:ApplicationBar.Buttons>

        <shell:ApplicationBar.MenuItems>
            <cal:AppBarMenuItem Text="About" Message="NavigateToAddAccountView"/>
            <cal:AppBarMenuItem Text="Review" Message="NavigateToAddAccountView"/>
        </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

ViewModel:

public class MainPageViewModel : PropertyChangedBase
{
    private ObservableCollection<QuickNote> quickNotes;
    private string quickNoteBodyEditor;
    private QuickNote selectedQuickNote;

    // Databound Properties

    public string QuickNoteBodyEditor 
    {
        get { return quickNoteBodyEditor; }
        set { quickNoteBodyEditor = value; NotifyOfPropertyChange(() => QuickNoteBodyEditor); NotifyOfPropertyChange(() => CanAddQuickNote);}
    }

    public QuickNote SelectedQuickNote
    {
        get { return selectedQuickNote; }
        set { selectedQuickNote = value; NotifyOfPropertyChange(() => SelectedQuickNote); NotifyOfPropertyChange(() => CanDeleteSelectedQuickNote); }
    }

    public ObservableCollection<QuickNote> QuickNotes
    {
        get { return quickNotes; }
        set { quickNotes = value; NotifyOfPropertyChange(() => QuickNotes); }
    }

    // Guard Clauses

    public bool CanAddQuickNote 
    {
        get { return !string.IsNullOrWhiteSpace(quickNoteBodyEditor); } 
    }

    public bool CanDeleteSelectedQuickNote
    {
        get{ return selectedQuickNote == null ? false : true; }
    }

    // Constructors

    public MainPageViewModel()
    {
        GetQuickNotesFromIsolatedStorage();
        WatchWhatsGotFocus.StartWatching();
    }

    // Public Methods

    public void AddQuickNote()
    {
        if (CanAddQuickNote)
        {
            quickNotes.Add(new QuickNote(quickNoteBodyEditor, DateTime.Now));
            AddQuickNotesToIsolatedStorage();

            quickNoteBodyEditor = string.Empty;

            NotifyOfPropertyChange(() => QuickNoteBodyEditor);
            NotifyOfPropertyChange(() => QuickNotes);
        }
    }

    public void DeleteSelectedQuickNote()
    {
        if (CanDeleteSelectedQuickNote)
        {
            quickNotes.Remove(selectedQuickNote);
            AddQuickNotesToIsolatedStorage();

            selectedQuickNote = null;

            NotifyOfPropertyChange(() => SelectedQuickNote);
            NotifyOfPropertyChange(() => QuickNotes);
        }
    }

    private void GetQuickNotesFromIsolatedStorage()
    {
        quickNotes = IsolatedStorage.Get<ObservableCollection<QuickNote>>("QuickNoteList");
    }

    private void AddQuickNotesToIsolatedStorage()
    {
        IsolatedStorage.Add("QuickNoteList", quickNotes);
    }
}

Answer 1

I had the same issue, a possible solution is to set the TextBox to disabled before modifying your collection and enable it afterwards again:

TextBox.IsEnabled = false;
ObservableCollection.Remove(object);
TextBox.IsEnabled = true;

I wouldn’t call it a clean approach, but it worked for me :).