wpf - ヘッダーの後ろにあるグラデーションスタイルを削除します

Question

現在、次の画面があります。ヘッダーの背後にあるツートーンの背景を削除したいと思います。赤い矢印はその場所を指し、緑はそれがカバーする領域を強調しています。

ここに画像の説明を入力

通常の状況では表示されませんが、列 5 にテキストボックスがあり、列ヘッダーを引き伸ばしているため、表示されています。

これを削除して透明にしたいのですが、DataGrid 上のコンポーネントやアクセス方法がわかりません。誰かが私を助けることができますか？

次の Web ページには、コンポーネントの見事な図があります。これが私が目指すべきものかどうかを確認してください。あまり運がなかったので、試してみました。ここに画像の説明を入力

ここに私の完全なXAMLがあります

<UserControl x:Class="Users.View.AllUsersView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase" 
             mc:Ignorable="d" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:helpers="clr-namespace:Users.ViewModel.Helpers"
             d:DesignHeight="160" d:DesignWidth="1100">

    <UserControl.Resources>
        <CollectionViewSource x:Key="UserCollection" Source="{Binding Path=AllUsers}">
            <CollectionViewSource.SortDescriptions>
                <scm:SortDescription PropertyName="Name" Direction="Ascending" />
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>

        <Style x:Key="UserItemStyle" TargetType="{x:Type DataGridRow}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="ItemsControl.AlternationIndex" Value="1" />
                        <Condition Property="IsSelected" Value="False" />
                        <Condition Property="IsMouseOver" Value="False" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="#EEEEEEEE" />
                </MultiTrigger>
            </Style.Triggers>
        </Style>

        <DataTemplate x:Key="headerTemplate">
            <TextBlock Padding="0,0,0,0" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding}"/>
        </DataTemplate>

        <Style x:Key="RowHeaderStyle2" TargetType="DataGridRowsPresenter">
            <Setter Property="Background" Value="{x:Null}"/>
        </Style>
        <Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
            <Setter Property="VerticalContentAlignment" Value="Bottom"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Height" Value="25"/>
        </Style>
        <Style x:Key="ModuleColumnHeaderStyle" TargetType="GridViewColumnHeader">
            <Setter Property="VerticalContentAlignment" Value="Bottom"/>
            <Setter Property="Width" Value="550"/>
        </Style>

        <helpers:FirstItemConverter x:Key="firstItemConvertion"/>

        <Style x:Key="ListViewItemRotatedText" TargetType="TextBlock">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="-45" />
                </Setter.Value>
            </Setter>
            <Setter Property="Width" Value="130"/>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ModuleName, Converter={StaticResource firstItemConvertion}, ConverterParameter=0}" Value="true">
                        <Setter Property="Margin" Value="-60,0,0,0" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <DockPanel>
        <Grid DockPanel.Dock="Bottom" Margin="0,2,4,2">
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock Text="Selected Users: " />
                <ContentPresenter Content="{Binding Path=TotalSelectedUsers}" ContentStringFormat="0" />
                <TextBlock Text=" of " />
                <ContentPresenter Content="{Binding Path=TotalUsers}" ContentStringFormat="0" />
            </StackPanel>
        </Grid>
        <DataGrid AutoGenerateColumns="False" ItemContainerStyle="{StaticResource UserItemStyle}" AlternatingRowBackground="{x:Null}" DataContext="{StaticResource UserCollection}" ItemsSource="{Binding}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/>
                <DataGridTextColumn Header="Job Title" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Job_Title}"/>
                <DataGridTextColumn Header="Department" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Department}"/>
                <DataGridTextColumn Header="Company" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Company}"/>
                <DataGridTextColumn IsReadOnly="True" Binding="{Binding Path=Company}" CanUserResize="False" Width="580">
                    <DataGridTextColumn.Header>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                            <TextBlock HorizontalAlignment="Center">Modules</TextBlock>
                            <ListBox x:Name="lstModules" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Modules}">
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" CanVerticallyScroll="False" CanHorizontallyScroll="False"></StackPanel>
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Style="{StaticResource ListViewItemRotatedText}" Text="{Binding ModuleName}"></TextBlock>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                    </DataGridTextColumn.Header>
                </DataGridTextColumn>
                <DataGridTextColumn Header="Contact Detail" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/>
            </DataGrid.Columns>
        </DataGrid>
    </DockPanel>
</UserControl>

[編集] DataGridColumnHeader の背景色を配置した後

<Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
    <Setter Property="VerticalContentAlignment" Value="Bottom"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="Height" Value="25"/>
    <Setter Property="Background" Value="Tomato"/>
</Style>
<Style x:Key="ModuleColumnHeaderStyle" TargetType="DataGridColumnHeader">
    <Setter Property="Background" Value="Tomato"/>
</Style>

これはどのように見えるかです: あなたが見ることができるように、白/グレーのツートンカラーはまだそこにあります. ここに画像の説明を入力

[EDIT2] 5 番目の列で同じものを取得するには、これらのスタイルを追加します

<Style x:Key="ListViewItemRotatedText1" TargetType="TextBlock">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="-45" />
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="130"/>
    <Setter Property="Margin" Value="0,0,0,0" />
</Style>
<Style x:Key="ListViewItemRotatedText2" TargetType="TextBlock">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="-45" />
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="130"/>
    <Setter Property="Margin" Value="-60,0,0,0" />
</Style>

... を次の StackPanel に置き換えます

<StackPanel Orientation="Horizontal">
    <TextBlock Style="{StaticResource ListViewItemRotatedText1}" >Customer Services</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Asset Management</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Works Management</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Project Management</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Rates Management</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Finance</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Human Resources</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Document Management</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >User Management</TextBlock>
    <TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Configuration</TextBlock>
</StackPanel>

[最終編集] Viv の助けを借りた結果ここに画像の説明を入力

score 4 · Accepted Answer

アップデート：

<Style TargetType="DataGridColumnHeader">
  <Setter Property="Background"
          Value="Tomato" />
</Style>

x:Key^^これをダミーのHeader()に到達させようとしているので、aを指定しないでください。PART_FillerColumnHeaderこれはおそらくすべての列にまたがり、Background.

ColumnHeaderStyleまた、これを継承する必要があるため、最終的には、

<Style TargetType="DataGridColumnHeader">
  <Setter Property="Background"
          Value="Tomato" />
</Style>
<Style x:Key="ColumnHeaderStyle"
        BasedOn="{StaticResource {x:Type DataGridColumnHeader}}"
        TargetType="DataGridColumnHeader">
  <Setter Property="VerticalContentAlignment"
          Value="Bottom" />
  <Setter Property="VerticalAlignment"
          Value="Bottom" />
  <Setter Property="Height"
          Value="25" />
</Style>

wpf - ヘッダーの後ろにあるグラデーション スタイルを削除します

1 に答える 1

Related

Reference

wpf - ヘッダーの後ろにあるグラデーションスタイルを削除します