WPF MVVM 之 MvvmLight UserControl 数据绑定

墨客先生 2022-09-16 10:15:26

首先新建一个UserControl

        <TextBox Name="XuNiBox" Width="0"/>
        <Border Background="White" Height="30" Margin="10" CornerRadius="6" BorderThickness="1" BorderBrush="#D9D9D9">
            <TextBox VerticalContentAlignment="Center" Padding="10 0" BorderThickness="0" 
                                 Background="Transparent" Name="TextBoxTxt" Text="{Binding TextPath}"
                                 LostFocus="Textbox_Leave" Foreground="#A7A6AA"
                                 GotFocus="Textbox_Enter"></TextBox>
        </Border>

为了让鼠标强制失去坐标，我们新建一个 <TextBox Name="XuNiBox" Width="0"/>

然后添加两个鼠标事件：LostFocus="Textbox_Leave" 、GotFocus="Textbox_Enter">

        Boolean textboxHasText = false;//判断输入框是否有文本
        string textboxTip = "请输入您的内容";
        public TextBoxControl()
        {
            InitializeComponent();
            TextBoxTxt.Text = textboxTip;
        }
        /// <summary>
        /// textbox获得焦点
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Textbox_Enter(object sender, RoutedEventArgs e)
        {
            if (textboxHasText == false)
            {
                //判断中常用的 并且是&& 或者是||
                TextBoxTxt.Text = "";
                TextBoxTxt.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#626469"));

                TextBoxTxt.Text = ReadLocalFiles.OpenFolder();
                XuNiBox.Focus();

            }
            else
            {

            }
        }
        /// <summary>
        /// textbox失去焦点
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Textbox_Leave(object sender, RoutedEventArgs e)
        {
            if (TextBoxTxt.Text == "")
            {
                TextBoxTxt.Text = textboxTip;
                TextBoxTxt.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#C8C9CC"));
                textboxHasText = false;
            }
            else
            {
                textboxHasText = true;
            }
        }

调用自定义 UserControl 用户控件

引用： xmlns:custom="clr-namespace:MVVMLightDemo.CustomControl"

<custom:TextBoxControl/>

当我们引用自定义用户控件的时候必须要有字段 | 字段名必须与自定义控件的绑定字段名一样才可以

        private String _textPath = "关键词";
        /// <summary>
        /// 关键词
        /// </summary>
        public String TextPath
        {
            get { return _textPath; }
            set { _textPath = value; RaisePropertyChanged(() => TextPath); }
        }

Name：控件名 | ID

VerticalContentAlignment：垂直内容对齐

Width：宽度

Height：高度

Margin：外边框

Padding：内边框

Background ：背景颜色

BorderThickness：边框线条大小

BorderBrush：边框线条颜色

CornerRadius：圆边大小

Text：文本

Foreground：字体颜色