I would like to apply a style, in this case of a 'ListViewItem', to a control within a DataTemplate.
Style (sample) code:
<Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="Blue" />
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="Foreground" Value="White"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
DataTemplate (sample) code:
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumnHeader Content="Text"/>
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding MyImage}"/>
<Label Content="{Binding MyLabelText}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
What is the solution to apply the Background, BorderBrush and Foreground style to the <Label> within the DataTemplate?
Thank you in advance.
Note: I already read the question and answers of 'Applying style to elements inside a DataTemplate', but I would like to use xaml (so without C# code).
The following XAML styles the ListViewItem (assuming Items is your collection):
<ListView ItemsSource="{Binding Items}">
<ListView.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="Background" Value="Blue" />
<Setter Property="BorderBrush" Value="Blue" />
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListViewItem}, Path=IsSelected}" Value="True">
<DataTrigger.Setters>
<Setter Property="Foreground" Value="White"></Setter>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumnHeader Content="Text"/>
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding MyImage}" Width="20"/>
<Label Content="{Binding MyLabelText}" />
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Related
I'm trying to add a CheckBox in a listView for all items available in the listview, so I did this:
<ListView x:Name="Playing" ItemsSource="{Binding Source={StaticResource GroupedItems}}"
SelectionChanged="Playing_SelectionChanged" SelectionMode="Single">
<ListView.View>
<GridView AllowsColumnReorder="False" >
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Path = IsFavourite}"
Checked="CheckBoxMatch_Checked"
Unchecked="CheckBoxMatch_UnChecked"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="{DynamicResource date}" Width="150" DisplayMemberBinding="{Binding Path = MatchDate}"/>
the problem's that checkbox is displayed only for one item on the listview, why?
replace your
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource StarEmpty}"/>
</Setter.Value>
</Setter>
with
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{StaticResource StarEmpty}"/>
</DataTemplate>
</Setter.Value>
</Setter>
and same with your other trigger:
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource Star}"/>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{DynamicResource removeFromFavourite}"/>
</Trigger>
into
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{StaticResource Star}"/>
<DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{DynamicResource removeFromFavourite}"/>
</Trigger>
does it work now?
I want to change color according to value: Pass(Blue) and Fail(Red). I want to change only text color of state's value.
main.xaml
<ListView x:Name="record_List"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="203" Width="382" Margin="553,454,0,0"
BorderThickness="0">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">
<GridViewColumn Header="State" Width="52"
DisplayMemberBinding="{Binding state}"/>
<GridViewColumn Header="Stuednt num" Width="80"
DisplayMemberBinding="{Binding snum}"/>
<GridViewColumn Header="Name" Width="75"
DisplayMemberBinding="{Binding name}"/>
<GridViewColumn Header="Check time"
DisplayMemberBinding="{Binding check_time}"/>
</GridView>
</ListView.View>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<EventSetter Event="PreviewMouseLeftButtonDown"
Handler="ListViewItem_PreviewMouseLeftButtonDown"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Use style triggers for column State, you try:
Fixed:
<GridViewColumn Header="State" Width="52" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding state}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Black"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding state}" Value="Pass">
<Setter Property="Foreground" Value="Blue"/>
</DataTrigger>
<DataTrigger Binding="{Binding state}" Value="Fail">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
The easiest way would be to use style and DataTriggers:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="Gray"/>
<Style.Triggers>
<DataTrigger Binding="{Binding testResult}" Value="Pass">
<Setter Property="Background" Value="Green"/>
</DataTrigger>
<DataTrigger Binding="{Binding testResult}" Value="Fail">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
I have this markup and my background color will not stay null when its IsEnabled=false. I tried a style trigger that change it when it became disabled but it hasn't worked. How can I make my ListView background color null when its disabled with a gridview?
<ListView Background="{x:Null}" IsEnabled="False">
<ListView.View>
<GridView>
<GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}"/>
<GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}"/>
<GridViewColumn Header="Email" DisplayMemberBinding="{Binding EmailAddress}"/>
</GridView>
</ListView.View>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
in app.xaml
<Style TargetType="ListView">
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
Just try this,
<ListView Background="Transparent" IsEnabled="False">
<ListView.Template>
<ControlTemplate TargetType="ListView">
<Border Name="Border"
BorderThickness="1">
<ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ListView.Template>
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding FirstName}" Header="First Name" />
<GridViewColumn DisplayMemberBinding="{Binding LastName}" Header="Last Name" />
<GridViewColumn DisplayMemberBinding="{Binding EmailAddress}" Header="Email" />
</GridView>
</ListView.View>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I have the following Xaml code and I have label triggers. I want to have a trigger that will place an image in the background for some content value. How do i do this as a trigger?
<Window.Resources>
<DataTemplate x:Key="DataTemplate_Level2">
<Label Content="{Binding }" Width="70" Height="70" HorizontalContentAlignment="Center" x:Name="Background">
</Label>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding}" Value="1">
<Setter TargetName="Background" Property="Background" Value="Black"/>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="5">
<Setter TargetName="Background" Property="Background" Value="Image"/>
</DataTrigger>
<DataTrigger Binding="{Binding }" Value="9">
<Setter TargetName="Background" Property="Background" Value="Green"/>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="7">
<Setter TargetName="Background" Property="Background" Value="blue"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<DataTemplate x:Key="DataTemplate_Level1">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_Level2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Window.Resources>
Simply use ImageBrush as background.
First add the brush in the resources.
Example:
<Window.Resources>
<ImageBrush x:Key="MyImageBrush"
ImageSource="C:\Test.png" />
</Window.Resources>
Then simply use StaticResource to set it in the specific trigger.
<DataTemplate x:Key="DataTemplate_Level2">
<Label Content="{Binding }"
Width="70"
Height="70"
HorizontalContentAlignment="Center"
x:Name="Background">
</Label>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding}"
Value="7">
<Setter TargetName="Background"
Property="Background"
Value="{StaticResource MyImageBrush}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I have the next grid:
<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.Header>
<TextBlock AutomationProperties.AutomationId="CustomerID1" />
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="{x:Type l:Customer}">
<TextBlock Text="{Binding FirstName}"
AutomationProperties.AutomationId="FirstNameID" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.Header>
<TextBlock AutomationProperties.AutomationId="CustomerID2" />
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="{x:Type l:Customer}">
<TextBlock Text="{Binding LastName}" AutomationProperties.AutomationId="LastNameID" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
</DataGrid.Columns>
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<EventSetter Event="Unselected"
Handler="UnselectedHandler" />
</Style>
</DataGrid.CellStyle>
</DataGrid>
I have a specific column with specific styles for all cells in this column:
<DataGridTemplateColumn>
<DataGridTemplateColumn.Header>
<TextBlock AutomationProperties.AutomationId="CustomerID1" />
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="{x:Type l:Customer}">
<TextBlock Text="{Binding FirstName}"
AutomationProperties.AutomationId="FirstNameID" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Also I have the overall styles for all cells in the grid:
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<EventSetter Event="Unselected"
Handler="ExpressionUnselectedHandler" />
</Style>
</DataGrid.CellStyle>
But UnselectedHandler doesn't handle this event.
How can I use specific and default styles for all cells at the same time?
You are overriding the DataGrid.CellStyle with the DataGridTemplateColumn.CellStyle.
Move the style in the DataGrid.CellStyle to the DataGrid.Resources:
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridCell}">
<EventSetter Event="Unselected" Handler="UnselectedHandler" />
</Style>
</DataGrid.Resources>
But it still won't work because the DataGridTemplateColumn.CellStyle is still overriding it so you need to add to the style: BasedOn="{StaticResource {x:Type DataGridCell}}". This tells it to use the already defined style (in Grid.Resources) but add the following to it.
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
And of course, update the other template column's style too.