Сегментированное текстовое поле в WPF - PullRequest
Новая
       13

Сегментированное текстовое поле в WPF

5 голосов
/ 23 января 2011

Кто-нибудь знает о бесплатном или коммерческом элементе управления WPF, который будет делать что-то вроде этого:

alt text

X символов в каждом блоке и автоматическое переключение на следующий блок призаполнить каждую коробку?Подобно тому, как лицензионные ключи вводятся для продуктов Microsoft.

Я не думаю, что это было бы особенно трудно сделать с нуля, но я бы хотел избежать повторного изобретения колеса, если хорошим примером этого являетсяуже существует.

1 Ответ

4 голосов
/ 23 января 2011

WPF предоставляет все, что вам нужно, кроме автоматического перехода к следующему элементу управления. Поведение может обеспечить эту функциональность, и результат выглядит следующим образом: 

<Grid>
    <Grid.Resources>
        <local:KeyTextCollection x:Key="keys"/>
    </Grid.Resources>
    <StackPanel>
        <ItemsControl ItemsSource="{StaticResource keys}" Focusable="False">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" Background="AliceBlue"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Text}" Margin="5" MaxLength="4" Width="40">
                        <i:Interaction.Behaviors>
                            <local:TextBoxBehavior AutoTab="True" SelectOnFocus="True"/>
                        </i:Interaction.Behaviors>
                    </TextBox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Grid>

Вот классы KeyText и KeyTextCollection (настроить по вкусу): 

class KeyText
{
    public string Text { get; set; }
}

class KeyTextCollection : List<KeyText>
{
    public KeyTextCollection()
    {
        for (int i = 0; i < 4; i++) Add(new KeyText { Text = "" });
    }
}

А вот поведение, которое реализует автоматическую вкладку и выбор по фокусу: 

public class TextBoxBehavior : Behavior<TextBox>
{
    public bool SelectOnFocus
    {
        get { return (bool)GetValue(SelectOnFocusProperty); }
        set { SetValue(SelectOnFocusProperty, value); }
    }

    public static readonly DependencyProperty SelectOnFocusProperty = 
        DependencyProperty.Register("SelectOnFocus", typeof(bool), typeof(TextBoxBehavior), new UIPropertyMetadata(false));

    public bool AutoTab
    {
        get { return (bool)GetValue(AutoTabProperty); }
        set { SetValue(AutoTabProperty, value); }
    }

    public static readonly DependencyProperty AutoTabProperty =
        DependencyProperty.Register("AutoTab", typeof(bool), typeof(TextBoxBase), new UIPropertyMetadata(false));

    protected override void OnAttached()
    {
        AssociatedObject.PreviewGotKeyboardFocus += (s, e) =>
        {
            if (SelectOnFocus)
            {
                Action action = () => AssociatedObject.SelectAll();
                AssociatedObject.Dispatcher.BeginInvoke(action, DispatcherPriority.ContextIdle);
            }
        };
        AssociatedObject.TextChanged += (s, e) =>
        {
            if (AutoTab)
            {
                if (AssociatedObject.Text.Length == AssociatedObject.MaxLength &&
                    AssociatedObject.SelectionStart == AssociatedObject.MaxLength)
                {
                    AssociatedObject.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
                }
            }
        };
    }
}

Если вы не знакомы с поведением, установите Expression Blend 4 SDK и добавьте следующие пространства имен: 

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

и добавьте System.Windows.Interactivity к своему проекту.

...