与 dataGrid 样式 WPF 斗争答案

【问题标题】：Struggle with dataGrid styles WPF与 dataGrid 样式 WPF 斗争
【发布时间】：2015-10-09 20:28:27
【问题描述】：

我的 dataGrid 样式有问题，它运行良好，但是在我更改 dataGrid 样式后，另一种样式消失了。我放了运行良好的代码，结果图片，然后我改变了什么以及改变后我得到了什么。也许有人知道它如何写得更好？

<Style  TargetType="DataGridRow">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#E6E6E6"/>
        <Setter Property="ContextMenu" Value="{x:Null}"/>
        <Style.Triggers>  
            <Trigger Property="AlternationIndex" Value="0">
                <Setter Property="Background" Value="#FFFFFF"/>
            </Trigger>
            <Trigger Property="AlternationIndex" Value="1">
                <Setter Property="Background" Value="#F7F7F7"/>
            </Trigger>
            <Trigger Property="IsSelected"
                    Value="True">
                <Setter Property="BorderThickness"
                        Value="2"/>
                <Setter Property="BorderBrush"
                    Value="#FFBA59" />
            </Trigger>
        </Style.Triggers>

    </Style>

    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="#FFFFFF"/>
    </Style>
        <!--Style x:Key="HeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Background" Value="#FFFFFF"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="#E6E6E6"/>
        <Setter Property="Height" Value="35"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="IsEnabled" Value="False"/>
        <Setter Property="VerticalAlignment" Value="Bottom" />
    </Style-->



    <DataGridTextColumn x:Key="product"  Header="  Product"  FontFamily="Arial"  Width="3*" Binding="{Binding Name}" IsReadOnly="True"
                        FontSize="18" FontWeight="Normal" Foreground="#4D4D4D">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="Width" Value="700"/>
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="{x:Type DataGridColumnHeader}">

                <Setter Property="Background" Value="#FFFFFF"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="#E6E6E6"/>
                <Setter Property="Height" Value="35"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>
    <DataGridTextColumn x:Key="unit price"  Header="Unit price, € " FontFamily="Arial" Width="0.5*" Binding="{Binding Age}" IsReadOnly="True"
                         FontSize="18" FontWeight="Normal" Foreground="#4D4D4D">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Right"/>
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Background" Value="#FFFFFF"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="#E6E6E6"/>
                <Setter Property="Height" Value="35"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Right"/>
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>
    <DataGridTextColumn x:Key="quantity"  Header="Quantity" FontFamily="Arial" Width="0.7*" Binding="{Binding Country}" IsReadOnly="True"
                         FontSize="18" FontWeight="Normal" Foreground="#4D4D4D">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Center"/>
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Background" Value="#FFFFFF"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="#E6E6E6"/>
                <Setter Property="Height" Value="35"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>
    <DataGridTextColumn x:Key="price"  Header="Price, €  " FontFamily="Arial" Width="0.3*" Binding="{Binding adress}" IsReadOnly="True"
                         FontSize="18" FontWeight="Normal" Foreground="#4D4D4D">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="Width" Value="25"/>
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Right"/>
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Background" Value="#FFFFFF"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="#E6E6E6"/>
                <Setter Property="Height" Value="35"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="IsEnabled" Value="False"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>

    <Style TargetType="DataGridCell">
        <Setter Property="BorderThickness" Value="0"/>  
    </Style> 
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFD65E" />


    <Style TargetType="{x:Type DataGrid}">
        <Setter Property="Background" Value="#FFFFFF"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#E6E6E6"/>   
    </Style>
</Window.Resources>


<Grid>
    <DataGrid x:Name="lbPersonList" Margin="30,98,362,30" AlternationCount="2" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False" 
              RowHeight="42" GridLinesVisibility="None" HorizontalGridLinesBrush="#E6E6E6" CanUserAddRows="False" SelectionMode="Single" 
              HeadersVisibility="Column" >

            <DataGrid.Columns>
                <StaticResource ResourceKey="product"/>
                <StaticResource ResourceKey="unit price"/>
                <StaticResource ResourceKey="quantity"/>
                <StaticResource ResourceKey="price"/>
            </DataGrid.Columns>
        </DataGrid>


</Grid>

