Eine benutzerdefinierte Textbox - WPF und Xaml

Möchte ich ein custom TextBox mit XAML und benutzerdefinierte Klasse mit einer zusätzlichen Eigenschaft TextBox genannt PosType. PosType dargestellt wird, in das rote Dreieck in die Seite.

Den TextBox sollte ein normales Textfeld mit genug Marge übrig, um nicht abfangen, der andere text.
Hier ist das Bild von dem gewünschten Aussehen der textbox.

Die Control-Klasse :

public class PosTextBox : TextBox
{
    public string PosType { get; set; }
}

**Der Stil, den ich schrieb : (ganz ähnlichen Ansatz, was ich will, außer ich hier verwendeten Rahmen und andere Teile können nicht korrekt sein. **

xmlns:Pro="clr-namespace:Prox.XamlControls">

<!-- Custom TextBox  -->
<Style x:Key="c1PosTextBox" TargetType="{x:Type Pro:PosTextBox}" >
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Pro:PosTextBox}">

                <Grid>
                    <Border>
                        <Border>
                            <TextBlock Text ="{TemplateBinding Path= Pro:PosType}"></TextBlock>
                            <!--<TextBlock Text ="{TemplateBinding ElementName=Pro:PosTextBox, Path= Pro:PosType}"></TextBlock>-->
                        </Border>
                    </Border>
                    <Border Margin="5,10,5,10">
                        <ContentPresenter  Name="Content" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" TextBlock.Foreground="White"></ContentPresenter>
                    </Border>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

So erstellen Sie diese benutzerdefinierten Textfeld das gewünschte Aussehen erreicht ist?

Edit:
Bitte führe mich zu beheben kleinere Probleme, basierend auf dem gleichen Ansatz, den ich oben erwähnt.

Ich denke, Funktionsindikatoren ist das, was du suchst
Ich bin mir ziemlich sicher, dass es getan werden kann, in beide Richtungen, ich höre gerne Antworten auf die beiden Ansätze, wenn jemand gerne teilen. Dank denen dieses
Die Umsetzung dieser mit funktionsindikatoren und die angeschlossenen Verhaltensweisen kann Ihnen mehr Flexibilität als die Verwendung von benutzerdefinierten Typ (wie PosTextBox) für jede UI-feature.
Nach dem spielen ein bisschen mit den vorgeschlagenen Ansätze, ich blieb mit den meinigen in diesem Fall, Basierend auf dem, was ich brauche, ich will genau den gleichen Ansatz wie ich in meiner Frage, Wenn jemand weiß, wie ich das beheben kann ich den code zur Verfügung gestellt, das zu tun job bitte helfen Sie mir auf diese Weise.

InformationsquelleAutor Sypress | 2013-09-26

c#wpf xaml

2

Könnte man tun, dass die Verwendung Funktionsindikatoren

Funktionsindikatoren sind gerendert, in einer anderen Ebene namens AdornerLayer auf der Oberseite des UIElement, Die Sie erhalten können, die den gewünschten Effekt.
```
public class PosTypeAdorner : Adorner
{
     private string _posText;

     //Be sure to call the base class constructor. 
     public PosTypeAdorner (UIElement adornedElement, string posText) : base(adornedElement) 
     { 
           _posText = posText;
     }

     //A common way to implement an adorner's rendering behavior is to override the OnRender 
     //method, which is called by the layout system as part of a rendering pass. 
     protected override void OnRender(DrawingContext drawingContext)
     {
          //Draw the red triangle with it's text using the drawingContext here
     }
 }
```
Angenommen, Sie möchten den text der PosType gebunden werden, Sie sollten es machen wie ein Dependency property.
Verwenden OnApplyTemplate zu befestigen, die adorner zu Ihrem text box
```
public class PosTextBox : TextBox
{
    public PosTextBox()
    {
    }

    public static readonly DependencyProperty PosTypeProperty =
        DependencyProperty.Register("PosType", typeof (string), typeof (PosTextBox), new PropertyMetadata(default(string)));

    public string PosType
    {
        get { return (string)GetValue(PosTypeProperty); }
        set { SetValue(PosTypeProperty, value); }
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        var layer = AdornerLayer.GetAdornerLayer(this);
        var posAdorner = new PosTypeAdorner(this, PosType);

        layer.Add(posAdorner);
    }
}
```
Für weitere Informationen, können Sie überprüfen Sie heraus diese links:

