DataTemplate 数据模板的使用

最新推荐文章于 2024-06-13 13:37:57 发布

weixin_30885111

最新推荐文章于 2024-06-13 13:37:57 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Clivia/archive/2010/11/15/silverlight07.html

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);
        }

代码注释很详细就不多做解释了。

运行效果：