我只改变dataGrid样式：

 <Style TargetType="{x:Type DataGrid}">
        <Setter Property="Background" Value="#FFFFFF"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#E6E6E6"/>   
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border CornerRadius="10" BorderThickness="2" BorderBrush="Black"/>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【问题讨论】：

ControlTemplate 只包含一个边框定义。缺少有关如何格式化（位置、样式……）DataGrid 内容的所有其他信息。你想要完成什么？向“DataGrid”添加圆角边框？
是的，我希望第一张图片中的 DataGrid 带有圆角

标签： wpf datagrid styles

【解决方案1】：

<Setter Property="Background" Value="#FFFFFF"/>

#FFFFFF 表示白色。您将数据网格的背景颜色设置为白色，这就是为什么您无法在屏幕上看到任何内容。

【讨论】：

你对
您正在将数据网格的控件模板设置为半径为 10px 且边框颜色为黑色的边框。控件模板定义了任何控件的视觉外观。通过在控件模板内提供一个边框，您基本上覆盖了 datagrid 控件的默认外观。

【解决方案2】：

您不能这样设置模板，您将清除所有其他使其成为DataGrid 的视觉元素。您必须提取默认模板（来自 blend 或来自 msdn）并进行更改。

这是你必须根据需要修改的内容

<ControlTemplate TargetType="local:DataGrid">
    <Grid>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="CommonStates">
                <vsm:VisualState x:Name="Normal"/>
                <vsm:VisualState x:Name="Disabled">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
            <Grid Name="Root" Background="{TemplateBinding Background}">
                <Grid.Resources>
                    <!--Start: TopLeftHeaderTemplate-->
                    <ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader">
                        <Grid Name="Root">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Border BorderThickness="0,0,1,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                <Rectangle Stretch="Fill" StrokeThickness="1">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                            <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                            <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                            <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                            <GradientStop Color="#D1FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Border>
                            <Rectangle VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFDBDCDC" Grid.RowSpan="2"/>
                        </Grid>
                    </ControlTemplate>
                    <!--End: TopLeftHeaderTemplate-->

                    <!--Start: TopRightHeaderTemplate-->
                    <ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="localprimitives:DataGridColumnHeader">
                        <Grid Name="RootElement">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Border BorderThickness="1,0,0,0" BorderBrush="#FFC9CACA" Background="#FF1F3B53" Grid.RowSpan="2">
                                <Rectangle Stretch="Fill">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                            <GradientStop Color="#FCFFFFFF" Offset="0.015" />
                                            <GradientStop Color="#F7FFFFFF" Offset="0.375" />
                                            <GradientStop Color="#E5FFFFFF" Offset="0.6" />
                                            <GradientStop Color="#D1FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                    <!--End: TopRightHeaderTemplate-->
                </Grid.Resources>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition/>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <localprimitives:DataGridColumnHeader Name="TopLeftCornerHeader" Template="{StaticResource TopLeftHeaderTemplate}" Width="22" />
                <localprimitives:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/>
                <localprimitives:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
                <Rectangle Name="ColumnHeadersAndRowsSeparator" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Width="Auto" StrokeThickness="1" Height="1" Fill="#FFC9CACA"/>

                <localprimitives:DataGridRowsPresenter Name="RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1" />
                <Rectangle Name="BottomRightCorner" Fill="#FFE9EEF4" Grid.Column="2" Grid.Row="2" />
                <Rectangle Name="BottomLeftCorner" Fill="#FFE9EEF4" Grid.Row="2" Grid.ColumnSpan="2" />
                <ScrollBar Name="VerticalScrollbar" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="18" Margin="0,-1,-1,-1"/>

                <Grid Grid.Column="1" Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Name="FrozenColumnScrollBarSpacer" />
                    <ScrollBar Name="HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="18" Margin="-1,0,-1,-1"/>
                </Grid>

                <dataInput:ValidationSummary Name="ValidationSummary" Grid.Row="3" Grid.ColumnSpan="3" MaxHeight="90"/>
            </Grid>
        </Border>
        <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" CornerRadius="2" Background="#8CFFFFFF" Opacity="0"/>
    </Grid>
</ControlTemplate>

另请注意，这是直接来自 MSDN 的控件模板，您将不得不导入各种命名空间，可能还需要进行一些其他调整。

您可能想阅读Customizing the Appearance of an Existing Control by Using a ControlTemplate

【讨论】：