http://www.codeproject.com/Articles/54472/Defining-WPF-Adorners-in-XAML

http://www.nbdtech.com/Blog/archive/2010/06/21/wpf-adorners-part-1-ndash-what-are-adorners.aspx

http://www.nbdtech.com/Blog/archive/2010/06/28/wpf-adorners-part-2-ndash-placing-any-control-on-the.aspx

Glück
- danke für die info, +1, aber es enthält nicht die adorner-definition der an das benutzerdefinierte Steuerelement, die mir helfen, dies zu erreichen, könnte Sie erweitern Ihre Antwort.
- Ich versuche zu spielen, um diese Themen, und warten Sie eine Weile, Ob ich nicht besser beantworten, markieren Sie es, Dank zu erweitern und geben Sie Ihre Lösung.
- erweitert meine Antwort. im Grunde ist alles noch zu tun ist, zeichnen Sie das Rechteck. Ich habe eigentlich nie umgesetzt, meine eigenen adorner nur verwendet vorhandene, also kann ich nicht posten Sie den code, wie zu tun, aber es sollte ziemlich leicht sein und hat eine große Dokumentation über MSDN. Viel Glück 🙂
- Ich bin sicher, du hast die meißten die Umsetzung, so meine Zweifel, ob Ihr code ist : Es basiert nicht auf Xaml, die ich dachte, war es, ja, ein bisschen sollte ich spielen, um die gewünschte Dreieck in die richtige Lage. Die letzten Zweifel passt es mit prism?! 2 Fragen dazu? 1. Ich habe selten verwendet funktionsindikatoren, wie kann ich sicher sein, dass der Ort, wo es gerendert werden? alle Ränder oder Einstellung über Pixel? 2. Ist der string "PosType" gelegt, in die Lage des "XYZ" in Ihrer adorner-Durchführung oder nicht? danke.
- In meiner Implementierung PosText stellt die "XYZ" - string. als ich deine Frage verstanden, Sie wollte, dass es sein kann, nicht wahr? Über die Anpassung an Prism nicht ganz sicher, was du meinst .. das ist ein custom UIElement. Sie können es in einer beliebigen Ansicht, die Sie möchten, und binden die PosType oder andere Eigenschaften, die Sie entscheiden, zu implementieren, um Ihre ViewModel einfach, als würden Sie auf ein anderes Steuerelement. Es sollte keine Auswirkungen auf Ihre MVVM-design überhaupt. das gleiche gilt für Ihre Adorner
- als für die Pixel der adorner, die DrawingContext parameter in der OnRender Methode hat eine Menge von DrawXXX Methode, die Sie verwenden können. Vielleicht finden Sie die meisten für Sie nützlich Fall ist DrawText und DrawLine die eine Point als parameter zum definieren, zeichnen Punkte. Sie können diese hart kodiert oder in bindbare wie die PosText Beispiel. Hoffe, das hilft 🙂
- Ihre Antwort sollte sein, wie ich sagte, und es ist ein guter Kandidat für eine Lösung sein, aber ich bin immer noch eifrig, um herauszufinden, eine richtige Lösung ähnlich dem, was ich zur Verfügung gestellt, einige Teile von meinem code werden, basierend auf Xaml an einem Ort versammelt. Ich werde spielen, mit dem code mehr. wahrscheinlich markieren Sie es als Antwort in den nächsten 12 Stunden 😉
- Klingt gut 🙂 vergessen Sie nicht, dass die Adorner nimmt die TextBox als parameter im Konstruktor, und Sie können darauf zugreifen, indem this.AdornedElement und zeichnen Sie Ihre Dreieck entsprechend, um es Höhe/Breite/jede andere Eigenschaft. Schauen Sie, ich bin damit einverstanden, dass, schmutzig, mit allen Drawing shindig kann ziemlich fies, aber es hat ganz gut geklappt für uns, und erwiesen sich als wirklich gute Lösung. es ist wahre macht revieled es sich von selbst, wenn wir schrieben unsere xaml-Code, um eine neue look-and-feel und nicht haben, um diesen Teil neu schreiben, da wir es umgesetzt mit funktionsindikatoren. Nur etwas zu denken 😛
- nette Hinweise, ja manchmal dieser Ansatz gewinnt und mal die andere, wenn ich Recht haben. 🙂
- lassen Sie uns weiter, diese Diskussion im chat
InformationsquelleAutor Omri Btian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.