输入@时在文本框中弹出上下文菜单

Question

I am trying to build a chat application, I would like to mimic facebook tag friends functionality. When the user types @ in the textblock, I want to pop a context menu with a list of items. How can this be triggered in wpf mvvm app?

Example.

Answer 1

I would do it the following way :

Subscribe to the TextChanged event and whenever there is a change that contains @ then show the popup, otherwise hide it.

Note that it tracks for new changes in the TextBox, therefore the popup will disappear as soon as the user presses another key or in your case when the user selected a user from the auto-completion you have provided in the pop-up.

User hasn't typed @

User just typed @

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Popup x:Name="MyPopup" Placement="Center">
            <Popup.Child>
                <Border BorderBrush="Red" BorderThickness="1" Background="White">
                    <Grid>
                        <TextBlock>My popup</TextBlock>
                    </Grid>
                </Border>
            </Popup.Child>
        </Popup>
        <TextBox TextChanged="TextBoxBase_OnTextChanged" />
    </Grid>
</Window>

Code behind:

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication11
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void TextBoxBase_OnTextChanged(object sender, TextChangedEventArgs e)
        {
            var textBox = (TextBox) sender;
            foreach (TextChange textChange in e.Changes)
            {
                string substring = textBox.Text.Substring(textChange.Offset, textChange.AddedLength);
                if (substring == "@")
                {
                    MyPopup.IsOpen = true;
                }
                else
                {
                    MyPopup.IsOpen = false;
                }
            }
        }
    }
}

That said, you might want to further enhance it and integrate it properly your application ;-)