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>