wpf datagrid樣式

Weber_t發表於2020-11-09

https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html

    <Window.Resources>
        <local:ImagePathConverter x:Key="ImagePathConverter" />
        <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="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="0" 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" />
                            </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" />
                </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="Top">
                            <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>

    </Window.Resources>

    <Grid>

        <DataGrid x:Name="gridProducts" Margin="5" AutoGenerateColumns="False" RowHeight="100"
                  LoadingRow="gridProducts_LoadingRow"
                  FrozenColumnCount="1"
                  VerticalAlignment="Top"
                  IsReadOnly="True"
                  CanUserResizeColumns="False" CanUserResizeRows="False" SelectionMode="Single"
                  CanUserReorderColumns="False" AlternationCount="2" RowHeaderWidth="0" CanUserAddRows="False">

            <DataGrid.Columns>
                <DataGridTextColumn Header="Product" Width="175" Binding="{Binding ModelName}" />
                <DataGridTextColumn Header="Price" Binding="{Binding UnitCost, StringFormat={}{0:C}}" />
                <DataGridTextColumn Header="Model Number" Binding="{Binding ModelNumber}" />

                <DataGridTextColumn Width="400" Binding="{Binding Description}" Header="Description">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="TextWrapping" Value="Wrap" />
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>

                <DataGridTextColumn IsReadOnly="True" Header="Category" Binding="{Binding CategoryName}" />

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Stretch="None"
                                   Source="{Binding ProductImagePath, Converter={StaticResource ImagePathConverter}}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

            </DataGrid.Columns>
        </DataGrid>
    </Grid>

相關文章