WPF 實作帶标題的TextBox

原文: WPF 實作帶标題的TextBox 這篇部落格将分享在WPF中如何建立一個帶Title的TextBox。首先請看一下最終的效果，

實作思路：使用TextBlock+TextBox來實作，TextBlock用來顯示Title。

實作代碼，

TitleTextBox

[TemplatePart(Name = TitleTextBlockKey, Type = typeof(TextBlock))]
    public class TitleTextBox : TextBox
    {
        private const string TitleTextBlockKey = "PART_TitleTextBlock";

        private TextBlock _tbkTitle;

        public static readonly DependencyProperty TitleProperty;

        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

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

            TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(TitleTextBox), new UIPropertyMetadata(new PropertyChangedCallback(TitlePropertyChangedCallback)));
        }

        private static void TitlePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            TitleTextBox ttb = d as TitleTextBox;

            if (ttb._tbkTitle != null)
            {
                ttb._tbkTitle.Text = (string)e.NewValue;
            }
        }

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

            _tbkTitle = Template.FindName(TitleTextBlockKey, this) as TextBlock;
            _tbkTitle.Text = Title;
        }
    }      

定義TitleTextBox樣式，

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPFTitleTextBox.Resources.Styles"
                    xmlns:uc="clr-namespace:WPFTitleTextBox">
    <Style TargetType="{x:Type uc:TitleTextBox}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Height" Value="28"/>
        <Setter Property="UndoLimit" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type uc:TitleTextBox}">
                    <Border x:Name="OuterBorder" BorderBrush="#8b99bc" BorderThickness="1" CornerRadius="1" Background="#f7f7f7">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock x:Name="PART_TitleTextBlock" Text="{Binding Title}" Foreground="#a7abb0" VerticalAlignment="Center" Margin="5,0"/>
                            <Line Grid.Column="1" Stroke="#ccd1d7" StrokeDashArray="2,2" StrokeThickness="1.5" X1="0" Y1="0" 
                                  X2="0" Y2="{TemplateBinding Height}" Margin="0,4"/>

                            <Border Grid.Column="2" Background="White">
                                <ScrollViewer x:Name="PART_ContentHost" Margin="5,0" VerticalAlignment="Center" FontSize="14"/>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>      

在XAML中需要引用TitleTextBox。

<Grid>
        <StackPanel>
            <local:TitleTextBox Title="姓名" Width="270" Margin="5,10"/>
            <local:TitleTextBox Title="班級" Width="270"/>
            <local:TitleTextBox Title="專業" Width="270" Margin="5,10"/>
        </StackPanel>
    </Grid>      

使用時設定一下Title即可。使用方式和普通TextBox一樣。

以後如果遇到帶Title的ComboBox，CheckBox等都可以參考上面的實作思路。

感謝您的閱讀，代碼點選

這裡

下載下傳。