redondeado - Necesita ayuda con un estilo personalizado en WPF
botones redondeados en wpf (2)
Gracias a la respuesta de @Aran, así como a un par de publicaciones que encontré en Codeplex Discussions (ver http://wpf.codeplex.com/Thread/View.aspx?ThreadId=65069 ), logré encontrar un conjunto de estilos que permite establecer el fondo de la fila de encabezado sin renunciar a la funcionalidad (ordenar flechas, separadores, etc.).
La única excepción a esto es la función de "selección de celda". DataGrid tiene una propiedad SelectionUnit , que se puede establecer en Cell, FullRow o CellOrRowHeader, pero parece que no funciona. Si lo configuro en FullRow (que se supone que solo selecciona la fila completa sin importar dónde haga clic en esa fila), aún selecciona visualmente celdas individuales cuando hace clic en ellas. La imagen a continuación muestra un ejemplo de un DataGrid (sin aplicar ningún estilo) donde SelectionUnit="FullRow" . Como puede ver, parece que hay una celda seleccionada (la fila G de la columna Nombre). Como actualmente no necesito la selección de celda, diseñé mis estilos para suprimir este borde negro oscuro que aparece alrededor de la celda cuando se hace clic.
texto alternativo http://img80.imageshack.us/img80/4757/datagriddefaultcellsele.jpg
Aquí hay un ejemplo de un DataGrid estilo ordenado descendiendo por ID. Como puede ver, la flecha hacia abajo aparece junto a la etiqueta de ID, y la columna tiene el tamaño apropiado para darle espacio a la flecha de ordenación.
texto alternativo http://img377.imageshack.us/img377/3836/datagridcustomfixed.jpg
Aquí hay otro ejemplo de un DataGrid con estilo. Este está ordenado ascendente por "Saved?". Observe que el encabezado está centrado, pero aún deja espacio suficiente en cada lado para la flecha de ordenación.
texto alternativo http://img203.imageshack.us/img203/5140/datagridcustomfixed2.jpg
Estos son los estilos necesarios para lograr este aspecto.
Pinceles
Hay varios ajustes de pincel en estos estilos, todos de la forma Property="{StaticResource Media_...}" . Voy a dejar de lado las definiciones por ahora porque me llevaría un tiempo recopilarlas todas, pero si alguien está interesado en duplicar los colores exactos que utilicé, deje un comentario.
Clasificar estilo de flecha
(las flechas mismas están contenidas en el estilo de encabezado de columna)
<Style
x:Key="DataGrid_ArrowStyle"
TargetType="Polygon">
<Setter
Property="Grid.Column"
Value="1" />
<Setter
Property="HorizontalAlignment"
Value="Right" />
<Setter
Property="VerticalAlignment"
Value="Bottom" />
<Setter
Property="StrokeThickness"
Value="1" />
<Setter
Property="Stroke"
Value="{StaticResource Media_BrightGraphicBorderBrush}" />
<Setter
Property="Fill"
Value="{StaticResource Media_BrightGraphicBackgroundBrush}" />
<Setter
Property="Visibility"
Value="Hidden" />
</Style>
Estilo de pulgar de encabezado de columna
(los pulgares mismos están contenidos en el estilo de encabezado de columna)
<Style
x:Key="DataGrid_ColumnHeaderThumbStyle"
TargetType="Thumb">
<Setter
Property="Width"
Value="8" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedSeparatorBackgroundBrush}" />
<Setter
Property="Cursor"
Value="SizeWE" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Thumb">
<Border
Padding="{TemplateBinding Padding}"
Background="Transparent">
<Border
Padding="0,2,0,2">
<Rectangle
HorizontalAlignment="Center"
Width="2"
Fill="{TemplateBinding Background}" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Estilo de encabezado de columna
(se refiere al estilo de flecha de ordenación y al estilo de pulgar de encabezado de columna definidos anteriormente)
<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader">
<Setter
Property="Padding"
Value="5,2,3,3" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="VerticalContentAlignment"
Value="Stretch" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="BorderBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedBackgroundBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource Media_RaisedForegroundBrush}" />
<Setter
Property="SeparatorBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="SeparatorVisibility"
Value="Visible" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="wt:DataGridColumnHeader">
<Grid>
<wt:DataGridHeaderBorder
Name="HeaderBorder"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
SortDirection="{TemplateBinding SortDirection}"
IsClickable="{TemplateBinding CanUserSort}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="{TemplateBinding SeparatorBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="12" />
</Grid.ColumnDefinitions>
<ContentPresenter
Name="HeaderContent"
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
<Polygon
Name="UpArrow"
Style="{StaticResource DataGrid_ArrowStyle}"
Margin="0,0,0,2"
Points="0,0 8,0 4,-6 0,0" />
<Polygon
Name="DownArrow"
Margin="0,0,0,1"
Style="{StaticResource DataGrid_ArrowStyle}"
Points="0,0 8,0 4,5 0,0" />
</Grid>
</wt:DataGridHeaderBorder>
<Thumb
x:Name="PART_LeftHeaderGripper"
Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
Margin="-4,0,0,0"
HorizontalAlignment="Left" />
<Thumb
x:Name="PART_RightHeaderGripper"
Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
Margin="0,0,-4,0"
HorizontalAlignment="Right"></Thumb>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="CanUserSort"
Value="True" />
<Condition
Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderBorder"
Property="TextBlock.Foreground"
Value="{StaticResource Media_MousedOverForegroundBrush}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="CanUserSort"
Value="True" />
<Condition
Property="IsPressed"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderBorder"
Property="BorderBrush"
Value="{StaticResource Media_PressedBorderBrush}" />
<Setter
TargetName="HeaderBorder"
Property="Background"
Value="{StaticResource Media_PressedBackgroundBrush}" />
<Setter
TargetName="HeaderBorder"
Property="TextBlock.Foreground"
Value="{StaticResource Media_PressedForegroundBrush}" />
</MultiTrigger>
<Trigger
Property="SortDirection"
Value="Ascending">
<Setter
TargetName="UpArrow"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="SortDirection"
Value="Descending">
<Setter
TargetName="DownArrow"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="CanUserSort"
Value="False">
<Setter
TargetName="HeaderContent"
Property="Grid.ColumnSpan"
Value="2" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="HorizontalContentAlignment"
Value="Center" />
<Condition
Property="CanUserSort"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderContent"
Property="Grid.ColumnSpan"
Value="2" />
<Setter
TargetName="HeaderContent"
Property="Margin"
Value="12,0,12,0" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Estilo de encabezado de columna centrada
(use esto para centrar un encabezado; automáticamente dejará espacio para una flecha de ordenación si la columna es ordenable)
<Style
x:Key="DataGrid_CenteredColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
</Style>
Estilo de encabezado de columna de embalaje
(use esto para permitir que el texto de un encabezado se envuelva en palabras; solo funciona si establece el ancho manualmente o si el usuario encoge la columna manualmente)
<Style
x:Key="DataGrid_WrappingColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
<Setter
Property="VerticalContentAlignment"
Value="Top" />
<Setter
Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
TextWrapping="WrapWithOverflow"
Text="{TemplateBinding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Estilo celular
<Style
x:Key="DataGrid_CellStyle"
TargetType="wt:DataGridCell">
<Setter
Property="Padding"
Value="5,2,5,2" />
<Setter
Property="BorderThickness"
Value="1" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="wt:DataGridCell">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="True"
Padding="{TemplateBinding Padding}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger
Property="IsSelected"
Value="True">
<Setter
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Foreground"
Value="Black" />
</Trigger>
<Trigger
Property="IsKeyboardFocusWithin"
Value="True">
<Setter
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Foreground"
Value="Black" />
<!--<Setter
Property="BorderBrush"
Value="{DynamicResource {ComponentResourceKey ResourceId=FocusBorderBrushKey, TypeInTargetAssembly=wt:DataGrid}}" />-->
</Trigger>
</Style.Triggers>
</Style>
Estilo de celda centrada
(use esto para centrar el contenido de una celda)
<Style
x:Key="DataGrid_CenteredCellStyle"
TargetType="wt:DataGridCell"
BasedOn="{StaticResource DataGrid_CellStyle}">
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
</Style>
Estilo de cuadrícula de datos
(establece un conjunto de valores predeterminados para varias propiedades, incluido el estilo de encabezado de columna y el estilo de celda, que se definieron anteriormente)
<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid">
<Setter
Property="ColumnHeaderStyle"
Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter
Property="CellStyle"
Value="{StaticResource DataGrid_CellStyle}" />
<Setter
Property="RowBackground"
Value="{StaticResource Media_OddRowBackgroundBrush}" />
<Setter
Property="AlternatingRowBackground"
Value="{StaticResource Media_EvenRowBackgroundBrush}" />
<Setter
Property="HorizontalGridLinesBrush"
Value="LightGray" />
<Setter
Property="VerticalGridLinesBrush"
Value="LightGray" />
<Setter
Property="SelectionMode"
Value="Single" />
<Setter
Property="SelectionUnit"
Value="FullRow" />
<Setter
Property="AutoGenerateColumns"
Value="False" />
<Setter
Property="CanUserAddRows"
Value="False" />
<Setter
Property="CanUserDeleteRows"
Value="False" />
<Setter
Property="CanUserReorderColumns"
Value="True" />
<Setter
Property="CanUserResizeColumns"
Value="True" />
<Setter
Property="CanUserResizeRows"
Value="False" />
<Setter
Property="CanUserSortColumns"
Value="True" />
<Setter
Property="IsReadOnly"
Value="True" />
<Setter
Property="HeadersVisibility"
Value="Column" />
</Style>
Ejemplo DataGrid usando estos estilos
(Nota: requiere datos de respaldo - un archivo XML - para trabajar)
<wt:DataGrid
Style="{StaticResource DataGrid_Style}"
Margin="0,5,0,0"
ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Binding="{Binding XPath=@Letter}"
Header="ID" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@Name}"
Header="Name" />
<wt:DataGridTextColumn
HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
Binding="{Binding XPath=@IsSaved}"
Header="Saved?" />
<wt:DataGridTextColumn
HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
Binding="{Binding XPath=@IsBackedUp}"
Header="Backed Up?" />
</wt:DataGrid.Columns>
</wt:DataGrid>
Estoy intentando construir algunos estilos personalizados simples para el control WPF Toolkit DataGrid .
Tengo un estilo para el DataGrid general y un estilo para el DataGridColumnHeader . No estoy configurando ninguna plantilla de control, solo propiedades básicas.
Aquí está mi muestra DataGrid con mi estilo personalizado aplicado:
texto alternativo http://img86.imageshack.us/img86/43/datagridcustomstyle.jpg
El encabezado tiene el fondo azul degradado, el texto en negrita, el relleno, etc. Lo quiero, pero han desaparecido dos cosas: los separadores entre los encabezados de columna y la flecha de clasificación para la columna ID (esta columna tiene una ordenación descendente en ese momento).
¿Por qué desaparecerían los separadores y la flecha de ordenación si no me he equivocado con ninguna plantilla de control?
Incluso intenté explícitamente establecer SeparatorBrush en Black y la SeparatorVisibility de SeparatorVisibility en Visible , pero esto no tuvo ningún efecto.
Aquí está mi ejemplo de DataGrid si vuelvo al estilo predeterminado:
texto alternativo http://img42.imageshack.us/img42/6533/datagriddefaultstyle.jpg
Los separadores y la flecha de clasificación están de vuelta, por lo que definitivamente es mi estilo el que está marcando la diferencia.
Aquí está mi estilo personalizado DataGridColumnHeader
<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader">
<Setter
Property="Padding"
Value="5,2,5,2" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="VerticalContentAlignment"
Value="Stretch" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="BorderBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedBackgroundBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource Media_RaisedForegroundBrush}" />
<Setter
Property="SeparatorBrush"
Value="Black" />
<Setter
Property="SeparatorVisibility"
Value="Visible" />
</Style>
Aquí está mi estilo de DataGrid personalizado
<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid">
<Setter
Property="ColumnHeaderStyle"
Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter
Property="RowBackground"
Value="{StaticResource Media_OddRowBackgroundBrush}" />
<Setter
Property="AlternatingRowBackground"
Value="{StaticResource Media_EvenRowBackgroundBrush}" />
<Setter
Property="HorizontalGridLinesBrush"
Value="White" />
<Setter
Property="VerticalGridLinesBrush"
Value="LightGray" />
<Setter
Property="AutoGenerateColumns"
Value="False" />
<Setter
Property="CanUserAddRows"
Value="False" />
<Setter
Property="CanUserDeleteRows"
Value="False" />
<Setter
Property="CanUserReorderColumns"
Value="True" />
<Setter
Property="CanUserResizeColumns"
Value="True" />
<Setter
Property="CanUserResizeRows"
Value="False" />
<Setter
Property="CanUserSortColumns"
Value="True" />
<Setter
Property="IsReadOnly"
Value="True" />
</Style>
Aquí está el marcado para mi muestra DataGrid
<wt:DataGrid
Style="{StaticResource DataGrid_Style}"
Margin="0,5,0,0"
ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Binding="{Binding XPath=@Letter}"
Header="ID" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@Name}"
Header="Name" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@IsSaved}"
Header="Saved?" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@IsBackedUp}"
Header="Backed Up?" />
</wt:DataGrid.Columns>
</wt:DataGrid>
¿Es esto un error?
Si no, ¿me puede aconsejar sobre cómo modificar mis estilos para que no pierda las líneas de separación y la flecha de clasificación?
Editar
Intenté agregar los atributos de BasedOn por sugerencia de @ Aran (a continuación), pero esto no pareció tener ningún efecto. Alguien tiene otros pensamientos?
intenta poner
<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid"
BasedOn="{StaticResource {x:Type wt:DataGrid}}">
para basar su estilo en la cuadrícula de datos actual, y lo mismo para los encabezados
<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource {x:Type wt:DataGridColumnHeader}}">
arañar lo de arriba - reduje tu estilo al elemento ofensivo
<Style
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource {x:Type wt:DataGridColumnHeader}}">
<Setter
Property="Background"
Value="Blue" />
</Style>
si configura el fondo (o el pincel de borde), lo atornillarán.
Encontré este enlace en el proyecto del código, para respaldar esto -
"El estilo del encabezado de columna se puede modificar fácilmente a través del ColumnHeaderStyle del DataGrid. Sin embargo, si modifica el color de fondo del encabezado de columna, verá que desaparecen las flechas de clasificación. Esto se debe a que las flechas no forman parte del Plantilla de ColumnHeader; en cambio, se agregan mediante programación ".
él tiene un estilo que vuelve a agregar los indicadores de clasificación.
He echado un vistazo al código de DataGridHeaderBorder (que es el borde del datagridrowheader) que no tiene su propia plantilla de control, simplemente deriva del borde. Además de los separadores que se agregan de manera programática (los separadores son solo rectángulos, consulte la línea 1199 de DataGridHeaderBorder.cs), los indicadores de clasificación son. La breve mirada al código que tenía sugiere que todavía deberían dibujarse, pero no lo hacen, un paso a través del código está en orden.
La solución es anular la plantilla de control, creo, y agregarlos usted mismo, el enlace en el proyecto de código le ayudará a comenzar.