DataTemplate——数据模板的一个典型例子

下面是ListBox.ItemTemplate(数据模板)应用的“典型”例子，概述如下两点：

    1：Grid部分，用来“规划” 数据 显示的 布局（即数据长成什么样子）

    2：给DataTemplate添加触发器（即给Item添加了触发器）,因此联想到，也可以给ControlTemplate添加触发器。

 

<ListBox.ItemTemplate>
                <DataTemplate DataType="TwoLevelTreeNodeViewModel">
                    <--Grid部分，“规划” 数据 以 何种 样子 展现出来-->                
                    <Grid>
                        <Grid.Background>
                            <ImageBrush AlignmentX="Left" AlignmentY="Top" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,229,42" ImageSource="/FounderAMP;component/Images/Police/SearchResult_bg.png"/>
                        </Grid.Background>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="11"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Name="selectedBackground" Fill="#3d7cff" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" Visibility="Collapsed"/>
                        <TextBlock Name="headerLabel" Text="{Binding Path=HeaderText}" Grid.Column="0" TextTrimming="WordEllipsis" ToolTip="{Binding Path=HeaderText}"   HorizontalAlignment="Stretch" TextAlignment="Left" VerticalAlignment="Center" Margin="8,0,0,0" Width="200" FontFamily="Microsoft YaHei" FontSize="13" />
                        <TextBlock Name="footerLabel" ToolTip="{Binding Path=FooterText}" TextTrimming="WordEllipsis" Text="{Binding Path=FooterText}" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="13" FontWeight="Bold" Margin="0,0,6,0" />
                        <Image Source="/FounderAMP;component/Images/Police/Downward_Triangle.png" Grid.Column="1" Cursor="Hand" Visibility="{Binding Path=ExpandingVisibility}" Name="ExpandOrgNodeImage" MouseLeftButtonDown="ExpandOrgNodeImage_MouseLeftButtonDown" Tag="{Binding}"/>
                    </Grid>
                    <--给DataTemplate添加触发器（即给Item添加了触发器）-->
                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True"><-- 由于该DataTemplate 是为ListBox.ItemTemplate定义的，所以当鼠标悬停在“Item”上时，会“激发”该触发器
                            <Setter TargetName="selectedBackground" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="headerLabel" Property="Foreground" Value="White"/>
                            <Setter TargetName="footerLabel" Property="Foreground" Value="White"/>
                            <Setter TargetName="ExpandOrgNodeImage" Property="Source" Value="/FounderAMP;component/Images/Police/downwardTriangle_WhiteBackground.png"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                   
                </DataTemplate>
            </ListBox.ItemTemplate>