2011-01-06 26 views
6

Używam wpf toolkit AutoCompleteBox i ustawiłem szablon Item. Problem: pozycje na wyskakującej liście wyglądają świetnie, ale nie odniosły skutku w powyższym polu tekstowym (wybrana pozycja).ItemTemplate nie wpływa na wybraną pozycję AutoCompleteBox

alt text

XAML:

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20"> 
     <Controls:AutoCompleteBox.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text="{Binding Name}" /> 
        <Rectangle Width="10" Height="10" Fill="LightGreen"/> 
        <TextBlock Text="{Binding Age}" /> 
       </StackPanel>  
      </DataTemplate> 
     </Controls:AutoCompleteBox.ItemTemplate> 
    </Controls:AutoCompleteBox> 

Kod za:

public partial class MainWindow : Window 
{ 
    public List<Person> Persons { get; set; } 

    public MainWindow() { 
     InitializeComponent(); 

     Persons = new List<Person> { 
      new Person{Name = "Jhon",Age=35},       
      new Person{Name = "Kelly",Age=40}}; 


     x.ItemsSource = Persons; 
     DataContext = this; 
    } 

    bool SearchPerson(string search, object value) { 
     return (value as Person).Name.ToLower().Contains(search); 
    } 
} 

public class Person 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
} 
+0

proszę pisać XAML dla okna i jego ItemTemplate; na pierwszy rzut oka wygląda na to, że właściwość TextBox Text jest niepoprawnie powiązana z obiektem Person zamiast z właściwością * obiektu Person ... –

+0

dzięki, dodałem kod. – Erez

+0

Następnie należy przejrzeć szablon kontrolny AutoCompleteBox. Być może trzeba będzie to zmienić, aby uzyskać pożądany wygląd. – HappyNomad

Odpowiedz

10

Czego chcesz pokazać w TextBox? Aby wyświetlić nazwę wybranej osoby można dodać ValueMemberPath jak ten

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20" 
          ValueMemberPath="Name"> 

Jeśli chcesz wyświetlać zarówno Name i Age w TextBox można użyć ValueMemberBinding z konwerterem

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20" 
      ValueMemberBinding="{Binding Converter={StaticResource PersonConverter}}"> 

Gdzie łączymy bezpośrednio do Person i zwróć nazwę i wiek w konwerterze

public class PersonConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     Person person = value as Person; 
     if (person != null) 
     { 
      return person.Name + " : " + person.Age.ToString(); 
     } 
     return string.Empty; 
    } 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

Aktualizacja

Będziesz musiał edytować szablon z AutoCompleteBox. TextBox nie może wyświetlić wartości Rectangle, więc rozwiązanie będzie zależało od sposobu obsługi tego. Oto przykład, który wyświetla , Rectangle i TextBlock w Szablonie. Powinno dać to, czego chcą

alt text

<Controls:AutoCompleteBox x:Name="x" ItemFilter="SearchPerson" Margin="20" Grid.Row="0" 
          ValueMemberPath="Name" 
          Style="{DynamicResource AutoCompleteBoxStyle1}"> 
    <Controls:AutoCompleteBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding Name}" /> 
       <Rectangle Width="10" Height="10" Fill="LightGreen"/> 
       <TextBlock Text="{Binding Age}" /> 
      </StackPanel> 
     </DataTemplate> 
    </Controls:AutoCompleteBox.ItemTemplate> 
</Controls:AutoCompleteBox> 

