DataTemplate 数据模板的使用
DataTemplate在silverlight中用来描述数据对象的可是结构。DataTemplate的对象树必须有一个根元素,可以有任意个子元素。
在使用中常用作ListBox等对象的ItemTemplete来改变控件外观和解决一些数据的绑定,这个使用比较简单,在此我们不多做说明,本文主要介绍DataTemplate的LoadContent 方法。
LoadContent:该方法创建DataTemplete的UIElement对象,可以将这些对象添加到其他UIElement可视化树中。
在实际应用中我们可以通过样式、模板等方法改变控件外观,并且可以给样式或者模板中的样式添加事件,比如说给柱状图中柱状图形添加一个鼠标事件,TabControl的TabItem添加一个关闭事件,这些有的在样式中并不好控制,如果系统需要换肤应用起来更加麻烦,此时考虑到用DataTemplete的LoadContent方法就可以很好的得到解决。
下面演示一个更改TabItem的Header例子。
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Vertical"> <Button Content="Button" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click"/> <sdk:TabControl Height="100" x:Name="tabControl1" Width="200" HorizontalAlignment="Left" > </sdk:TabControl> </StackPanel>
添加一个Tabontrol,和一个Button,同过Button给TabControl添加TabITem项。
public MainPage() { InitializeComponent(); TabItem tbi1 = new TabItem(); tbi1.Header = "默认选中"; tabControl1.Items.Add(tbi1); tabControl1.SelectedIndex = 0; }
tabControl1添加一个默认的TabItem。
下面是重点,在Button的事件中添加TabItem,并且给这个TabITem添加数据模板实现关闭TabItem。
private void button1_Click(object sender, RoutedEventArgs e) { //新建TabItem TabItem tbi = new TabItem(); //TabItem的DataTemplate DataTemplate dt = (DataTemplate)System.Windows.Markup.XamlReader.Load(@"<DataTemplate xmlns=""http://schemas.microsoft.com/client/2007""> <Border CornerRadius=""8,8,0,0""> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width=""*""/> <ColumnDefinition Width=""20""/> </Grid.ColumnDefinitions> <TextBlock Grid.Column=""0"" Text=""{Binding}"" Margin=""0,0,5,0""></TextBlock> <Grid Grid.Column=""1"" Cursor=""Hand"" HorizontalAlignment=""Right"" Name=""Close"" Width=""20"" Height=""20"" > <Grid.Background> <ImageBrush ImageSource=""/SilverlightDateTemplete;component/Close.png"" /> </Grid.Background> </Grid> </Grid> </Border> </DataTemplate>"); var Panel = dt.LoadContent() as Border; //绑定Header Panel.DataContext = "新建"; if (Panel != null) { var img = Panel.FindName("Close") as Grid; if (img != null) { //添加关闭事件 img.MouseLeftButtonUp += (s, ex) => { ex.Handled = true; TabItemClose(tbi); }; } } tbi.Header = Panel; tabControl1.Items.Add(tbi); } /// <summary> /// 关闭TabItem事件 /// </summary> /// <param name="tbi"></param> private void TabItemClose(TabItem tbi) { tabControl1.Items.Remove(tbi); }
代码注释很详细就不多做解释了。
运行效果:
可以通过上面的图标关闭TabItem。实际效果请下载示例代码。
这个代码生成的DataTemplate可以在xaml中定义在资源里面,可以通过如下代码搞定:
var template = UsercontrolName.Resources["TemplateKey"] as DataTemplate;
放在资源文件里有一个弊端就是实现事件比较困难,如果哪儿位同学有更好的办法欢迎交流。
示例代码:https://files.cnblogs.com/Clivia/SilverlightDateTemplete.rar