自定义文本框 - WPF 和 Xaml

Question

我想使用 XAML 和一个自定义类创建一个自定义 TextBox，该类具有一个名为 PosType 的 TextBox 附加属性。 PosType 将被渲染在侧面的红色三角形内。

TextBox 应该是一个普通的文本框，从左边有足够的边距，不会拦截其他文本。 这是显示文本框所需外观的图像。

控制类：

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

**我写的样式：（与我想要的非常相似，除了这里我使用了边框，其他部分可能不准确。**

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>

如何创建此自定义文本框并获得所需的外观？

编辑： 请指导我根据我上面提到的相同方法解决小问题。

Answer 1

你可以使用Adorners来做到这一点

装饰器在 UIElement 之上的另一个名为 AdornerLayer 的层中呈现，这可以为您带来所需的效果。

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
     }
 }

假设您希望PosType 的文本可绑定，您应该将其设为Dependency property。 使用OnApplyTemplate 将装饰器附加到您的文本框

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);
    }
}

欲了解更多信息，您可以查看以下链接：

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

祝你好运