<Style x:Key="AutoCompleteBoxStyle1" TargetType="{x:Type Controls:AutoCompleteBox}"> 
    <Setter Property="IsTabStop" Value="False"/> 
    <Setter Property="Padding" Value="2"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFA3AEB9" Offset="0"/> 
       <GradientStop Color="#FF8399A9" Offset="0.375"/> 
       <GradientStop Color="#FF718597" Offset="0.375"/> 
       <GradientStop Color="#FF617584" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Background" Value="White"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="MinWidth" Value="45"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Controls:AutoCompleteBox}"> 
       <Grid Opacity="{TemplateBinding Opacity}"> 
        <TextBox x:Name="Text" Opacity="1" Visibility="Visible" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsTabStop="True" Margin="0" Padding="{TemplateBinding Padding}" Style="{TemplateBinding TextBoxStyle}"/> 
        <StackPanel Name="stackPanel" Orientation="Horizontal" VerticalAlignment="Top" Visibility="Visible" IsHitTestVisible="False" Grid.ZIndex="1"> 
         <TextBlock Margin="6,9,0,0" 
            VerticalAlignment="Center" 
            Opacity="0" 
            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:AutoCompleteBox}}, 
                Path=SelectedItem.Name}" /> 
         <Rectangle Width="10" Height="10" VerticalAlignment="Center" Fill="LightGreen" /> 
         <TextBlock VerticalAlignment="Center" 
            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:AutoCompleteBox}}, 
                Path=SelectedItem.Age}"/> 
        </StackPanel> 
        <Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed"> 
         <Border.ToolTip> 
          <ToolTip x:Name="validationTooltip" Placement="Right"> 
           <ToolTip.Triggers> 
            <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
             <BeginStoryboard> 
              <Storyboard> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip"> 
                <DiscreteObjectKeyFrame KeyTime="0"> 
                 <DiscreteObjectKeyFrame.Value> 
                  <System:Boolean>True</System:Boolean> 
                 </DiscreteObjectKeyFrame.Value> 
                </DiscreteObjectKeyFrame> 
               </ObjectAnimationUsingKeyFrames> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
           </ToolTip.Triggers> 
           <ToolTip.Template> 
            <ControlTemplate TargetType="{x:Type ToolTip}"> 
             <Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0"> 
              <Grid.RenderTransform> 
               <TranslateTransform X="-25"/> 
              </Grid.RenderTransform> 
              <Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/> 
              <Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/> 
              <Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/> 
              <Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/> 
              <Border Background="#FFDC000C" CornerRadius="2"> 
               <TextBlock Foreground="White" MaxWidth="250" Margin="8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/> 
              </Border> 
             </Grid> 
            </ControlTemplate> 
           </ToolTip.Template> 
          </ToolTip> 
         </Border.ToolTip> 
         <Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12"> 
          <Path Data="M1,0L6,0A2,2,90,0,1,8,2L8,7z" Fill="#FFDC000C" Margin="1,3,0,0"/> 
          <Path Data="M0,0L2,0 8,6 8,8" Fill="White" Margin="1,3,0,0"/> 
         </Grid> 
        </Border> 
        <Popup x:Name="Popup"> 
         <Grid Background="{TemplateBinding Background}" Opacity="{TemplateBinding Opacity}"> 
          <Border x:Name="PopupBorder" BorderThickness="0" Background="#11000000" HorizontalAlignment="Stretch" > 
           <Border.RenderTransform> 
            <TranslateTransform X="1" Y="1"/> 
           </Border.RenderTransform> 
           <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" HorizontalAlignment="Stretch" Opacity="1" Padding="0"> 
            <Border.Background> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFDDDDDD" Offset="0"/> 
              <GradientStop Color="#AADDDDDD" Offset="1"/> 
             </LinearGradientBrush> 
            </Border.Background> 
            <Border.RenderTransform> 
             <TransformGroup> 
              <TranslateTransform X="-1" Y="-1"/> 
             </TransformGroup> 
            </Border.RenderTransform> 
            <ListBox x:Name="Selector" BorderThickness="0" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemTemplate="{TemplateBinding ItemTemplate}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}" ScrollViewer.VerticalScrollBarVisibility="Auto"/> 
           </Border> 
          </Border> 
         </Grid> 
        </Popup> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="SelectedItem" Value="{x:Null}"> 
         <Setter TargetName="stackPanel" Property="Visibility" Value="Hidden"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
+0

co z prostokątem pośrodku? jak mogę mu pokazać? – Erez

+0

@Erez: Jak chcesz obsłużyć edycję, jeśli edytowalna część to 'TextBox',' Rectangle' i 'TextBlock'. Czy chcesz, aby zmieniło się to w "TextBox", gdy ma KeyboardFocus, czy po prostu będziesz mógł edytować w "TextBox"? Ponieważ sam TextBox nie jest w stanie wyświetlić odpowiedzi "Prostokąt" –

+0

, to było bardzo trudne do wymyślenia, ale twoja odpowiedź uczyniła ją bardzo prostą! – Feign

Powiązane problemy