How to set focus on a primary button in an Input Dialog box in UWP?

Question

So, i have created a input dialog box whose code is -

private async Task<string> InputTextDialogAsync1_pswd(string title)
{
            PasswordBox inputTextBox = new PasswordBox();
            //inputTextBox.AcceptsReturn = false;
            inputTextBox.Height = 32;
            ContentDialog dialog = new ContentDialog();
            dialog.BorderBrush = new SolidColorBrush(Colors.LightSalmon);
            dialog.Foreground = new SolidColorBrush(Colors.Red);
            dialog.Content = inputTextBox;
            dialog.Title = title;
            dialog.IsSecondaryButtonEnabled = true;
            dialog.PrimaryButtonText = "OK";
            dialog.SecondaryButtonText = "Cancel";
            if (await dialog.ShowAsync() == ContentDialogResult.Primary)
                if (inputTextBox.Password != "")
                    return inputTextBox.Password;
                else
                    return ("xyz");
            else
                return ("xyz")
}

When this Input Dialog Box is displayed, I want the focus to be on the primary button which is 'OK'.

So how to set the focus on primary button in an Input Dialog Box ???

Please do provide the solution as soon as possible.

Answer 1

Hello,

Welcome to Microsoft Q&A!

First of all, your question is confusing. It seems that you are trying to let the customer input their password, But when you show a PasswordBox control, why do you want to make it lost focus?

Anyway, this is possible using a custom ContentDialog class. You can't directly get the Primary Button from the default ContentDialog class and make it focused so we need to create our own ContentDialog class. So here are the steps:

1) right-click your project in VS, add a new ContentDialog class by Add -> New Item. Remove the default definition of the Primary Button and Secondary Button and disable them.

2) put the PasswordBox control and buttons inside the ContentDialog class, change the layout as you want.

3) Define your own ContentDialogResult enum in the code behind and handle the button click events.

4) Make the OK button focused when inside the GotFocus Event.

I've made a simple demo about this and you could refer to the following code:

Xaml:

<ContentDialog  
    x:Class="TestInputFocus.CustomDialog"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:TestInputFocus"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    Title="TITLE"  
    IsPrimaryButtonEnabled="False"  
    IsSecondaryButtonEnabled="False"  
    >  


    <!-- remove the definition of default button  
    PrimaryButtonText="Button1"  
    SecondaryButtonText="Button2"  
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick"  
    SecondaryButtonClick="ContentDialog_SecondaryButtonClick"-->  

    <Grid Margin="0,20">  
        <Grid.RowDefinitions>  
            <RowDefinition Height="*"/>  
            <RowDefinition Height="200" />  
        </Grid.RowDefinitions>  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition />  
            <ColumnDefinition />  
        </Grid.ColumnDefinitions>  
        <PasswordBox x:Name="MyPasswordBox" Grid.ColumnSpan="2" Height="32" Margin="5"/>  

        <Button Grid.Row="1" Content="OK" x:Name="OKButton" Click="OKButton_Click" Margin="5,0" Width="100" />  
        <Button Grid.Row="1" Grid.Column="1" Content="Cancel" x:Name="CancelButton" Click="CancelButton_Click" Margin="5,0" Width="100" />  
    </Grid>  
</ContentDialog>  

Code behind of the custom ContentDialog:

 // Define your own ContentDialogResult enum  
    public enum CustomResult  
    {  
        OK,  
        Cancle,  
        Nothing  
    }  

    public sealed partial class CustomDialog : ContentDialog  
    {  

        public CustomResult _CustomResult { get; set; }  

        public CustomDialog()  
        {  
            this.InitializeComponent();  
            this.GotFocus += CustomDialog_GotFocus;  
            _CustomResult = CustomResult.Nothing;  
        }  

        private void CustomDialog_GotFocus(object sender, RoutedEventArgs e)  
        {  
           //make the button focused  
            OKButton.Focus(FocusState.Programmatic);  
        }  

        private void OKButton_Click(object sender, RoutedEventArgs e)  
        {  
            _CustomResult = CustomResult.OK;  
            // Close the dialog  
            this.Hide();  
        }  

        private void CancelButton_Click(object sender, RoutedEventArgs e)  
        {  
            _CustomResult = CustomResult.Cancle;  
            // Close the dialog  
            this.Hide();  
        }  
    }  

Usage in MainPage:

 CustomDialog dialog = new CustomDialog();  
            dialog.Title = "Test Dialog";  
            await dialog.ShowAsync();  

            // Use the returned custom result  
            if (dialog._CustomResult == CustomResult.OK)  
            {  
                // some logic  
            }  
            else if (dialog._CustomResult == CustomResult.Cancle)  
            {  
                // some logic  
            }  
            else if (dialog._CustomResult == CustomResult.Nothing)  
            {  
                // some logic  
            }  

Result:

Thank you.

---

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.