I have a DataGrid in my WPF window and I want the align the text to vertical center in the cells and - no go. Here are my styling properties to set the style of the datagrid cells but obviously the VerticalAlignment is not working
<Window.Resources>
<Style TargetType="DataGridCell">
<Setter Property="TextBlock.TextAlignment" Value="Center"/>
<Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
<Setter Property="TextBlock.FontSize" Value="14"/>
<Setter Property="Height" Value="50"/>
</Style>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</Window.Resources>
And here is my DataGrid
<DataGrid x:Name="WOgrid" HorizontalAlignment="Center" Height="246" Margin="10,23.2,0,0" VerticalAlignment="Top" Width="119" IsReadOnly="True"
AutoGenerateColumns="False" Grid.Row="1" HeadersVisibility="Column" CanUserResizeRows="False" SelectionMode="Single">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding WOnum}" Header="WO Number" Width="*"/>
<DataGridTextColumn Visibility="Hidden" Binding="{Binding WOstatus}" Header="Status" Width="0"/>
</DataGrid.Columns>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Style.Triggers>
<DataTrigger Binding="{Binding WOstatus}" Value="0">
<Setter Property="Background" Value="Orange"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding WOstatus}" Value="1">
<Setter Property="Background" Value="LightYellow"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding WOstatus}" Value="2">
<Setter Property="Background" Value="YellowGreen"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding WOstatus}" Value="3">
<Setter Property="Background" Value="GreenYellow"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding WOstatus}" Value="4">
<Setter Property="Background" Value="Red"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
</DataGrid>
I tried the suggestion and seems like when HorizontialAlignment is there alone it works but if it's there with VerticalAlignment - nope.
You need to edit the DataGridCell template:
<Style TargetType="DataGridCell">
<Setter Property="TextBlock.FontSize" Value="14"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I would like to surround the headers of my datagrid in WPF with a curve. My current code:
<StackPanel Orientation="Vertical" Background="Red">
<DataGrid Height="433" x:Name="data" Width="801">
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#292F3B"/>
<Setter Property="Foreground" Value="LightBlue"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Height" Value="30"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="BorderThickness" Value="0,0,2,0" />
<Setter Property="BorderBrush" Value="#333333"/>
<Setter Property="Padding" Value="10 0 0 0"/>
</Style>
<Style TargetType="{x:Type DataGrid}">
<Setter Property="Background" Value="#20262E"/>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="user" Binding="{Binding user}" Width="*"/>
<DataGridTextColumn Header="User1" Binding="{Binding user1}" Width="*"/>
<DataGridTextColumn Header="User2" Binding="{Binding user2}" Width="*"/>
<DataGridTextColumn Header="User3" Binding="{Binding user3}" Width="*"/>
<DataGridTextColumn Header="User4" Binding="{Binding user4}" Width="*"/>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
I tried Corner Radius or Something else but the Property dosent find this.
Like this:Picture
Add a template with a Border with rounded corners.
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border Background="Black">
<Border BorderThickness="1"
CornerRadius="6"
Background="LightBlue"
Padding="10,0,0,0"
Margin="2">
<ContentPresenter/>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Height" Value="30"/>
<Setter Property="FontSize" Value="15"/>
</Style>
I have an intermittent problem when center aligning text in WPF data grid text columns.
Notice the left alignment on the first cell. The problem corrects itself after waiting a few seconds, but what could cause this? I've seen this on several grids now, but cannot purposefully reproduce the issue in a fresh project. The grids are usually several layers deep in dockpanels, grids, and groupboxes. Here is the XAML used to style the pictured grid:
<Style TargetType="DataGrid">
<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="HeadersVisibility" Value="Column" />
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="TextBlock.TextAlignment" Value="Center"/>
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
<Style x:Key="GridRowStyle" TargetType="DataGridRow">
<Setter Property="FontSize" Value="14.667" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Padding" Value="6,2" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
<Style
x:Key="OrderGridRowStyle"
BasedOn="{StaticResource GridRowStyle}"
TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding Status}" Value="{x:Static desktopViewModels:DisplayableOrderState.Uncommitted}">
<Setter Property="Background" Value="LightGoldenrodYellow" />
</DataTrigger>
</Style.Triggers>
</Style>
Here is the grid definition:
<DataGrid
x:Name="Orders"
Grid.Row="0"
HorizontalContentAlignment="Center"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserReorderColumns="False"
CanUserSortColumns="False"
CurrentItem="{Binding SelectedOrderViewModel, UpdateSourceTrigger=PropertyChanged}"
IsReadOnly="True"
ItemsSource="{Binding OrderViewModels}"
RowStyle="{StaticResource OrderGridRowStyle}"
SelectedItem="{Binding SelectedOrderViewModel, UpdateSourceTrigger=PropertyChanged}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Order Name" Width="*"/>
<DataGridTextColumn Binding="{Binding CreatedDate}" Header="Created Date" Width ="*"/>
<DataGridTextColumn Width="*" Binding="{Binding Status}" Header="Status" />
</DataGrid.Columns>
</DataGrid>
I have tried explicitly specifying column widths instead of using * widths, but the problem persists. I've tried other methods of centering the grid cells, such as the following, also with no effect.
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My application contains a datagrid which is bound to an observable collection of objects from a single SQL database table. Once of the columns contains a Date and Time and I would like to highlight the rows that are older than 30 minutes.
XAML
<!--DataGrid style-->
<Style x:Key="DataGridStyle" TargetType="{x:Type DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle}"/>
<Setter Property="CellStyle" Value="{DynamicResource DataGridCellStyle}"/>
</Style>
<!--DataGridColumnHeader style-->
<Style x:Key="ColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinHeight" Value="25"/>
<Setter Property="Background" Value="#FFE5ECEF"/>
</Style>
<DataGrid x:Name="licenseGrid"
ItemsSource="{Binding LoggedUsers}"
SelectedItem="{Binding SelectedLicenses}"
Style="{DynamicResource DataGridStyle}"
Grid.Row="5"
Grid.Column="2"
Grid.ColumnSpan="7"
Height="525"
VerticalAlignment="Top"
IsReadOnly="True"
AutoGenerateColumns="False"
HeadersVisibility="Column"
SelectionMode="Extended"
CanUserDeleteRows="True"
EnableRowVirtualization="False">
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsGhost}" Value="true">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFCBE8F6"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="#FFCBE8F6"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="revokeBtn"
ToolTip="Revoke Selected License or Licenses"
Content="Revoke"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.RevokeSelectedCommand}"
CommandParameter="{Binding}">
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Computer" Binding="{Binding machineName}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="Windows User" Binding="{Binding userName}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="95"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="MediaDent User" Binding="{Binding userId}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="Session ID" Binding="{Binding tsSessionId}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="65"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="Application" Binding="{Binding appId}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="65"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="Date In" Binding="{Binding dateIn}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="135"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="Last Ping" Binding="{Binding lastPing}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFE5ECEF"/>
<Setter Property="MinWidth" Value="135"/>
<Setter Property="Margin" Value="3"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Header="Record ID" Binding="{Binding Id}" Visibility="Hidden"/>
</DataGrid.Columns>
</DataGrid>
As you can see, I've start with a DataTrigger in DataGrid.RowStyle but I am not sure if that's the best route to take. Any suggestions or references would be greatly appreciated.
When reading the requirements:
I would like to highlight the rows that are older than 30 minutes.
I would come to a different solution:
Bind the background of the row to the DateTime column and apply a ValueConverter that turns the the DateTime into a color(brush).
i would like change background color using binding. When i dont use Style="{DynamicResource ButtonStyle}", Background changes. This is my code:
<Button Style="{DynamicResource ButtonStyle}" Content="{Binding Title, UpdateSourceTrigger=PropertyChanged}"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=DataContext.SelectButton}"
CommandParameter="{Binding}" ToolTip="{Binding Description}">
<Button.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" Value="True">
<Setter Property="Background" Value="Red"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" Value="False">
<Setter Property="Background" Value="Blue"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Resources>
</Button>
How i change background color in button using trigger? can be a trigger to insert a reference to style?
You could use a value converter instead a style if you cannot apply the trigger to the control template of the button or the style.
Background="{Binding IsSelected, Converter={StaticResource SelectedToBackgroundConverter}}"
Or with style
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected}" Value="False">
<Setter Property="Background" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
Or control template
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="myGrid" Width="200" Height="20" Background="{TemplateBinding Background}">
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter TargetName="myGrid" Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected}" Value="False">
<Setter TargetName="myGrid" Property="Background" Value="Blue"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I Want to use different Border Background and Different Images (each image must use different background color)
how i change use StyleTrigger to do it ? (Now it just show red border for all images)
<DataTemplate>
<Border BorderThickness="1" Width="18" Height="18" CornerRadius="2" BorderBrush="Red" Background="Red">
<Image Width="16" Height="16">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{x:Null}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="High">
<Setter Property="Source" Value="/project;component/Images/High.png" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Medium">
<Setter Property="Source" Value="/project;component/Images/Medium.png" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Low">
<Setter Property="Source" Value="/project;component/Images/Low.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Border>
</DataTemplate>
Thank you.
Assuming that your Binding is correct, you just need to add a similar Style to the Border to update the Background property and remove the Background value from the Border itself:
<DataTemplate>
<Border BorderThickness="1" Width="18" Height="18" CornerRadius="2" BorderBrush="Red">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="High">
<Setter Property="Background" Value="Green" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Medium">
<Setter Property="Background" Value="Blue" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Low">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image Width="16" Height="16">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{x:Null}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="High">
<Setter Property="Source" Value="/project;component/Images/High.png" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Medium">
<Setter Property="Source" Value="/project;component/Images/Medium.png" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Low">
<Setter Property="Source" Value="/project;component/Images/Low.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Border>
</DataTemplate>
Try this.