使用TextBox的Template制做表单的表格样式

对于初学者，当想到要改变一个控件的模板时都是这样一套写下来的

<TextBox Text="ABC" Width="100" Height="30" Margin="150,15">

<TextBox.Template>

<ControlTemplate>

<Border BorderBrush="Red" BorderThickness="1">

<ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>

</Border>

</ControlTemplate>

</TextBox.Template>

</TextBox>

但你会发现，这样写，那么功能都不在了，比如我在<ControlTemplate>加入一个border，运行时发现根本就没法输入。当遇到这样的情况时，应该用Blend打开，对象->编辑模板，此时你会发现，它原来的模板出现了，这就是一个完整的模板了，会发现里面用了很多x:name，这时你会发现TextBox有这么一行代码

<ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>

就是这个x:name决定了是否能够输入，所以，在自己写的模板里就要把这个name加入才有最基本的功能。当我要写一个控件的模板时，我喜欢用blend打开，看原来有哪些属性，希望初学WPF的朋友们多用Blend看看控件的元模板。

以下是完整的代码，运行效果如下：

代码如下：

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="SilverlightApplication44.MainPage"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>

<Style TargetType="sdk:Label">

<Setter Property="BorderThickness" Value="0.5"/>

<Setter Property="BorderBrush" Value="Red"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="0"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="sdk:Label">

<Border BorderBrush="Red" BorderThickness="1">

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

 

<Style TargetType="TextBox">

<Setter Property="BorderBrush" Value="Red"/>

<Setter Property="BorderThickness" Value="0.5"/>

<Setter Property="Padding" Value="5"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate>

<Border BorderBrush="Red" BorderThickness="1">

<ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

 

<Style TargetType="dxe:TextEdit">

<Setter Property="ShowBorder" Value="True"/>

<Setter Property="BorderBrush" Value="Red"/>

<Setter Property="BorderThickness" Value="0.5"/>

<Setter Property="HorizontalContentAlignment" Value="Left"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="5"/>

<Setter Property="BorderTemplate">

<Setter.Value>

<ControlTemplate>

<Border BorderThickness="1" BorderBrush="Red" Padding="{TemplateBinding Padding}">

<ContentPresenter/>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid Margin="10">

<StackPanel>

<Border BorderBrush="Red" BorderThickness="1.5" >

<Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="80"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<sdk:Label Grid.Row="0" Grid.Column="0" Content="用户名"/>

<TextBox Grid.Row="0" Grid.Column="1" Text="TextBox"/>

<sdk:Label Grid.Row="1" Grid.Column="0" Content="用户名"/>

<dxe:TextEdit Grid.Row="1" Grid.Column="1" Text="TextEdit"/>

<sdk:Label Grid.Row="2" Grid.Column="0" Content="用户名"/>

<dxe:TextEdit Grid.Row="2" Grid.Column="1" Text="TextEdit"/>

<Grid Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="3">

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="80"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<sdk:Label Grid.Row="0" Grid.Column="0" Content="密码"/>

<dxe:TextEdit Grid.Row="0" Grid.Column="1" Text="TextEdit"/>

</Grid>

<Border Grid.Row="3" BorderBrush="Red" BorderThickness="0.5">

<RadioButton Content="请选择" IsChecked="true" Margin="5"/>

</Border>

<sdk:Label Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3" Content=""/>

</Grid>

</Border>

</StackPanel>

</Grid>

 

</UserControl>

转载于:https://www.cnblogs.com/lyf681888/p/3653437.html