WPF的时间表

Question

我正在使用DataGrid控件开发时间轴应用程序，但找不到在单元格中插入和绑定Canvas控件的方法。我应该使用其他控件吗？

<UserControl x:Class="Timelines.Controls.TimelineViewer2"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Timelines.Controls"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <DataGrid Name="TimelineGrids" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Item" Binding="{Binding Name}"/>
            <DataGridTemplateColumn Header="Timeline" CanUserResize="True">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Canvas Name="TimelineCanvas"></Canvas>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

Answer 1

有两种绘制时间表的方法。

数据绑定与后面的代码

第一种方法是使用数据绑定，您已经中途了。这样，您可以定义数据模型和数据模板，模型中的条目可能具有诸如名称，出生和已婚之类的属性，和出生和已婚具有类似1980的整数值来表示年份，并且 数据模板 定义了条目以视觉方式呈现。

另一种方法是在后面使用代码，构造一个Canvas并使用C＃在Canvas ...上绘制线条和标签，然后将Canvas插入到{{ 1}}单元格。

问题：

现在您被卡住了，因为您希望将它们混合在一起，所以首先要使用数据绑定来填充数据模型中DataGrid中的某些行，每行都有一个DataGrid标签和一个{ {1}}，然后您想要访问Name以便使用后面的代码进行绘制。由于Canvas是使用数据绑定创建的，因此您很难获得对其的引用，甚至无法使用名称Canvas对其进行访问，因为该名称具有“模板作用域”-这意味着只能从模板中访问它。

可以使用 VisualTreeHelper 从后面的代码访问Canvas。请参阅如何：Find DataTemplate-Generated Elements。但是我不建议这种“混合方法”。

解决方案

固定到数据绑定（如果您熟悉XAML）或后面的代码。

如果选择数据绑定，请在Canvas中添加线和标签 insides TimelineCanvas，当然，您需要通过绑定到模型中的某些属性来计算它们在画布上的位置。

DataTemplate

如果您选择后面的代码，请删除<DataGridTemplateColumn.CellTemplate> <DataTemplate> <Canvas Name="TimelineCanvas"> <Label Content="Born" Canvas.X="30" Canvas.Y="20" /> <Line X1="10" Y1="30" X2="350" Y2="30" Stroke="Blue" StrokeThickness="1" /> <!--The whole data template can be quite complicated, but here I just hard code a label and a line to get you started--> </Canvas> </DataTemplate> </DataGridTemplateColumn.CellTemplate> 。

CellTemplate

在我看来，这两种方法都具有挑战性，您可以为<DataGridTemplateColumn.CellTemplate> <DataTemplate> <Canvas Name="TimelineCanvas"></Canvas> </DataTemplate> </DataGridTemplateColumn.CellTemplate> 定义 UserControl ，因此可以将构造逻辑隔离在一个单独的类中。