DataGridTemplateColumn 中的用户控件答案

【问题标题】：User Control in DataGridTemplateColumnDataGridTemplateColumn 中的用户控件
【发布时间】：2012-06-08 22:01:19
【问题描述】：

我有一个数据网格，我在其中将所有内容旋转 90 度以垂直显示我的信息。并不是说这与我不认为的任何事情有关。我正在尝试将一个基本上是扩展器的 UserControl 添加到 DataGridTemplateColumn 中。我遇到的问题是，当我打开扩展器（用户控件）时，它在其下方的单元格后面打开。我需要把它带到前面基本上重叠它。我将它放在画布中，这样用户控件就不会在单元格内打开并展开。我希望单元格保持相同的大小，并且在打开扩展器时，它将重叠并显示覆盖其下方的数据单元格。任何想法我做错了什么？

  <DataGridTemplateColumn Header="Expander" CanUserResize="False" Width="Auto">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate DataType="UserControl">
                                <Grid Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SnapsToDevicePixels="True" OverridesDefaultStyle="True">
                                    <Canvas>
                                        <local:DescriptionUserControl DataContext="{Binding Path=DescriptionViewModel}" x:Name="Description" Height="Auto" Width="Auto" Focusable="True" Margin="0,-2">
                                        </local:DescriptionUserControl>
                                    </Canvas>
                                </Grid>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>

                    <DataGridTemplateColumn Header="Worksheet" Width="Auto">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="View Worksheet" HorizontalAlignment="Center" VerticalAlignment="Center" Height="26" Width="110" ></Button>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>

                 <DataGridTextColumn Header="Veeps" width="Auto"></DataGridTextColumn>
                </DataGrid.Columns>

【问题讨论】：

有人吗？不知道还能在这里尝试什么

标签： wpf xaml datagridtemplatecolumn

【解决方案1】：

Canvas 是个问题。它从不尝试扩大它的父母，这就是细胞不扩大的原因。

但是，它仍然是可视化树的一部分，并且还有其他元素具有更高的ZIndex。您可以尝试在扩展器展开时修复ZIndex，但我认为这将花费太多工作，并且会出现难以查找和修复的错误。

我会走“自定义控制”路线。构建一个继承自HeaderdContentControl 并具有一个附加属性的控件：IsPopupShowing。内容将在一个弹出窗口中，并且位于可视化树之外。

其实只用一个模板就可以实现（虽然，我还是推荐自定义控件）。像这样的：

<Style x:Key="PoppingExpander" TargetType="{x:Type HeaderedContentControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type HeaderedContentControl}">
                <Grid>
                    <ToggleButton x:Name="HeaderHolder"
                                  Content="{TemplateBinding Header}"
                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                                  ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                  ContentStringFormat="{TemplateBinding HeaderStringFormat}"/>
                    <Popup x:Name="ContentHolder"
                           Placement="Bottom">
                        <Border Background="Aqua"
                                BorderBrush="LightBlue"
                                BorderThickness="1">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Margin="{TemplateBiding Padding}" />
                        </Border>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger SourceName="HeaderHolder" Property="IsChecked" Value="True">
                        <Setter TargetName="ContentHolder" Property="IsOpen" Value="True"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

[我本可以将弹出窗口的IsOpen 属性绑定到切换按钮的IsChecked 属性，但我真的不喜欢使用ElementName 语法，因为它对它的范围非常特别，并且会产生非常严重的错误很难追捕。除了ElementName]

，我更喜欢any

这会给你一个HeaderedContentControl，它的内容在一个弹出窗口中。您需要将切换按钮的样式设置为类似于扩展器中使用的样式（您可以通过混合提取扩展器的样式，它将具有按钮的样式）。

将您对Expander 的使用更改为HeaderedContentControl，删除特定于Expander 的属性设置器（如IsExpanded），您应该完成了。

附： - 如果您希望它以另一个方向打开，您可以更改弹出窗口的Placement 属性。

【讨论】：