Question

我正在尝试使用控件TextBox和ListBox创建一个搜索框。当我在TextBox开始输入事件处理程序GotFocus时，打开ListBox。我希望ListBox在TextBox无法关注时关闭LostFocus。我尝试使用TextBox中的<Canvas Name="m_MainCanvas" Grid.ColumnSpan="2" > <Rectangle MouseDown="Canvas_MouseDown" Fill="White" Height="280" HorizontalAlignment="Left" Margin="256,12,0,0" x:Name="m_MainRectangle" RadiusX="0" RadiusY="0" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="238" /> <TextBox Height="23" Margin="10,0,0,210" Name="m_SearchTextBox" VerticalAlignment="Bottom" BorderThickness="0.5" BorderBrush="#69000000" TextChanged="m_SearchTextBox_TextChanged" FontFamily="Kristen ITC" Text="" FontSize="14" FontWeight="Black" HorizontalAlignment="Left" Width="165" Canvas.Top="86" Canvas.Left="274" LostFocus="m_SearchTextBox_LostFocus"/> <ListBox ItemTemplate="{DynamicResource ListBoxItemDataTemplate}" ItemsSource="{Binding}" Name="m_FriendsSearchList" Visibility="Hidden" Background="#FFBCEB85" Width="181" Height="193" Canvas.Left="283" Canvas.Top="118"> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <EventSetter Event="MouseDoubleClick" Handler="HandleDoubleClickItemToSelect" /> </Style> </ListBox.ItemContainerStyle> </ListBox>事件，但它不起作用。

我应该使用哪个事件处理程序？我没有找到一个很好的例子来实现这个机制。

编辑：我有类似的东西：

MouseDown

Rectangle控件中的TextBox事件用于使{{1}}失焦，但无效。

Answer 1

类似的东西：

<StackPanel>
  <TextBox>
    <TextBox.Triggers>
      <EventTrigger RoutedEvent="GotFocus">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Duration="0:0:0"
                              Storyboard.TargetName="lb"
                              Storyboard.TargetProperty="(ListBox.Opacity)"
                              To="1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="LostFocus">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Duration="0:0:0"
                              Storyboard.TargetName="lb"
                              Storyboard.TargetProperty="(ListBox.Opacity)"
                              To="0" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </TextBox.Triggers>
  </TextBox>
  <ListBox x:Name="lb"
            Opacity="0">
    <ListBoxItem Content="A" />
    <ListBoxItem Content="B" />
  </ListBox>
</StackPanel>

然而，在上述方法中，ListBox仍保留其所在的空间。如果我们改为Visibility切换为Collapsed，则每次ListBox变为{ {1}}其他控件将开始移动以适应它。

为避免这两种情况，通常通过Popup

实现此类操作

Visible

^^你仍会看到相同的输出，但由于弹出窗口改变了打开/关闭状态，你不再需要改变位置的任何控件。

<强>更新

Download Link

请记住，<StackPanel> <TextBox x:Name="tb" /> <Popup Width="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget.ActualWidth}" Placement="Bottom" PlacementTarget="{Binding ElementName=tb}"> <Popup.Style> <Style TargetType="{x:Type Popup}"> <Setter Property="IsOpen" Value="False" /> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=tb, Path=IsFocused}" Value="True"> <Setter Property="IsOpen" Value="True" /> </DataTrigger> </Style.Triggers> </Style> </Popup.Style> <ListBox> <ListBoxItem Content="A" /> <ListBoxItem Content="B" /> </ListBox> </Popup> </StackPanel>是根据Trigger有/失去焦点设置的。如果您点击某个没有聚焦的地方，那么您将看不到TextBox（Popup）消失。

Answer 2

XAML：

      <Border Grid.Row="0" BorderBrush="Black" BorderThickness="1">
         <Grid >
            <Grid>
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="Auto"/>
               </Grid.ColumnDefinitions>

               <TextBox Grid.Column="0" BorderThickness="0"
                        BorderBrush="Transparent"/>
               <Button Grid.Column="1" Background="Transparent" BorderThickness="0"
                       BorderBrush="Transparent">
                  <Button.Content>
                     <Image Source="../Resources/$YOUR_SEARCH_ICON"></Image>
                  </Button.Content>
               </Button>
            </Grid>
         </Grid>
     </Border>

然后处理listView（或您拥有的视图类型）以仅显示包含搜索结果的项目。

使用WPF创建搜索框

2 个答案: