WPF DataGrid 美化
XML代码如下
<Window x:Class="WpfApp1.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:WpfApp1" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <SolidColorBrush x:Key="CellBorderBrush" Color="Transparent" /> <Style x:Key="ColumnHeaderGripperStyle_Left" TargetType="{x:Type Thumb}"> <Setter Property="Width" Value="3"/> <Setter Property="Cursor" Value="SizeWE"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Thumb}"> <Border Background="Transparent" Padding="{TemplateBinding Padding}"> <Rectangle Width="0.5" Fill="{TemplateBinding Background}" HorizontalAlignment="Left"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="ColumnHeaderGripperStyle_Right" TargetType="{x:Type Thumb}"> <Setter Property="Width" Value="3"/> <Setter Property="Cursor" Value="SizeWE"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Thumb}"> <Border Background="Transparent" Padding="{TemplateBinding Padding}"> <Rectangle Width="0.5" Fill="{TemplateBinding Background}" HorizontalAlignment="Right"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="DataGridColumnHeaderDefaultStyle" TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="Background" Value="White"/> <Setter Property="FontSize" Value="14"/> <!--<Setter Property="Foreground" Value="#FF1D729B"/>--> <!--<Setter Property="Padding" Value="0 0 0 0"/>--> <Setter Property="Height" Value="40"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridColumnHeader}"> <Grid Margin="{TemplateBinding Padding}"> <Border ClipToBounds="True" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Background="{DynamicResource CellBorderBrush}" Style="{StaticResource ColumnHeaderGripperStyle_Left}"/> <Thumb x:Name="PART_RightHeaderGripper" Background="{DynamicResource CellBorderBrush}" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle_Right}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" Name="TopColumnA"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*" Name="TopColumnB"/> </Grid.ColumnDefinitions> <DataGrid AutoGenerateColumns="False" BorderBrush="Transparent" VerticalContentAlignment="Center" Background="Transparent" HeadersVisibility="Column" CanUserAddRows="False" VerticalGridLinesBrush="Transparent" HorizontalGridLinesBrush="WhiteSmoke" BorderThickness="0" FontSize="13" ItemsSource="{Binding ListData,RelativeSource={RelativeSource AncestorLevel=1,AncestorType=Window}}"> <!--标题头的样式--> <DataGrid.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="FocusVisualStyle"> <Setter.Value> <Style> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" Opacity=".6" SnapsToDevicePixels="true" Stroke="Red" StrokeThickness="2" StrokeDashArray="1 1" RadiusX="4" RadiusY="4" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> <Setter Property="Background" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="Foreground" Value="Black" /> <!--<Setter Property="BorderThickness" Value="4" />--> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="DataGridCell"> <Border Background="Transparent"> <Border Margin="0,0,0,0" CornerRadius="5" Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Foreground" Value="Black"/> </Trigger> <!--<MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsSelected,RelativeSource={RelativeSource Self}}" Value="true" /> <Condition Binding="{Binding SelectionUnit,RelativeSource={RelativeSource FindAncestor,AncestorType=DataGrid}}" Value="Cell" /> </MultiDataTrigger.Conditions> <Setter Property="Foreground" Value="Honeydew" /> <Setter Property="Background" Value="Bisque" /> </MultiDataTrigger>--> <!--<MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsSelected,RelativeSource={RelativeSource Self}}" Value="true" /> <Condition Binding="{Binding IsSelected,RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="False" /> <Condition Binding="{Binding SelectionUnit,RelativeSource={RelativeSource FindAncestor,AncestorType=DataGrid}}" Value="CellOrRowHeader" /> </MultiDataTrigger.Conditions> <Setter Property="Foreground" Value="DarkCyan" /> <Setter Property="Background" Value="Lavender" /> </MultiDataTrigger>--> <!--<MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsSelected,RelativeSource={RelativeSource Self}}" Value="true" /> <Condition Binding="{Binding IsSelected,RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="True" /> <Condition Binding="{Binding SelectionUnit,RelativeSource={RelativeSource FindAncestor,AncestorType=DataGrid}}" Value="CellOrRowHeader" /> </MultiDataTrigger.Conditions> <Setter Property="Foreground" Value="DarkGray" /> </MultiDataTrigger>--> <!--<MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsSelected,RelativeSource={RelativeSource Self}}" Value="true" /> <Condition Binding="{Binding SelectionUnit,RelativeSource={RelativeSource FindAncestor,AncestorType=DataGrid}}" Value="FullRow" /> </MultiDataTrigger.Conditions> <Setter Property="Foreground" Value="Yellow" /> </MultiDataTrigger>--> <!--<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true" /> <Condition Property="Selector.IsSelectionActive" Value="false" /> </MultiTrigger.Conditions> <Setter Property="Background" Value="White" /> <Setter Property="Foreground" Value="Khaki" /> </MultiTrigger>--> </Style.Triggers> </Style> </DataGrid.CellStyle> <DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="Background" Value="#FFFFFF" /> <Setter Property="Foreground" Value="Black" /> <Setter Property="SnapsToDevicePixels" Value="true" /> <Setter Property="Height" Value="30"/> <!--<Setter Property="Margin" Value="0,0,0,0" /> <Setter Property="Padding" Value="0,0" />--> <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" /> <Setter Property="ValidationErrorTemplate"> <Setter.Value> <ControlTemplate> <TextBlock Foreground="Red" Margin="2,0,0,0" Text="!" VerticalAlignment="Center" /> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="DataGridRow"> <SelectiveScrollingGrid> <SelectiveScrollingGrid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </SelectiveScrollingGrid.ColumnDefinitions> <SelectiveScrollingGrid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </SelectiveScrollingGrid.RowDefinitions> <Border CornerRadius="4" Grid.ColumnSpan="2" x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" /> <DataGridCellsPresenter MinHeight="{TemplateBinding MinHeight}" VerticalContentAlignment="Center" Grid.Row="0" 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=DataGrid}}" Visibility="{TemplateBinding DetailsVisibility}" /> <DataGridRowHeader Grid.Row="0" Grid.Column="0" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType=DataGrid}}" /> </SelectiveScrollingGrid> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" Value="#F0F9EB"/> <!--<Setter Property="Foreground" Value="#0000FE"/>--> <Setter Property="FontWeight" Value="Bold"/> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="#F5F7FA" /> <Setter Property="TextElement.Foreground" Value="Black" /> </Trigger> <!--<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true" /> <Condition Property="Selector.IsSelectionActive" Value="false" /> </MultiTrigger.Conditions> <Setter Property="Background" Value="YellowGreen" /> <Setter Property="Foreground" Value="Olive" /> </MultiTrigger>--> </Style.Triggers> </Style> </DataGrid.RowStyle> <DataGrid.Columns> <DataGridTextColumn HeaderStyle="{StaticResource DataGridColumnHeaderDefaultStyle}" Header="外包方名称" Width="100" Binding="{Binding CompanyName}" IsReadOnly="True"/> <DataGridTextColumn HeaderStyle="{StaticResource DataGridColumnHeaderDefaultStyle}" Header="通一信用代码" Width="100" Binding="{Binding SocialCode}" IsReadOnly="True"/> <DataGridTextColumn HeaderStyle="{StaticResource DataGridColumnHeaderDefaultStyle}" Header="录入人" Width="100" Binding="{Binding RecorderName}" IsReadOnly="True"/> <DataGridTextColumn HeaderStyle="{StaticResource DataGridColumnHeaderDefaultStyle}" Header="招标编号" Width="100" Binding="{Binding ApplyNo}" IsReadOnly="True"/> <DataGridTextColumn HeaderStyle="{StaticResource DataGridColumnHeaderDefaultStyle}" Header="录入机构" Width="100" Binding="{Binding OrgName}" IsReadOnly="True"/> <DataGridTextColumn HeaderStyle="{StaticResource DataGridColumnHeaderDefaultStyle}" Header="招标项目" Width="*" Binding="{Binding ApplyName}" IsReadOnly="True"/> </DataGrid.Columns> </DataGrid> <StackPanel Grid.Column="2"> <Button Content="测试" Click="Button_Click_1"/> </StackPanel> <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Name="TopSplitter" HorizontalAlignment="Stretch" Background="#32AAE6" Width="10" DragCompleted="GridSplitter_DragCompleted" DragDelta="MainSplitter_DragDelta" > <GridSplitter.Template> <ControlTemplate> <Border Background="{TemplateBinding Background}" CornerRadius="5"> </Border> </ControlTemplate> </GridSplitter.Template> </GridSplitter> </Grid> <!--<Grid Grid.Row="1" Margin="3,0,3,3"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" Name="MainColumnA"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*" Name="MainColumnB"/> </Grid.ColumnDefinitions> <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Name="MainSplitter" HorizontalAlignment="Stretch" Background="Yellow" Width="6" DragCompleted="GridSplitter_DragCompleted" DragDelta="MainSplitter_DragDelta" /> </Grid>--> </Grid> </Window>
然后根据自己需要可以进行调整 然后绑定自己的测试数据

浙公网安备 33010602011771号