WPF #DataGrid樣式
阿新 • • 發佈:2021-07-30
ScrollViewer資原始檔: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- 應該在此定義資源字典條目。--> <Style TargetType="{x:Type ScrollViewer}"> <Setter Property="Template" Value="{DynamicResource ScrollViewerControlTemplate}"/> </Style> <ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}"> <Grid x:Name="Grid" Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Rectangle x:Name="Corner" Grid.Column="1" Fill="Transparent" Grid.Row="1"/> <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/> <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Width="10" /> <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Height="10" /> </Grid> </ControlTemplate> <LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0"> <GradientStop Color="#E1E1E1" Offset="0"/> <GradientStop Color="#EDEDED" Offset="0.20"/> <GradientStop Color="#EDEDED" Offset="0.80"/> <GradientStop Color="#E3E3E3" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/> <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Focusable" Value="false"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Border/> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Focusable" Value="false"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Thumb}"> <Grid> <Border Background="#45ACFF" Opacity="0.4" CornerRadius="4"> <Border.Effect> <DropShadowEffect Color="Gray" Direction="0" ShadowDepth="1" Opacity="0.6" /> </Border.Effect> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#E1E1E1" Offset="0"/> <GradientStop Color="#EDEDED" Offset="0.20"/> <GradientStop Color="#EDEDED" Offset="0.80"/> <GradientStop Color="#E3E3E3" Offset="1"/> </LinearGradientBrush> <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Focusable" Value="false"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type ScrollBar}"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> <Setter Property="Stylus.IsFlicksEnabled" Value="false"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="Width" Value="8"/> <Setter Property="MinWidth" Value="8"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollBar}"> <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Width="8"> <Grid.RowDefinitions> <RowDefinition MaxHeight="8" Height="auto"/> <RowDefinition Height="0.00001*"/> <RowDefinition MaxHeight="8" Height="auto"/> </Grid.RowDefinitions> <RepeatButton Visibility="Collapsed" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" /> <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1"> <Track.DecreaseRepeatButton> <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> </Track.IncreaseRepeatButton> <Track.Thumb> <Thumb Style="{StaticResource ScrollBarThumb}" /> </Track.Thumb> </Track> <RepeatButton Visibility="Collapsed" Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="Bg" Value="Transparent"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="Orientation" Value="Horizontal"> <Setter Property="Width" Value="Auto"/> <Setter Property="MinWidth" Value="0"/> <Setter Property="Height" Value="8"/> <Setter Property="MinHeight" Value="8"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollBar}"> <Grid x:Name="Bg" Background="{TemplateBinding Background}" Height="8" SnapsToDevicePixels="true"> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="8" Width="Auto"/> <ColumnDefinition Width="0.00001*"/> <ColumnDefinition MaxWidth="8" Width="Auto"/> </Grid.ColumnDefinitions> <RepeatButton Visibility="Collapsed" Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}"/> <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}"> <Track.DecreaseRepeatButton> <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/> </Track.IncreaseRepeatButton> <Track.Thumb> <Thumb Style="{StaticResource ScrollBarThumb}" /> </Track.Thumb> </Track> <RepeatButton Grid.Column="2" Visibility="Collapsed" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="Bg" Value="Transparent"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> DataGrid資原始檔: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:ITL.Presentation.Controls"> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="CommonStyle.xaml"/> </ResourceDictionary.MergedDictionaries> <SolidColorBrush x:Key="DataGridHeaderColor" Color="{DynamicResource AccentColor}" Opacity=".05"></SolidColorBrush> <SolidColorBrush x:Key="DataGridBackground" Color="Transparent" /> <SolidColorBrush x:Key="DataGridForeground" Color="#d1d1d1" /> <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" /> <SolidColorBrush x:Key="DataGridCellBackgroundSelected" Color="{DynamicResource AccentColor}" /> <Style TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Background" Value="{StaticResource DataGridHeaderColor}" /> <Setter Property="Foreground" Value="White" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Height" Value="55" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="FontFamily" Value="微軟雅黑" /> <Setter Property="FontSize" Value="18" /> <Setter Property="Padding" Value="10,3,10,3"/> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridColumnHeader}"> <Grid> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding ="{TemplateBinding Padding}" > <Grid x:Name="containerGrid" Margin="5" > <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <Path x:Name="SortArrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="8" Height="6" Margin="5,0,5,0" Stretch="Fill" Opacity="0.5" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.4" Visibility="Hidden" Data="M0,0 L1,0 0.5,1 z" /> </Grid> </Border> <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/> <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="SortDirection" Value="Ascending"> <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" /> <Setter TargetName="SortArrow" Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="180" /> </Setter.Value> </Setter> </Trigger> <Trigger Property="SortDirection" Value="Descending"> <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{DynamicResource DataGridHeaderBackgroundHover}" /> <Setter Property="Foreground" Value="{DynamicResource DataGridHeaderForegroundHover}" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="{DynamicResource DataGridHeaderBackgroundPressed}" /> <Setter Property="Foreground" Value="{DynamicResource DataGridHeaderForegroundPressed}" /> </Trigger> </Style.Triggers> </Style> <Style TargetType="{x:Type controls:DataGrid}"> <Setter Property="Background" Value="Transparent" /> <Setter Property="BorderBrush" Value="#0F6DD8" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="AlternationCount" Value="2" /> <Setter Property="AutoGenerateColumns" Value="False" /> <Setter Property="CanUserReorderColumns" Value="true" /> <Setter Property="Foreground" Value="White"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="CanUserResizeRows" Value="False" /> <Setter Property="GridLinesVisibility" Value="None" /> <Setter Property="IsReadOnly" Value="True" /> <Setter Property="Height" Value="auto"/> <Setter Property="CanUserAddRows" Value="False"></Setter> <Setter Property="RowHeaderWidth" Value="0" /> <Setter Property="SelectionMode" Value="Single"></Setter> <Setter Property="FontFamily" Value="微軟雅黑"/> <Setter Property="VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/> <Setter Property="CellStyle" Value="{StaticResource DataGridCellDefaultStyle}" /> <Setter Property="RowStyle" Value="{StaticResource DataGridRowDefaultStyle}" /> <Setter Property="RowHeight" Value="40"/> </Style> <Style x:Key="DataGridEditingComboBoxStyle" TargetType="ComboBox" BasedOn="{StaticResource {x:Type ComboBox}}"> <Setter Property="IsSynchronizedWithCurrentItem" Value="False" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Padding" Value="1,1" /> </Style> <Style x:Key="DataGridCheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}"> <Setter Property="IsHitTestVisible" Value="False" /> <Setter Property="Focusable" Value="False" /> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style x:Key="DataGridEditingCheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style x:Key="DataGridTextStyle" TargetType="TextBlock" > <Setter Property="Margin" Value="5,0,5,0" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="ToolTip" Value="{Binding Path=Text,RelativeSource={RelativeSource Mode=Self}}"/> </Style> <Style x:Key="DataGridOrderTextStyle" TargetType="TextBlock" > <Setter Property="Margin" Value="10,0,0,0" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="ToolTip" Value="{Binding Path=Text,RelativeSource={RelativeSource Mode=Self}}"/> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect Color="Black" BlurRadius="5" ShadowDepth="2" Opacity=".6"/> </Setter.Value> </Setter> </Style> <Style x:Key="DataGridEditingTextStyle" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}"> <Setter Property="Margin" Value="5,0,5,0" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="0" /> <Setter Property="MinWidth" Value="45" /> <Setter Property="ToolTip" Value="{Binding Path=Text, RelativeSource={RelativeSource Mode=Self}}"/> </Style> <!--單元格預設樣式--> <Style x:Key="DataGridCellDefaultStyle" TargetType="DataGridCell" > <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="FontFamily" Value="微軟雅黑"/> <Setter Property="Foreground" Value="{DynamicResource DataGridCellForeground}"/> <Setter Property="Focusable" Value="True" /> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="DataGridCell"> <Border Background="Transparent" BorderBrush="Transparent" BorderThickness="1" SnapsToDevicePixels="True"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Unfocused" /> <VisualState x:Name="Focused" /> </VisualStateGroup> <VisualStateGroup x:Name="CurrentStates"> <VisualState x:Name="Regular" /> <VisualState x:Name="Current" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--行預設樣式--> <Style x:Key="DataGridRowDefaultStyle" TargetType="DataGridRow"> <Setter Property="FontFamily" Value="微軟雅黑"/> <Setter Property="Background" Value="Transparent"/> <!--<Setter Property="Background" Value="{StaticResource RowBackground}" />--> <Setter Property="BorderBrush" Value="{DynamicResource RowBorderBrush}" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="SnapsToDevicePixels" Value="True" /> <Setter Property="UseLayoutRounding" Value="True" /> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <!--<Setter Property="Margin" Value="0,0"/>--> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridRow}"> <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"> <SelectiveScrollingGrid VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> <SelectiveScrollingGrid.ColumnDefinitions> <ColumnDefinition Width="0"/> <ColumnDefinition Width="*"/> </SelectiveScrollingGrid.ColumnDefinitions> <SelectiveScrollingGrid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </SelectiveScrollingGrid.RowDefinitions> <DataGridRowHeader Grid.Row="0" Grid.Column="0" SnapsToDevicePixels="True"/> <DataGridCellsPresenter Grid.Row="0" Height="{TemplateBinding Height}" Grid.Column="1" SnapsToDevicePixels="True" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> <DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" SnapsToDevicePixels="True" Visibility="{TemplateBinding DetailsVisibility}"/> </SelectiveScrollingGrid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="AlternationIndex" Value="0"> <Setter Property="Background" Value="#66196D91"/> </Trigger> <Trigger Property="AlternationIndex" Value="1"> <Setter Property="Background" Value="#00196D91"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{StaticResource RowMouseOverBackground}"/> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{StaticResource RowSelectedBackground}"/> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> 實際呼叫: <Grid Grid.Row="3" Margin="0,0,0,10"> <control:DataGrid AllowDrop="True" ItemsSource="{Binding DataItems}" RowHeight="40" IsReadOnly="True" CanUserAddRows="False" AutoGenerateColumns="False"> <control:DataGrid.Columns> <control:DataGridOrderColumn Header="序號" /> <control:DataGridTextColumn Header="操作人" IsReadOnly="True" Width="200" CanUserSort="False" Binding="{Binding Path=Operator}"/> <control:DataGridTextColumn Header="操作選單" IsReadOnly="True" CanUserSort="False" Width="260" Binding="{Binding Path=Module}"/> <control:DataGridTextColumn Header="操作功能" IsReadOnly="True" CanUserSort="False" Width="200" Binding="{Binding Path=ActionName}"/> <control:DataGridTextColumn Header="操作內容" IsReadOnly="True" CanUserSort="False" Width="*" Binding="{Binding Path=Desc}"/> <control:DataGridTextColumn Header="操作時間" IsReadOnly="True" CanUserSort="False" Width="220" Binding="{Binding Path=Date}"/> </control:DataGrid.Columns> </control:DataGrid> </Grid> #DataGrid樣式