Элемент управления ControlTemplate DataGridColumnHeader, видимый вне столбцов

Я настраиваю стиль DataGrid и хочу описать ControlTemplate заголовка столбцов.

Это в основном текстовый блок и изображение, но проблема в том, что, когда я добавляю контрольное изображение, я нахожу его также в нижней части моего заголовка ...

Я пробовал много вещей, чтобы решить эту проблему, например, используя DataTemplate, но это не работает лучше ...

Вот код XAML:

<Style TargetType = "{x:Type DataGridColumnHeader}">
<Setter Property = "SnapsToDevicePixels" Value = "True" />
<Setter Property = "MinWidth" Value = "0" />
<Setter Property = "MinHeight" Value = "50" />
<Setter Property = "FontFamily" Value = "{StaticResource LatoRegular}" />
<Setter Property = "Foreground" Value = "#FF000000" />
<Setter Property = "FontSize" Value = "14" />
<Setter Property = "Cursor" Value = "Hand" />
<Setter Property = "FocusVisualStyle" Value = "{x:Null}" />
<Setter Property = "Template">
    <Setter.Value>
        <ControlTemplate TargetType = "{x:Type DataGridColumnHeader}">
            <Grid>
                <Border Grid.Column = "0" BorderThickness = "0,1,0,1" BorderBrush = "#FFEDEDED">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width = "*" />
                            <ColumnDefinition Width = "20" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column = "0" Margin = "6" HorizontalAlignment = "Left" VerticalAlignment = "Center"
                                TextTrimming = "CharacterEllipsis"
                                FontFamily = "{StaticResource LatoRegular}"
                                Text = "{TemplateBinding Content}" />

                        <Image Grid.Column = "1" Height = "16" Width = "16" Source = "..\..\View\Image\search.png" RenderOptions.BitmapScalingMode = "HighQuality" />
                    </Grid>
                </Border>

                <Thumb x:Name = "PART_LeftHeaderGripper" HorizontalAlignment = "Left" Opacity = "0" Cursor = "SizeWE" />
                <Thumb x:Name = "PART_RightHeaderGripper" HorizontalAlignment = "Right" Opacity = "0" Cursor = "SizeWE" />
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

У вас есть идея, как исправить или обойти проблему?

Спасибо вам всем!

Дайте стилю ключ и примените к каждому столбцу как HeaderStyle = "{StaticResource YourColumnHeaderStyle}". Он ведет себя так же?

— 01.05.2018 14:54

Спасибо, работает лучше! Но на той части, где нет столбца, по умолчанию используется заголовок. Не могу применить второй контрольный шаблон для этой части шапки, идея? nsa39.casimages.com/img/2018/05/01/180501032920279273.png

— 01.05.2018 15:19

Для последнего столбца установите Width = «*». Это займет все пространство, поэтому вы не увидите пустой заголовок.

— 01.05.2018 15:25

