wp7 给TextBox设置圆角边框

这只是一个很简单小技巧，大牛们就不要再来喷小弟。。

我就喜欢将一件很简单事情做到很完美。。。

首先准备好一张背景图

 

在最外层grid 加上这段代码：代码意思给页面加上背景图

 <Grid.Background>
            <ImageBrush ImageSource="/Images/bg.png"></ImageBrush>
  </Grid.Background>

下面是关键部分

主要用到一个Border 跟TextBox控件

Border作用就是加个边框效果

 <Border BorderThickness="1" BorderBrush="Gray" Height="72" Width="300" CornerRadius="10">
                <TextBox Text="请输入密码"></TextBox>
</Border>

还有很多细节问题处理，如下面红色地方 跟背景不匹配（控件默认是白色）

接下来我用取色器取出周边颜色 ，给文本框加上一个属性Background="#f6fbff"

<Border BorderThickness="1" BorderBrush="Gray" Height="72" Width="300" CornerRadius="10">
                <TextBox Text="请输入密码" Background="#f6fbff"></TextBox>
</Border>

细心点就发现TextBox还多出边框是白色，下面我给文本设置上周围背景色

 <Border BorderThickness="1" BorderBrush="Gray" Height="72" Width="300" CornerRadius="10">
                <TextBox Text="请输入密码" Background="#f6fbff" BorderBrush="#f6fbff"></TextBox>
</Border>

似乎很完美解决了...

但是这不是我想要的，假如我页面有一百个这样文本框，复制一百次这样子代码？？

用户控件可以减少我部分代码量

用户控件代码：

  public partial class MyTextBox : UserControl

    {

        //文本框值

        private string _Text = "";

        public string MyText

        {

            get { return _Text; }

            set { _Text = value; }

        }

        //高度

        private double _Height = 72;

        public double MyHeight

        {

            get { return _Height; }

            set { _Height = value; }

        }



        //宽度

        private double _Width = 300;

        public double MyWidth

        {

            get { return _Width; }

            set { _Width = value; }

        }

        private string _Background = "#f6fbff";

        public string MyBackground

        {

            get { return _Background; }

            set { _Background = value; }

        }

        public MyTextBox()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MyTextBox_Loaded);

        }



        void MyTextBox_Loaded(object sender, RoutedEventArgs e)

        {

            txtBox.Text = MyText;

            border.Height = MyHeight;

            border.Width = MyWidth;

            string bg = this.MyBackground.Replace("#", "");



            byte r = Convert.ToByte(bg.Substring(0, 2));

            byte g = Convert.ToByte(bg.Substring(2, 2));

            byte b = Convert.ToByte(bg.Substring(4, 2));

            var color = new SolidColorBrush(Color.FromArgb(255, r, g, b));

            txtBox.Background = color;

            txtBox.BorderBrush = color;

        }



    }

这里我只写三个属性，做了一些简单处理。。。。

之后在页面拖这个控件，设置几个属性就可以使用，详细请查看源代码

  <my:MyTextBox HorizontalAlignment="Left" MyBackground="#222222" Margin="34,173,0,0" x:Name="myTextBox1" VerticalAlignment="Top"  Tap="myTextBox1_Tap" MyHeight="70" MyWidth="400" MyText="12221" />

 

 

其实里面很多东西都没有考虑进去，等我完成这个wp7小作品，我会逐步完善这个控件

同样项目源代码我也会共享出来。。。

TextBlockCornerRadius.rar