WPF Datagrid圆角与透明背景

Question

我正在尝试在行中创建一个圆角和透明背景的Datagrid，我做得很好，但我遇到了一个问题。

当我使用边框将圆角作为蒙版时，我的标题也会变得不透明。

This is what i got

I want this layout with rounded corners

我现在没有选择。可以用其他方式制作吗？

我的代码：

<Window x:Class="SandBox.MainWindow"
    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"
    xmlns:local="clr-namespace:SandBox"
    mc:Ignorable="d"
    Background="Transparent"
    Title="MainWindow" Height="187.804" Width="717.788">

<Grid>
    <Border BorderThickness="1" BorderBrush="#FF3D3D3D" CornerRadius="5" Margin="44,28,134,60">
        <Grid>
            <Border Name="mask" Background="#33000000" CornerRadius="4"/>
            <DataGrid Name="dgConectedApps" Width="530" Height="67" Foreground="#FF2E2E2E"  
              CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" 
              AutoGenerateColumns="False" RowHeaderWidth="0"  IsReadOnly="True" BorderThickness="0" GridLinesVisibility="None"
              VerticalScrollBarVisibility="Disabled" >
                <DataGrid.OpacityMask>
                    <VisualBrush Visual="{Binding ElementName=mask}"/>
                </DataGrid.OpacityMask>
                <DataGrid.Resources>
                    <Style TargetType="{x:Type DataGridRow}">
                        <Setter Property="Background" Value="#00000000" />
                        <Setter Property="Height" Value="20" />
                        <Setter Property="Foreground" Value="DarkGray" />
                        <Setter Property="FontSize" Value="12" />
                    </Style>

                    <Style TargetType="{x:Type DataGridCell}">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="#00000000" />
                                <Setter Property="Foreground" Value="DarkGray" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="Background" Value="#FF151515" />
                        <Setter Property="Height" Value="25" />
                        <Setter Property="Foreground" Value="DarkGray" />
                        <Setter Property="FontFamily" Value="Maven Pro" />
                        <Setter Property="FontSize" Value="12" />

                    </Style>
                </DataGrid.Resources>
                <DataGrid.Columns>
                    <DataGridTextColumn Header="ID" Binding="{Binding id}" Width="50">
                        <DataGridTextColumn.HeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                <Setter Property="Background" Value="#FF151515" />
                                <Setter Property="Height" Value="25" />
                                <Setter Property="Foreground" Value="DarkGray" />
                                <Setter Property="FontFamily" Value="Maven Pro" />
                                <Setter Property="FontSize" Value="12" />
                            </Style>
                        </DataGridTextColumn.HeaderStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="APPLICATION" Binding="{Binding aplicacao}" Width="130"/>
                    <DataGridTextColumn Header="PING" Binding="{Binding ping}" Width="40"/>
                    <DataGridTextColumn Header="KBPS" Binding="{Binding velocidade}" Width="50"/>
                    <DataGridTextColumn Header="SERVER" Binding="{Binding servidor}" Width="160"/>
                    <DataGridTextColumn Header="PROTOCOL" Binding="{Binding protocolo}" Width="98"/>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Border>
</Grid>

Answer 1

不使用所有数据网格的掩码，而是包含不包含datagridheader的数据网格样式：

<Grid>
    <Border BorderThickness="1" BorderBrush="#FF3D3D3D" CornerRadius="5" Margin="44,28,134,60">
        <Grid>
            <Border Name="mask" Background="#33000000" CornerRadius="4"/>
            <DataGrid Name="dgConectedApps" Width="530" Height="67" Foreground="#FF2E2E2E"  
          CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" 
          AutoGenerateColumns="False" RowHeaderWidth="0"  IsReadOnly="True" BorderThickness="0" GridLinesVisibility="None"
          VerticalScrollBarVisibility="Disabled" >
                <DataGrid.Resources>
                    <Style TargetType="{x:Type DataGridRow}">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Height" Value="20" />
                        <Setter Property="Foreground" Value="DarkGray" />
                        <Setter Property="FontSize" Value="12" />
                    </Style>

                    <Style TargetType="{x:Type DataGridCell}">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Setter Property="Background" Value="Transparent"/>
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="#00000000" />
                                <Setter Property="Foreground" Value="DarkGray" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    <Style TargetType="{x:Type DataGrid}">
                        <Setter Property="Background" Value="Transparent"/>
                    </Style>
                </DataGrid.Resources>
                <DataGrid.ColumnHeaderStyle>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="Background" Value="#151515" />
                        <Setter Property="Height" Value="25" />
                        <Setter Property="Foreground" Value="DarkGray" />
                        <Setter Property="FontFamily" Value="Maven Pro" />
                        <Setter Property="FontSize" Value="12" />
                    </Style>
                </DataGrid.ColumnHeaderStyle>
                <DataGrid.Columns>
                    <DataGridTextColumn Header="ID" Binding="{Binding id}" Width="50">
                        <DataGridTextColumn.HeaderStyle>
                            <Style TargetType="DataGridColumnHeader">
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                <Setter Property="Background" Value="#FF151515" />
                                <Setter Property="Height" Value="25" />
                                <Setter Property="Foreground" Value="DarkGray" />
                                <Setter Property="FontFamily" Value="Maven Pro" />
                                <Setter Property="FontSize" Value="12" />
                            </Style>
                        </DataGridTextColumn.HeaderStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="APPLICATION" Binding="{Binding aplicacao}" Width="130"/>
                    <DataGridTextColumn Header="PING" Binding="{Binding ping}" Width="40"/>
                    <DataGridTextColumn Header="KBPS" Binding="{Binding velocidade}" Width="50"/>
                    <DataGridTextColumn Header="SERVER" Binding="{Binding servidor}" Width="160"/>
                    <DataGridTextColumn Header="PROTOCOL" Binding="{Binding protocolo}" Width="98"/>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>