C# WPF DataGrid 隔行變色及內容居中對齊

C# WPF DataGrid 隔行變色及內容居中對齊。

dqzww NET學習0

 

 

先看效果：

前臺XAML代碼：

<!--引入樣式文件-->

   <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="/Css/DataGridCss.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Style x:Key="contentCenterStyle" TargetType="{x:Type TextBlock}">
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </Window.Resources>

 

<!--XAML中DataGrid-->

<DataGrid AutoGenerateColumns="False" Name="dataGrid1" VerticalAlignment="Top" CanUserSortColumns="False" Width="660" Margin="5" IsReadOnly="True" CanUserResizeColumns="False" CanUserResizeRows="False" SelectionMode="Single" CanUserReorderColumns="False" AlternationCount="2" RowHeaderWidth="0" CanUserAddRows="False" >

<DataGrid.Columns>

  <DataGridTextColumn Header="名稱" Width="150" Binding="{Binding Name}"/>

  <DataGridTextColumn Header="最新價" Width="120" Binding="{Binding Zxj}"/>  

  <DataGridTextColumn Header="漲跌" Width="120" Binding="{Binding Zd}"/>

  <DataGridTextColumn Header="漲幅" Width="130" Binding="{Binding Zf}"/>

  <DataGridTextColumn Header="短線強勢股" Width="140" Binding="{Binding Dxqsg}"/>

</DataGrid.Columns>

</DataGrid>

前臺XAML的風格代碼

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="DataGrid">
        <!--網格線顏色-->
        <Setter Property="CanUserResizeColumns" Value="false"/>
        <Setter Property="Background" Value="#E6DBBB" />
        <Setter Property="BorderBrush" Value="#d6c79b" />
        <Setter Property="HorizontalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#d6c79b"/>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#d6c79b"/>
            </Setter.Value>
        </Setter>
    </Style>

    <!--標題欄樣式-->
    <!--<Style  TargetType="DataGridColumnHeader" >
        <Setter Property="Width" Value="50"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Background" Value="White" />
        <Setter  Property="FontWeight"  Value="Bold"/>
    </Style>-->

    <Style TargetType="DataGridColumnHeader">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="MinHeight" Value="28" />
        <Setter Property="Foreground" Value="#323433" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1"
                             BorderBrush="#e6dbba"
                              Width="Auto">
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter  Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0"
                            VerticalAlignment="Center" RenderTransformOrigin="1,1" />
                            <Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
                            <!--<TextBlock  Background="Red">
                            <ContentPresenter></ContentPresenter></TextBlock>-->
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Height" Value="25"/>
    </Style>
    <!--行樣式觸發-->
    <!--背景色改變必須先設置cellStyle 由於cellStyle會覆蓋rowStyle樣式-->
    <Style  TargetType="DataGridRow">
        <Setter Property="Background" Value="#F2F2F2" />
        <Setter Property="Height" Value="25"/>
        <Setter Property="Foreground" Value="Black" />
        <Style.Triggers>
            <!--隔行換色-->
            <Trigger Property="AlternationIndex" Value="0" >
                <Setter Property="Background" Value="#e7e7e7" />
            </Trigger>
            <Trigger Property="AlternationIndex" Value="1" >
                <Setter Property="Background" Value="#f2f2f2" />
            </Trigger>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray"/>
                <!--<Setter Property="Foreground" Value="White"/>-->
            </Trigger>

            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!--單元格樣式觸發-->
    <Style TargetType="DataGridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <TextBlock TextAlignment="Center" VerticalAlignment="Center"  >
                           <ContentPresenter />
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <!--<Setter Property="Background" Value="White"/>
                <Setter Property="BorderThickness" Value="0"/>-->
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

 

 

問題：當選中時 背景色沒法變化，可去掉DataGridCell的代碼。但去掉後文本沒法垂直居和水平居中了。

解決辦法：

在引入樣式文件中添加一個風格定義，DataGridCell的每一個文本實際是屬於TextBlock

            <Style x:Key="contentCenterStyle" TargetType="{x:Type TextBlock}">
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

而後再XAML的DataGridTextColumn 加入ElementStyle="{StaticResource contentCenterStyle}"

------------------------------------------------------------------------------------------------

附：完美解決在wpf datagrid讓列標題居中以及列內容居中

通常咱們要實現居中設置 HorizontalContentAlignment="Center" VerticalContentAlignment="Center"就能夠了， 可是datagrid的DataGridTextColumn中卻發現沒有HorizontalContentAlignment或者HorizontalAlignment，列中的內容仍然是左對齊，如何處理才能居中呢？

// 右對齊風格
Style styleRight = new Style(typeof(TextBlock));
Setter setRight = new Setter(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Right);styleRight.Setters.Add(setRight);
foreach (DataGridColumn c in yourDataGrid.Columns)
{        DataGridTextColumn tc = c as DataGridTextColumn;
        if (tc != null)        
        {
                tc.ElementStyle = styleRight;
        }
}

即只要設置DataGridColumn的ElementStyle就能夠了，也能夠在xaml中設置

<Style x:Key="contentCenterStyle"
               TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
        </Style>

DataGridTextColumn 中引用ElementStyle

<DataGridTextColumn Header="代碼"            ElementStyle="{StaticResource contentCenterStyle}"            Binding="{Binding Name}"></DataGridTextColumn>