Wie bekomme ich WPF-Suchbox-Styling wie GoogleChrome Browser-Suche?

Question

Ich plane Suchfunktionen in WPF wie im Google Chrome Browser. Die Probe wird unter

gezeigt

ich den Backend-Code bereit, aber ich mag wie die einen Text haben, weiter unten -, in dem ich auch die Ergebnisse angezeigt werden kann (wie 0 von 0).
Auch ich hätte gerne die Pfeilmarkierungen für next und prev.
Wie entwerfe ich eine solche TextBox in WPF in XAML? Bitte führe mich in Bezug auf dasselbe.

Answer 1

Eine individuelle Steuerung kann mit folgendem Code erstellt werden:

public class SearchTextBox : Control 
{ 
    public String Text 
    { 
     get { return (String)GetValue(TextProperty); } 
     set { SetValue(TextProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty TextProperty = 
     DependencyProperty.Register("Text", typeof(String), typeof(SearchTextBox), new UIPropertyMetadata(null)); 

    public String SearchStatusText 
    { 
     get { return (String)GetValue(SearchStatusTextProperty); } 
     set { SetValue(SearchStatusTextProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for SearchStatusText. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty SearchStatusTextProperty = 
     DependencyProperty.Register("SearchStatusText", typeof(String), typeof(SearchTextBox), new UIPropertyMetadata(null)); 

    static SearchTextBox() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(SearchTextBox), new FrameworkPropertyMetadata(typeof(SearchTextBox))); 
    } 
} 

Style in generic.xaml

<Style TargetType="{x:Type local:SearchTextBox}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:SearchTextBox}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition /> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <TextBox Grid.Column="0" 
           Text="{TemplateBinding Text}" /> 
         <TextBlock Grid.Column="1" 
            Text="{TemplateBinding SearchStatusText}"></TextBlock> 
         <Button Grid.Column="2"> 
          <Polyline Points="0,10 5,0 10,10" 
             Stroke="Black" 
             StrokeThickness="2" /> 
         </Button> 
         <Button Grid.Column="3"> 
          <Polyline Points="0,0 5,10 10,0" 
             Stroke="Black" 
             StrokeThickness="2" /> 
         </Button> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Sie es ändern müssen nach Ihren Bedürfnissen. Aber das sollte ein guter Ausgangspunkt sein.

Answer 2

Es gibt keine vorgefertigte Lösung für Ihre Anforderung. Sie müssen mit den Steuerelementen vorhandener Steuerelemente ziemlich oft herumspielen oder ein benutzerdefiniertes Steuerelement von Grund auf neu erstellen.

http://msdn.microsoft.com/en-us/library/aa970773%28VS.85%29.aspx