如何将自定义UserControl分配给DataGrid列标题？ [英] How can I assign a custom UserControl to a DataGrid column header?

问题描述

我正在尝试使用具有文本框和按钮的自定义标题来创建一个datagrid。文本框和按钮由我创建的 UserControl 表示：

  ; UserControl x：Class =SilverlightWorkshop.Controls.CollapsibleDataGridHeader
 ... 
 /> 
< StackPanel Orientation =Horizo​​ntal> 
< TextBlock Text ={Binding HeaderText，Mode = TwoWay}/> 
< Button Content =←Click =ArrowButtonClick/> 
< / StackPanel> 
< / UserControl>这个想法是，当用户点击按钮时，列宽就会折叠到一个小的大小。但是，我无法找到一个优雅的解决方案，使用此控件作为列标题的模板。
 
 
 
这样做：
 < sdk：DataGrid> 
< sdk：DataGrid.Columns> 
< sdk：DataGridTextColumn> 
< sdk：DataGridTextColumn.Header> 
 foo 
< / sdk：DataGridTextColumn.Header> 
< / sdk：DataGridTextColumn> 
< / sdk：DataGrid.Columns> 
< / sdk：DataGrid> 
  
但我不能放在控件中。这不起作用：
 < sdk：DataGrid> 
< sdk：DataGrid.Columns> 
< sdk：DataGridTextColumn> 
< sdk：DataGridTextColumn.Header> 
< Button /> 
< / sdk：DataGridTextColumn.Header> 
< / sdk：DataGridTextColumn> 
< / sdk：DataGrid.Columns> 
< / sdk：DataGrid> 
  
但是， http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives .datagridcolumnheader（v = vs95）.aspx 暗示我可以添加单个对象作为标题的小孩。
 
 
 
最接近我getten将标题设置为一种样式：
 < navigation：Page xmlns：my =clr-namespace：SilverlightWorkshop.Controls xmlns：sdk =http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdkx：Class =SilverlightWorkshop.Views.CollapsibleColumns
 xmlns =http：// schemas。 $ microsoft.com/winfx/2006/xaml/presentation
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 xmlns：d =http：// schemas.microsoft.com/expression/blend/2008
 xmlns：mc =http://schemas.openxmlformats.org/markup-compatibility/2006
 mc：Ignorable =d
 xmlns：navigation =clr-namespace：System.Windows.Controls; assembly = System.Windows.Controls.Navigation
d：DesignWidth =640d：DesignHeight = 480
 Title =CollapsibleColumns Page> 
< navigation：Page.Resources> 
< Style x：Key =CollapsibleHeaderStyleTargetType =sdk：DataGridColumnHeader> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =sdk：DataGridColumnHeader> 
< my：CollapsibleDataGridHeader HeaderText =CheeseArrowButtonClicked =ArrowButtonClick/> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< / navigation：Page.Resources> 
< sdk：DataGrid ItemsSource ={Binding Data，Mode = TwoWay}AutoGenerateColumns =False> 
< sdk：DataGrid.Columns> 
< sdk：DataGridTextColumn Binding ={Binding String2，Mode = TwoWay}HeaderStyle ={StaticResource CollapsibleHeaderStyle}/> 
< sdk：DataGridTextColumn Binding ={Binding String1，Mode = TwoWay}/> 
< / sdk：DataGrid.Columns> 
< / sdk：DataGrid> 
< / navigation：Page> 
  
然而，有一些我不喜欢的东西。设置列标题的模板属性将删除一些默认外观，如标题和排序图标的背景颜色。看起来我完全取代了整个事情。
 
 
 
此外，我不知道如何找到哪个列标题被点击，所以我可以改变的宽度适当的列，以及我将如何将每列的不同头名称绑定到我的 CollapsibleDataGridHeader 控件中的 HeaderText 属性。 p> 
 
 
是否可以避免使用样式，而将我的控件分配给列标题？如果没有，我该如何去做绑定，并使用上面的样式设置解决方案检索哪一列？
解决方案
 Manas Patnaik似乎有答案：
 
 
 
  http://manaspatnaik.com/blog/index.php/technology/silverlight-4/accessing-controls-in-datagrid-columnheader-silverlight / 877  
 
 
 
有XAML显示如何设置标题模板，以便保留默认样式，并说明如何从DataGrid头文件通过代码隐藏。
 
 
 
这个答案解释了如何绑定到Style中设置的控件：
 
 
 
 动态设置标题文字Silverlight DataGrid列 
 
I am trying to make a datagrid with a custom header that has a textblock and a button. The textblock and button is represented by this UserControl I created:
<UserControl x:Class="SilverlightWorkshop.Controls.CollapsibleDataGridHeader"
    ...
    />
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding HeaderText, Mode=TwoWay}" />
        <Button Content="←" Click="ArrowButtonClick"/>
    </StackPanel>
</UserControl>
The idea is, when the user clicks the button, the column width will collapse to a small size. However, I am having trouble finding an elegant solution for using this control as a template for a column header.

This works:
<sdk:DataGrid>
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn>
            <sdk:DataGridTextColumn.Header>
                foo
            </sdk:DataGridTextColumn.Header>
        </sdk:DataGridTextColumn>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>
But I can't drop in a control. This does not work:
<sdk:DataGrid>
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn>
            <sdk:DataGridTextColumn.Header>
                <Button/>
            </sdk:DataGridTextColumn.Header>
        </sdk:DataGridTextColumn>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>
However, http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.datagridcolumnheader(v=vs.95).aspx implies that I could add a single object as a child of the header.

The closest I've gotten is setting the header as a style:
<navigation:Page xmlns:my="clr-namespace:SilverlightWorkshop.Controls"  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SilverlightWorkshop.Views.CollapsibleColumns" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="CollapsibleColumns Page">
    <navigation:Page.Resources>
        <Style x:Key="CollapsibleHeaderStyle" TargetType="sdk:DataGridColumnHeader">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:DataGridColumnHeader">
                        <my:CollapsibleDataGridHeader HeaderText="Cheese" ArrowButtonClicked="ArrowButtonClick"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </navigation:Page.Resources>
    <sdk:DataGrid ItemsSource="{Binding Data, Mode=TwoWay}" AutoGenerateColumns="False">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Binding="{Binding String2, Mode=TwoWay}" HeaderStyle="{StaticResource CollapsibleHeaderStyle}"/>
            <sdk:DataGridTextColumn Binding="{Binding String1, Mode=TwoWay}"/>
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>
</navigation:Page>
However, there are a couple things that I do not like. Setting the template property of the column header wipes out some of the default appearance, like the background color of the header and the sort icon. It looks like I literally replace the whole thing.

Also, I'm not sure how I can find out which column header was clicked so I can change the width of the appropriate column nor how I would bind different header names for each column to the HeaderText property in my CollapsibleDataGridHeader control.

Is it possible to avoid using styles and instead assign my control to the column header? If not, how would I go do bindings and retrieve which column was clicked using the Style-setting solution above?
解决方案
This post by Manas Patnaik seems to have the answer:

http://manaspatnaik.com/blog/index.php/technology/silverlight-4/accessing-controls-in-datagrid-columnheader-silverlight/877

There is XAML displaying how to set the header template so it retains the default style, and also an explanation of how to access the controls from the DataGrid header through code-behind.

This answer explains how to bind to the controls set in the Style:

Dynamically setting the Header text of a Silverlight DataGrid Column

                        
这篇关于如何将自定义UserControl分配给DataGrid列标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！