当子元素具有焦点UWP时选择ListViewItem

本文关键字：UWP 选择 ListViewItem 焦点 元素 | 更新日期: 2023-09-27 18:16:10

我正在写一个通用的Windows应用程序，我有一个ListView，其中ListViewItems包含一个文本框和一个按钮。当我点击文本框时，我希望ListViewItem被选中。我已经为WPF找到了解决方案，但风格。触发器在UWP中不可用。谁能告诉我做这件事的正确方法?

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CycleStreetsUniversal.Controls"
    xmlns:common="using:CycleStreetsUniversal.Common"
    xmlns:utils="using:CycleStreetsUniversal.Utils"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:converters="using:CycleStreetsUniversal.Converters"
    x:Class="CycleStreetsUniversal.Pages.HomePage"
    mc:Ignorable="d" FontWeight="Light">
    <Page.Resources>
        <DataTemplate x:Key="DirectionItem">
            <Grid Padding="8,6,0,6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <AutoSuggestBox x:Name="autoSuggestBox" PlaceholderText="{Binding Watermark}" QueryIcon="Find" Text="{Binding LocationName}" />    
                <Button Grid.Column="2" Visibility="{Binding ShowAddButton, Converter={StaticResource BooleanToVisibilityConverter}}" />
                <Button Grid.Column="1" Visibility="{Binding ShowMinusButton, Converter={StaticResource BooleanToVisibilityConverter}}" />
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid x:Name="Directions" HorizontalAlignment="Left" Margin="0" Width="346" DataContext="{Binding DirectionPlanner, Mode=OneWay, Source={StaticResource Locator}}">
            <Grid.Background>
                <SolidColorBrush Color="{ThemeResource SystemAltHighColor}"/>
            </Grid.Background>
            <StackPanel VerticalAlignment="Top">
                <ListView x:Name="DirectionEntryList" ItemTemplate="{StaticResource DirectionItem}" ItemsSource="{Binding Entries}">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
                <Button x:Name="crosshairButton" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition" Margin="20,0" HorizontalAlignment="Stretch" Padding="0" Click="crosshairButton_Click">
                    <Grid Height="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image x:Name="image" Source="ms-appx:///Assets/crosshair.png"/>
                        <TextBlock Text="Set Location to Crosshair" Grid.Column="1" VerticalAlignment="Center" MaxLines="2" TextWrapping="Wrap"/>
                    </Grid>
                </Button>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

数据模板中的AutoSuggestBox需要将DirectionEntryList中的选中项设置为AutoSuggestBox是其子元素的List View项。

当子元素具有焦点UWP时选择ListViewItem

解决方案背后的代码

你能做的是订阅AutoSuggestBox的GotFocus事件。

<AutoSuggestBox x:Name="autoSuggestBox" GotFocus="autoSuggestBox_GotFocus" />

然后，您只需要使用ListView.ContainerFromItem方法找到实际的ListViewItem，并将其IsSelected属性设置为true。

private void autoSuggestBox_GotFocus(object sender, RoutedEventArgs e)
{
    var item = ((AutoSuggestBox)sender).DataContext;
    var container = (ListViewItem)DirectionEntryList.ContainerFromItem(item);
    container.IsSelected = true;
}

混合友好解决方案(后面没有代码)

让我们通过将逻辑封装到Behavior中来改进这个答案。

首先，您需要从参考管理器>通用Windows><<em>扩展/em>。

然后基本上你只需要创建一个依赖属性来获取DirectionEntryList的引用，并以与后面代码完全相同的方式处理GotFocus事件。

public class SelectListViewItemWhenElementGotFocusBehavior : DependencyObject, IBehavior
{
    private UIElement _element;
    public DependencyObject AssociatedObject { get; set; }
    #region ListView reference
    public ListView ListView
    {
        get { return (ListView)GetValue(ListViewProperty); }
        set { SetValue(ListViewProperty, value); }
    }
    public static readonly DependencyProperty ListViewProperty =
        DependencyProperty.Register("ListView", typeof(ListView), typeof(SelectListViewItemWhenElementGotFocusBehavior), new PropertyMetadata(null));
    #endregion
    public void Attach(DependencyObject associatedObject)
    {
       AssociatedObject = associatedObject;
        _element = this.AssociatedObject as UIElement;
        if (_element != null)
        {
            _element.GotFocus += OnElementGotFocus;
        }
    }
    private void OnElementGotFocus(object sender, RoutedEventArgs e)
    {
        var item = ((AutoSuggestBox)sender).DataContext;
        var container = (ListViewItem)ListView.ContainerFromItem(item);
        container.IsSelected = true;
    }
    public void Detach()
    {
        if (_element != null)
        {
            _element.GotFocus -= OnElementGotFocus;
        }
    }
}

要使用它，只需打开混合，进入DataTemplate并将其附加到AutoSuggestBox。

<AutoSuggestBox x:Name="autoSuggestBox">
    <Interactivity:Interaction.Behaviors>
        <local:SelectListViewItemWhenElementGotFocusBehavior ListView="{Binding ElementName=DirectionEntryList}" />
    </Interactivity:Interaction.Behaviors>
</AutoSuggestBox>

当我点击文本框时，我希望ListViewItem被选中。我已经为WPF找到了解决方案，但风格。UWP中没有触发器。

在UWP中，你可以使用ViewState来设置样式。设置和触发状态变化通过GotFocus &;LostFocus事件。

例如:

<Page
    x:Class="UWPApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid 
        x:Name="container"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ValueStates">
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Target="button.Background" Value="Red"></Setter>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="UnSelected">
                    <VisualState.Setters>
                        <Setter Target="button.Background" Value="Blue"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel>
            <TextBox x:Name="inputbox" GotFocus="inputbox_GotFocus" LostFocus="inputbox_LostFocus"></TextBox>
            <Button x:Name="button">Click Me</Button>
        </StackPanel>
    </Grid>
</Page>
c#代码:

private void inputbox_GotFocus(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "Selected", false);
}
private void inputbox_LostFocus(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "UnSelected", false);
}
相关文章：