关于UWP应用WebView权限请求弹窗UI自定义的技术问询

Great question—this is a common pain point when building accessible UWP apps with WebView, especially when supporting assistive tech like eye-tracking devices. The default system permission dialogs aren’t directly stylable out of the box, but we can work around this by intercepting permission requests and building our own fully customizable, accessibility-friendly UI. Here’s how to implement this step-by-step:

1. Intercept the WebView's Permission Request #

WebView exposes a PermissionRequested event that fires whenever the loaded webpage asks for special permissions (microphone, camera, location, etc.). This is your hook to take over from the system dialog.

First, register the event in your XAML or code-behind:

XAML Example #

<WebView x:Name="MyWebView" 
         Source="https://web.skype.com"
         PermissionRequested="MyWebView_PermissionRequested" />

Code-Behind Event Handler #

In your page's code, handle the event and cancel the default system dialog to take control:

private async void MyWebView_PermissionRequested(WebView sender, WebViewPermissionRequestedEventArgs args)
{
    // Cancel the default system dialog so we can show our own
    args.Handled = true;

    // Identify the type of permission being requested
    var permissionType = args.PermissionRequest.PermissionType;
    string permissionName = permissionType switch
    {
        WebViewPermissionType.Media => "microphone and camera",
        WebViewPermissionType.Geolocation => "location",
        _ => permissionType.ToString()
    };

    // Show your custom permission dialog
    bool allowPermission = await ShowCustomPermissionDialog(permissionName);

    // Act based on the user's choice
    if (allowPermission)
    {
        args.PermissionRequest.Allow();
    }
    else
    {
        args.PermissionRequest.Deny();
    }
}

2. Build an Accessible Custom Permission Dialog #

For users relying on eye-tracking or other assistive tech, your custom dialog must meet accessibility standards. Use a ContentDialog (built for accessibility) and optimize it for ease of use:

private async Task<bool> ShowCustomPermissionDialog(string permissionName)
{
    var dialog = new ContentDialog
    {
        Title = "Permission Request",
        Content = $"This website needs access to your {permissionName} to function properly. Allow access?",
        PrimaryButtonText = "Allow",
        SecondaryButtonText = "Deny",
        // Ensure the dialog is accessible via assistive tech
        XamlRoot = this.XamlRoot
    };

    // Optimize for eye-tracking: use large button hit areas and clear focus states
    dialog.PrimaryButtonStyle = (Style)Application.Current.Resources["LargeButtonStyle"];
    dialog.SecondaryButtonStyle = (Style)Application.Current.Resources["LargeButtonStyle"];

    var result = await dialog.ShowAsync();
    return result == ContentDialogResult.Primary;
}

Key Accessibility Tips for Eye-Tracking: #

• Large, Targetable Controls: Use button styles with a minimum 48x48px hit area (the Windows accessibility standard) to make eye selection easier.
• Clear Focus Visuals: Ensure focus states are high-contrast and obvious, so users can see which element their eye cursor is targeting.
• Keyboard Navigation: Make sure all dialog elements are reachable via Tab/Shift+Tab, as eye-tracking users often combine keyboard input with eye control.
• Screen Reader Support: Add AutomationProperties labels if needed, so screen readers can clearly announce the dialog's purpose.

3. Verify Manifest Capabilities #

Don’t forget you still need to declare the required capabilities in your Package.appxmanifest (you mentioned you already did this, but it’s worth confirming for completeness):

<Capabilities>
    <Capability Name="internetClient" />
    <DeviceCapability Name="microphone" />
    <DeviceCapability Name="webcam" />
    <DeviceCapability Name="location" />
</Capabilities>

4. Persist User Choices (Optional) #

For a better user experience, save the user’s permission decision so you don’t ask them every time they visit the site. Use ApplicationData.Current.LocalSettings to store preferences:

// Save the user's choice
ApplicationData.Current.LocalSettings.Values[$"Allow{permissionType}"] = allowPermission;

// Retrieve the saved choice later to skip repeated requests
if (ApplicationData.Current.LocalSettings.Values.TryGetValue($"Allow{permissionType}", out var savedValue) && (bool)savedValue)
{
    args.PermissionRequest.Allow();
    return;
}

This approach gives you full control over the UI, ensuring it’s usable for all your users—including those with eye-tracking or other accessibility needs.

内容的提问来源于stack exchange，提问作者J Nelson