WPF DataTemplate 数据模板例子及注意使用

DataTemplate 就是数据模板，用来指定数据的表现形式。

如下：

主控件：

ScrollViewer.HorizontalScrollBarVisibility="Disabled"   item可实现自动换行

        <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" Margin="10,0,10,10" Grid.Row="1" ItemTemplate="{DynamicResource ItemDataTemplate}" ItemsSource="{Binding ProInfolist}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

数据模板如下： 

其中数据模板中的按钮事件，需要绑定为如下格式（查找父控件方式相对），才能进行触发：

 Command="{Binding DataContext.ModifiyCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}, Mode=FindAncestor}}"
                        CommandParameter="{Binding SelectedItem,RelativeSource={RelativeSource AncestorType={x:Type ListBox}, Mode=FindAncestor}}"

 <DataTemplate x:Key="ItemDataTemplate">
            <Grid Background="LightGray" x:Name="grds" Width="110">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Viewbox>
                    <Grid Margin="10" x:Name="grd">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="ID" />
                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ID}"/>
                        <TextBlock Grid.Row="1" Text="名称" />
                        <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}"/>
                        <TextBlock Grid.Row="2" Text="程序号" />
                        <TextBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding ProgramNo}"/>
                        <TextBlock Grid.Row="3" Text="快充/慢充"/>
                        <TextBox Grid.Row="3" Grid.Column="1"  Text="{Binding IsFastCharge}"/>
                        <TextBlock  Grid.Row="4" Text="慢充压力" />
                        <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding PressureValveSmall}"/>
                        <TextBlock Grid.Row="5" Text="快充压力" />
                        <TextBox Grid.Row="5" Grid.Column="1" Text="{Binding PressureValveLarge}"/>
                        <TextBlock Grid.Row="6" Text="充气时间" />
                        <TextBox Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding AerationTime}"/>
                        <TextBlock Grid.Row="7" Text="所属功能" />
                        <TextBox Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Type}"/>
                        <TextBlock Grid.Row="8" Text="流量范围" />
                        <TextBox Grid.Row="8" Grid.Column="1" Text="{Binding RangeFlowMin}"/>
                        <TextBox Grid.Row="8" Grid.Column="2" Text="{Binding RangeFlowMax}"/>
                        <TextBlock Grid.Row="9" Text="压力范围" />
                        <TextBox Grid.Row="9" Grid.Column="1" Text="{Binding RangePressMin}"/>
                        <TextBox Grid.Row="9" Grid.Column="2" Text="{Binding RangePressMax}"/>
                        <TextBlock Grid.Row="10" Text="时间" />
                        <TextBlock Grid.Row="10" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding SaveTime, Mode=TwoWay, StringFormat=yyyy/MM/dd HH:mm:ss}"/>
                    </Grid>
                </Viewbox>
                <Button x:Name="btnModifiy" 
                        Visibility="Collapsed" Grid.Row="1" FontSize="10" 
                        Tag="{Binding ElementName=grds}" 
                        Content="修改" 
                        Command="{Binding DataContext.ModifiyCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}, Mode=FindAncestor}}"
                        CommandParameter="{Binding SelectedItem,RelativeSource={RelativeSource AncestorType={x:Type ListBox}, Mode=FindAncestor}}"/>
                <Popup x:Name="popup">
                </Popup>
            </Grid>
            <DataTemplate.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True"/>
                        <Condition Binding="{Binding IsMouseOver,ElementName=grds}"  Value="true"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Width" TargetName="grds" Value="300"/>
                    <Setter Property="Visibility" TargetName="btnModifiy" Value="Visible"/>
                </MultiDataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>