数据网格行上的圆角

时间:2019-12-30 11:12:02

标签: wpf xaml datagrid

在我的wpf项目中,我有这个:

<DataGrid x:Name="Tasks" CanUserDeleteRows="True" IsReadOnly="False" AutoGenerateColumns="False" HorizontalAlignment="Left" Height="413" VerticalAlignment="Top" Width="1100" Background="Transparent" HorizontalGridLinesBrush="Transparent" VerticalGridLinesBrush="Transparent" RowBackground="#202020" AlternatingRowBackground="#262626">
<DataGrid.Columns>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="...="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="Colour" Binding="{Binding Colour, UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTemplateColumn Header="...">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Click="Start_Task_Click">
                        <materialDesign:PackIcon Kind="Play" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Stop_Button_Click">
                        <materialDesign:PackIcon Kind="Stop" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Edit_Task">
                        <materialDesign:PackIcon Kind="Pencil" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Delete_Button_Click">
                        <materialDesign:PackIcon Kind="Delete" Foreground="White"/>
                    </Button>
                </StackPanel>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

无论如何,我都可以在其中使行(不是整个数据网格)具有圆角,从而产生something like this

P.S。我大概5秒钟就在Paint中完成了,所以不要判断我的绘画技巧:P

2 个答案:

答案 0 :(得分:1)

尝试为DataGrid行编写样式。 Refer to this link for more details

<DataGrid Name="dataGrid1" Margin="12,12,0,0">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridRow}">
                        <Border Background="LightGray" CornerRadius="5">
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.RowStyle>
</DataGrid>

答案 1 :(得分:1)

您可以定义一个自定义的DataGridRow模板,其中包含一个带有某些CornerRadius的Border,例如:

<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="BorderBrush" Value="Red" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        Background="{TemplateBinding Background}" 
                                        SnapsToDevicePixels="True"
                                        CornerRadius="10">
                        <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </SelectiveScrollingGrid.RowDefinitions>
                            <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                            <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                        </SelectiveScrollingGrid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.RowStyle>

您将必须根据需要编辑模板。这可能还涉及DataGridCell元素的样式/模板。