我如何在c#中检测触摸屏

Question

我想使用 Blazor 创建一个由两个列表组成的 Web 应用程序，每个列表包含不同的按钮。我想在触摸屏时隐藏按钮，并使用户可以使用触摸输入选择列表中的各个项目。 我是 Blazor 和编程的新手，非常感谢能够帮助我的人提供帮助。

这是两个列表的代码

<div class="grid grid-cols-2 gap-x-4 content-component-wrapper h-[500px]">
        <!-- Left Side -->
        <div class="bg-[#ddd] overflow-scroll">
            @for (int i = 0; i < Response.name.Count / 2; i++)
            {
                <div style="color:@Response.name[i].ForeColorHexCode; background-color:@Response.name[i].BackColorHexCode; @(selectedLeftRowIndex == i ? "border: 4px solid blue !important;" : "")"
                     class="p-4 m-2" id="left-row-@i">
                    <h4 class="text-lg font-semibold">@Response.name[i].GlobalName</h4>
                    <p>@Response.name[i].ID</p>
                </div>
            }
        </div>
        <!-- Right Side -->
        <div class="bg-[#ddd] overflow-scroll">
            @for (int i = Response.name.Count / 2; i < Response.name.Count; i++)
            {
                <div style="color:@Response.name[i].ForeColorHexCode; background-color:@Response.name[i].BackColorHexCode; @(selectedRightRowIndex == i ? "border: 4px solid blue !important;" : "")"
                     class="p-4 m-2" id="right-row-@i">
                    <h4 class="text-lg font-semibold">@Response.name[i].GlobalName</h4>
                    <p>@Response.name[i].ID</p>
                </div>
            }
        </div>
    </div>

<div class="flex justify-center space-x-4 md:space-x-6 lg:space-x-14 p-4 border-2 border-lightgray rounded-xl mb-8 mt-10">
        <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48 lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectLeftSideNextRow">
            <div class="flex flex-col items-center">
                <RadzenIcon Icon="arrow_downward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
                <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["Down"]</span>
            </div>
        </button>
        <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48 lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectLeftSidePreviousRow" >
            <div class="flex flex-col items-center">
                <RadzenIcon Icon="arrow_upward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
                <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["Up"]</span>
            </div>
        </button>
        <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
            <div class="flex flex-col items-center">
                <RadzenIcon Icon="lists" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
                <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["Show"]</span>
            </div>
        </button>
        <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
            <div class="flex flex-col items-center">
                <RadzenIcon Icon="hourglass_empty" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
                <span class="text-sm md:text-base lg:text-lg">@translationStore.Translations["History"]</span>
            </div>
        </button>
        <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectRightSideNextRow">
            <div class="flex flex-col items-center">
                <RadzenIcon Icon="arrow_downward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
                <span class="text-sm md:text-base lg:text-lg" >@translationStore.Translations["Down"]</span>
            </div>
        </button>
        <button class="flex items-center justify-center w-36 h-36 text-lg md:w-44 md:h-44 lg:w-48  lg:h-42 font-semibold bg-gold text-white rounded-xl p-4 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none" @onclick="SelectRightSidePreviousRow">
            <div class="flex flex-col items-center">
                <RadzenIcon Icon="arrow_upward" class="mb-2 text-xl md:text-2xl lg:text-3xl" />
                <span class="text-sm md:text-base lg:text-lg" >@translationStore.Translations["Up"]</span>
            </div>
        </button>
    </div>

Answer 1

要在 Blazor Web 应用程序中实现所需的功能，您可以使用条件渲染在触摸屏时隐藏按钮，并启用触摸输入来选择列表中的单个项目。具体方法如下： 1. 在组件中添加一个布尔属性来跟踪它是否是触摸屏。您可以使用

@inject

指令从

IJSRuntime

命名空间注入

IsType

服务和

jsinterop

方法来检查设备是否为触摸屏。

csharp @inject IJSRuntime JSRuntime @code { private bool isTouchScreen; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { isTouchScreen = await JSRuntime.InvokeAsync ("window.navigator.maxTouchPoints"); StateHasChanged(); } } } 

2. 更新按钮元素以根据是否是触摸屏进行条件渲染。

html  

3. 实现触摸输入功能以选择列表中的单个项目。您可以使用

@onpointerdown

事件来检测触摸输入并相应地更新所选项目。 ```html

csharp 私有无效SelectLeftSideItem（int索引） { selectedLeftRowIndex = 索引; }