c# - 文本框样式 - 绑定(bind)到文本的宽度

Question

我有一个文本框的样式。我在其中更改了带有附加矩形的 textBox 控件模板。我希望矩形的宽度绑定(bind)到已键入文本的宽度。

这是当前样式

<Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <Border Name="Border"
                        Padding="2"             
                        Background="{DynamicResource White#}">

                    <StackPanel VerticalAlignment="Center">
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                        <Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=PART_ContentHost}" Height="2" Fill="{TemplateBinding Foreground}" Opacity="0.8">
                            <Rectangle.LayoutTransform>
                                <ScaleTransform ScaleX="0" />
                            </Rectangle.LayoutTransform>
                        </Rectangle>
                    </StackPanel>
                </Border>
           </ControlTemplate>

        </Setter.Value>
    </Setter>

这个 xaml 栏会拉伸(stretch)，我希望它与文本一样宽

我必须在控件模板的 setter 中放入什么以及绑定(bind)必须是什么？

Answer 1

你们非常亲密。

首先，我向 ScrollViewer 添加了 Horizo​​ntalAlignment="Left"，以防止它拉伸(stretch)到其父级的整个宽度。

其次，我删除了 ScaleTransform，它将 Rectangle 的水平尺寸缩小为零。

<StackPanel VerticalAlignment="Center" >
    <ScrollViewer 
        Margin="0" 
        x:Name="PART_ContentHost" 
        HorizontalAlignment="Left" 
        />
    <Rectangle 
        x:Name="Rect1" 
        Width="{Binding ActualWidth, ElementName=PART_ContentHost}" 
        Height="2" 
        Fill="{TemplateBinding Foreground}" Opacity="0.8"
        HorizontalAlignment="Left"
        >
    </Rectangle>
</StackPanel>

现在您遇到了另一个问题:用户必须在 ScrollViewer 内部单击以使其获得焦点，这样他才能开始输入，而 scrollviewer 是一个挤在左侧的小东西的控制。我正在寻找一些方法来做到这一点；等待更新。

更新

如何在不对 MVVM 犯任何错误的情况下处理对 mousedown 的关注:

using System.ComponentModel;
using System.Windows;
using System.Windows.Input;

namespace MyRandomNamespace
{
    public static class Extensions
    {
        #region Extensions.MouseDownFocusRecipient Attached Property

        //  Attached property. See XAML example below for usage. 
        //  On mouse down, sets focus on bound target control. 

        public static UIElement GetMouseDownFocusRecipient(UIElement obj)
        {
            return (UIElement)obj.GetValue(MouseDownFocusRecipientProperty);
        }

        public static void SetMouseDownFocusRecipient(UIElement obj, UIElement value)
        {
            obj.SetValue(MouseDownFocusRecipientProperty, value);
        }

        public static readonly DependencyProperty MouseDownFocusRecipientProperty =
            DependencyProperty.RegisterAttached("MouseDownFocusRecipient", typeof(UIElement), typeof(Extensions),
                new PropertyMetadata(null, MouseDownFocusRecipient_PropertyChanged));

        private static void MouseDownFocusRecipient_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var target = d as UIElement;

            //  Target must have some kind of background color or it will ignore mouse events. 
            //  We can't do this object-orientedly because multiple Background dependency 
            //  properties are defined in multiple control classes. 

            var bkgDepProp = DependencyPropertyDescriptor.FromName("Background", target.GetType(), target.GetType(), true);

            if (bkgDepProp != null && bkgDepProp.GetValue(target) == null)
            {
                bkgDepProp.SetValue(target, System.Windows.Media.Brushes.Transparent);
            }

            //target.IsHitTestVisible = true;
            target.PreviewMouseDown -= Target_PreviewMouseDown;
            target.PreviewMouseDown += Target_PreviewMouseDown;
        }

        private static void Target_PreviewMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            var target = (UIElement)sender;

            var otherControl = GetMouseDownFocusRecipient(target);

            if (otherControl != null)
            {
                Keyboard.Focus(otherControl);
            }
        }
        #endregion Extensions.MouseDownFocusRecipient Attached Property
    }
}

XAML:

<ControlTemplate TargetType="{x:Type TextBoxBase}" x:Key="TextBoxTemplate">
    <Border 
        Name="Border"
        Padding="2"             
        Background="{DynamicResource White#}"
        local:Extensions.MouseDownFocusRecipient="{Binding ElementName=PART_ContentHost}"
        >
        <StackPanel 
            VerticalAlignment="Center" 
            MouseDown="StackPanel_MouseDown"
            >
            <ScrollViewer 
                Margin="0" 
                x:Name="PART_ContentHost" 
                HorizontalAlignment="Left" 
                />
            <Rectangle 
                x:Name="Rect1" 
                Width="{Binding ActualWidth, ElementName=PART_ContentHost}" 
                Height="8" 
                Fill="{TemplateBinding Foreground}" Opacity="0.8"
                IsHitTestVisible="False"
                HorizontalAlignment="Left"
                />
        </StackPanel>
    </Border>
</ControlTemplate>