Это снова отображает изображение :(

— 01.05.2018 15:31

c# wpf datagrid controltemplate

01.05.2018 14:36

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

309

Ответы 2

У меня получилось вот так:

Без ключа для стиля datagrid по умолчанию

<Style TargetType = "{x:Type DataGridColumnHeader}">
    <Setter Property = "SnapsToDevicePixels" Value = "True" />
    <Setter Property = "MinWidth" Value = "0" />
    <Setter Property = "MinHeight" Value = "50" />
    <Setter Property = "FontFamily" Value = "{StaticResource LatoRegular}" />
    <Setter Property = "Foreground" Value = "#FF000000" />
    <Setter Property = "FontSize" Value = "14" />
    <Setter Property = "Cursor" Value = "Hand" />
    <Setter Property = "FocusVisualStyle" Value = "{x:Null}" />
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType = "{x:Type DataGridColumnHeader}">
                <Border Grid.Column = "0" BorderThickness = "0,1,0,1" BorderBrush = "#FFEDEDED" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

и стиль для каждого столбца

<Style x:Key = "styleDtgHeader" TargetType = "{x:Type DataGridColumnHeader}">
    <Setter Property = "SnapsToDevicePixels" Value = "True" />
    <Setter Property = "MinWidth" Value = "0" />
    <Setter Property = "MinHeight" Value = "50" />
    <Setter Property = "FontFamily" Value = "{StaticResource LatoRegular}" />
    <Setter Property = "Foreground" Value = "#FF000000" />
    <Setter Property = "FontSize" Value = "14" />
    <Setter Property = "Cursor" Value = "Hand" />
    <Setter Property = "FocusVisualStyle" Value = "{x:Null}" />
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType = "{x:Type DataGridColumnHeader}">
                <Grid>
                    <Border Grid.Column = "0" BorderThickness = "0,1,0,1" BorderBrush = "#FFEDEDED" Background = "red">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width = "*" />
                                <ColumnDefinition Width = "20" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Grid.Column = "0" Margin = "6" HorizontalAlignment = "Left" VerticalAlignment = "Center"
                                    TextTrimming = "CharacterEllipsis"
                                    FontFamily = "{StaticResource LatoRegular}"
                                    Text = "{TemplateBinding Content}" />

                            <Image Grid.Column = "1" Height = "16" Width = "16" Source = "..\..\View\Image\search.png" RenderOptions.BitmapScalingMode = "HighQuality" />
                        </Grid>
                    </Border>

                    <Thumb x:Name = "PART_LeftHeaderGripper" HorizontalAlignment = "Left" Opacity = "0" Cursor = "SizeWE" />
                    <Thumb x:Name = "PART_RightHeaderGripper" HorizontalAlignment = "Right" Opacity = "0" Cursor = "SizeWE" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Но сомневаюсь, что это чистое решение?

01.05.2018 15:27

Чтобы решить эту проблему, вам необходимо выполнить следующие действия:

Установите ширину последнего столбца на *, чтобы дополнительный столбец не создавался.
В шаблоне элемента управления DataGridColumnHeader установите для ширины первого столбца Grids значение «auto» и значение HorizontalAlingment для изображения слева.

Вот код

<Style TargetType = "{x:Type DataGridColumnHeader}">
        <Setter Property = "SnapsToDevicePixels" Value = "True" />
        <Setter Property = "MinWidth" Value = "0" />
        <Setter Property = "MinHeight" Value = "50" />
        <Setter Property = "FontFamily" Value = "{StaticResource LatoRegular}" />
        <Setter Property = "Foreground" Value = "#FF000000" />
        <Setter Property = "FontSize" Value = "14" />
        <Setter Property = "Cursor" Value = "Hand" />
        <Setter Property = "FocusVisualStyle" Value = "{x:Null}" />
        <Setter Property = "Template">
            <Setter.Value>
                <ControlTemplate TargetType = "{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Border Grid.Column = "0" BorderThickness = "0,1,0,1" BorderBrush = "#FFEDEDED">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width = "auto" />
                                    <ColumnDefinition Width = "20" />
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column = "0" Margin = "6" HorizontalAlignment = "Left" VerticalAlignment = "Center"
                            TextTrimming = "CharacterEllipsis"
                            Text = "{TemplateBinding Content}" />
                                <Image Grid.Column = "1" Height = "16" Width = "16" Source = "C:\Users\a0711212\Desktop\profilePic.png"
                                      HorizontalAlignment = "Left"  RenderOptions.BitmapScalingMode = "HighQuality" />
                            </Grid>
                        </Border>

                        <Thumb x:Name = "PART_LeftHeaderGripper" HorizontalAlignment = "Left" Opacity = "0" Cursor = "SizeWE" />
                        <Thumb x:Name = "PART_RightHeaderGripper" HorizontalAlignment = "Right" Opacity = "0" Cursor = "SizeWE" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

В этом случае размер последнего столбца больше нельзя изменить, и я хочу, чтобы он оставался таким. Я также хочу, чтобы изображение оставалось замороженным. Все же разрешите поблагодарить вас :)

— 01.05.2018 16:12

Чтобы изменить размер последнего столбца, вы можете добавить фиктивный столбец в конце с MinWidth = "0" и Width = "0" и Set HeaderStyle = {x: null}.

— 02.05.2018 13:25

01.05.2018 15:56