Как создать зазор между столбцами WPFToolkit DataGrid

У меня есть сетка данных WPF (из набора инструментов WPF, как указано в заголовке), и мне нужен промежуток между некоторыми столбцами, где даже заголовок не находится выше, и вы можете видеть фон между ними. Я понятия не имею, как с этим справиться.

Между прочим, все мои столбцы - это TemplateColumns, но я бы предпочел решение, в котором мне не нужно стилизовать каждый столбец и его заголовок, чтобы он имел болтливость с одной стороны. Возможно, что-то вроде <DataGridGapColum Width="5" />, но, к сожалению, такого не существует.


person Tokk    schedule 08.12.2010    source источник
comment
Думаю, изображение, на котором видно, о чем вы просите, поможет   -  person Erez    schedule 15.12.2010


Ответы (1)


Это потребует некоторых шагов. Сначала нам нужно отключить GridLines в DataGrid, чтобы мы могли получить «Gap Cells». Вместо этого мы оставим GridLines DataGridCells. Мы также должны указать GridLinesBrush. Мы не можем создать стиль «DataGridGapColumn» для DataGridColumn, поскольку он не является производным от FrameworkElement, поэтому нам придется согласиться на GapCellStyle и GapHeaderStyle. Затем мы можем создать столбец DataGridGapColumn, подобный этому

<DataGridTextColumn Width="100"
                    CellStyle="{StaticResource DataGridGapCell}"
                    HeaderStyle="{StaticResource DataGridGapHeader}"/>

alt text

Пример с некоторыми столбцами и столбцами с пробелами

<DataGrid x:Name="dataGrid"
          GridLinesVisibility="None"
          HorizontalGridLinesBrush="Black"
          ...>
    <DataGrid.Resources>
        <!-- Regular Cell Style -->
        <Style TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="0,0,1,1"/>
            <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
        </Style>
        <!-- Gap Cell Style -->
        <Style x:Key="DataGridGapCell" TargetType="DataGridCell">
            <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
            <Setter Property="BorderThickness" Value="0,0,1,0"/>
            <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
        </Style>
        <!-- Gap ColumnHeader Style -->
        <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader">
            <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Header 1" Binding="{Binding Header1}"/>
        <DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
        <DataGridTextColumn Header="Header 2" Binding="{Binding Header2}"/>
        <DataGridTextColumn Header="Header 3" Binding="{Binding Header3}"/>
        <DataGridTextColumn Width="50" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
        <DataGridTextColumn Header="Header 4" Binding="{Binding Header4}"/>
        <DataGridTextColumn Header="Header 5" Binding="{Binding Header5}"/>
    </DataGrid.Columns>
</DataGrid>

Обновить
Стили можно поместить в ResourceDictionary или Window.Resouces. Пример

<Window.Resources>
    <Style x:Key="DataGridGapStyle" TargetType="DataGrid">
        <Setter Property="GridLinesVisibility" Value="None"/>
        <Setter Property="HorizontalGridLinesBrush" Value="Black"/>
    </Style>
    <!-- Regular Cell Style -->
    <Style TargetType="DataGridCell">
        <Setter Property="BorderThickness" Value="1,0,1,1"/>
        <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
    </Style>
    <!-- Gap Cell Style -->
    <Style x:Key="DataGridGapCell" TargetType="DataGridCell">
        <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
        <Setter Property="BorderThickness" Value="0,0,0,0"/>
        <Setter Property="BorderBrush" Value="{Binding ElementName=dataGrid, Path=HorizontalGridLinesBrush}"/>
    </Style>
    <!-- Gap ColumnHeader Style -->
    <Style x:Key="DataGridGapHeader" TargetType="DataGridColumnHeader">
        <Setter Property="Background" Value="{Binding ElementName=dataGrid, Path=Background}"/>
    </Style>
</Window.Resources>
<Grid>
    <DataGrid x:Name="dataGrid"
              Style="{StaticResource DataGridGapStyle}"
              AutoGenerateColumns="False"
              ItemsSource="{Binding MyCollection}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Header 1" Binding="{Binding Header1}"/>
            <DataGridTextColumn Width="100" CellStyle="{StaticResource DataGridGapCell}" HeaderStyle="{StaticResource DataGridGapHeader}"/>
            <DataGridTextColumn Header="Header 2" Binding="{Binding Header2}"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>
person Fredrik Hedblad    schedule 16.12.2010
comment
Что ж, немного грустно, что это так сложно, но ладно. Спасибо - person Tokk; 16.12.2010
comment
@Tokk: Да, это немного сложно. Стили, которые находятся в DataGrid.Resources, могут располагаться где угодно, например ResourceDictionary. Там вы также можете создать стиль для DataGrid, а затем все, что вам нужно сделать, чтобы получить столбец Gap, - это добавить ‹DataGridTextColumn Width = 50 CellStyle = {StaticResource DataGridGapCell} HeaderStyle = {StaticResource DataGridGapHeader} /› - person Fredrik Hedblad; 16.12.2010
comment
Итак, наконец, я создал DataGridGapColumn, производный от DataGridColumn, сделав ваши предложения стандартным стилем для него. Это немного упрощает задачу. - person Tokk; 16.12.2010
comment
@Tokk: Верно, создание подклассов - это то, о чем я не думал :) Хорошая мысль - person Fredrik Hedblad; 16.12.2010