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

转载

mb5ff980f81f3d8 2014-01-14 22:12:00

文章标签 触发器数据 microsoft sed 鼠标悬停 文章分类 代码人生

下面是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>