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

时间:2022-08-09 16:39:35

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