How to choose DataTemplate with Triggers? - c#

I know that I can write ItemTemplateSelector to do this, but I wonder how to do it with triggers. I tried the following, but without success. It's probably because no ItemTemplate is set at the first place so no data on which triggers can be applied. Is it possible to do it with triggers?
<UserControl.Resources>
<Style TargetType="{x:Type ItemsControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsAllowed}" Value="True">
<Setter Property="ItemTemplate" >
<Setter.Value>
<DataTemplate>
...
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsAllowed}" Value="False">
<Setter Property="ItemTemplate" >
<Setter.Value>
<DataTemplate>
...
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<ItemsControl ItemsSource="{Binding MyData}" />

Yes, you can.
Simply point the Setter.Value to a StaticResource that contains the DataTemplate, like so:
<Style
TargetType='{x:Type ItemsControl}'>
<Style.Triggers>
<DataTrigger
Binding='{Binding Path=IsAllowed}'
Value='True'>
<Setter
Property='Background'
Value='LightGreen' />
<Setter
Property='ItemTemplate'
Value='{StaticResource TrueTemplate}' />
</DataTrigger>
<DataTrigger
Binding='{Binding Path=IsAllowed}'
Value='False'>
<Setter
Property='Background'
Value='LightCoral' />
<Setter
Property='ItemTemplate'
Value='{StaticResource FalseTemplate}' />
</DataTrigger>
</Style.Triggers>
</Style>
And then declare both templates in your resources (<UserControl.Resources>). TrueTemplate:
<DataTemplate
x:Key='TrueTemplate'>
<StackPanel
Orientation='Horizontal'>
<TextBlock
Text='{Binding Path=Name}' />
<TextBlock
Text=' ' />
<TextBlock
Text='{Binding Path=Surname}' />
<TextBlock
Text=', ' />
<TextBlock
Text='{Binding Path=Age}' />
</StackPanel>
</DataTemplate>
And FalseTemplate:
<DataTemplate
x:Key='FalseTemplate'>
<StackPanel
Orientation='Horizontal'>
<TextBlock
Text='{Binding Path=Age}' />
<TextBlock
Text=': ' />
<TextBlock
Text='{Binding Path=Name}' />
<TextBlock
Text=' ' />
<TextBlock
Text='{Binding Path=Surname}' />
</StackPanel>
</DataTemplate>
The template will be changed when the IsAllowed value is changed.

Related

Change Background Color of SelectedItem from WPF ListView with Custom DataTemplate

I have a ListView Control in WPF which displays a list of boxes from which the user can select one from the collection. What I'm currently trying to accomplish is to have Selected Item's Background Property changed to a different color for a proper identification.
I found a Code Snippet which partially solves my problem, however, the Background value of the SelectedItem reverts back to its original when I press anywhere within the module.
What I'd like to happen is for the Background value to persist for the SelectedItem regardless if I press on other controls or even if the Window gets unfocused.
Below is my XAML Code Snippet with the Setters and Triggers I currently have in place.
<ListView Grid.Row="2"
ItemsSource="{Binding FakeDispatchBoxCollection}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<md:Card Margin="0,0,0,10"
Cursor="Hand">
<md:Card.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}" Value="true">
<Setter Property="md:Card.Background" Value="LightGray" />
</DataTrigger>
</Style.Triggers>
</Style>
</md:Card.Style>
<Grid Margin="5">
<!--#region Row & Column Definitions -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.60*" />
<ColumnDefinition Width="0.40*" />
</Grid.ColumnDefinitions>
<!--#endregion-->
<Label Grid.Row="0" Grid.Column="0"
Content="{Binding DispatchBoxName}"
FontWeight="ExtraBlack"
FontSize="15"
FontFamily="Baloo Bhai 2" />
<Label Grid.Row="1" Grid.Column="0"
Content="{Binding DispatchBoxType}"
FontWeight="SemiBold"
FontSize="13"
FontFamily="Baloo Bhai 2" />
<Label Grid.Row="0" Grid.Column="1"
Grid.RowSpan="2"
Content="{Binding UnitCount}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
FontWeight="ExtraBlack"
FontSize="20"
FontFamily="Baloo Bhai 2" />
</Grid>
</md:Card>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the Item's Data Template (ItemTemplate property), you don't have any items that can accept keyboard focus. There are only Labels.
And in the ListViewItem Template Trigger (ItemContainerStyle property), you set the IsSelected property dependency on the keyboard focus inside the ListViewItem.
Also, you shouldn't use a ListView if you don't specify columns. In this case it is better to use ListBox.
An example of a correct implementation:
<Window.Resources>
<!--To simplify the example.-->
<CompositeCollection x:Key="source">
<sys:String>First</sys:String>
<sys:String>Second</sys:String>
<sys:String>Third</sys:String>
<sys:String>Fourth</sys:String>
</CompositeCollection>
</Window.Resources>
<ListBox ItemsSource="{DynamicResource source}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Label x:Name="label" Content="{Binding}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}"
Value="true">
<Setter TargetName="label" Property="Background" Value="Coral" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>

In the Avalon Dock, How to hide LayoutDocumentPane item programatically and also restore them

I am using devexpress,on the context menu trying to hide one of the many LayoutDocument present in the RootPanel.
Below is the documentpane xml file.
<LayoutDocumentPane>
<LayoutDocument Title=" View " IsSelected="True" ContentId="view" CanClose="False" LastActivationTimeStamp="10/15/2018 12:17:44" />
</LayoutDocumentPane>
Below is the Xaml code
<xcad:LayoutDocument Title=" View " CanClose="False" ContentId="View" >
<dxg:GridControl Name="dataTable" EnableSmartColumnsGeneration="True"
ItemsSource="{Binding View_InfoTable,Mode=TwoWay,NotifyOnSourceUpdated=True,NotifyOnTargetUpdated=True}" SelectionMode="Row"
AutoGenerateColumns="AddNew" AllowColumnMRUFilterList="True" ShowAllTableValuesInFilterPopup="False">
<dxg:GridControl.View>
<dxg:TableView ShowAutoFilterRow="True" UseGroupShadowIndent="False" ShowGroupPanel="False" ShowCriteriaInAutoFilterRow="True" AllowSorting="False" BestFitMode="VisibleRows"
ShowFixedTotalSummary="False" >
</dxg:TableView>
</dxg:GridControl.View>
</dxg:GridControl>
</xcad:LayoutDocument>
After lot of debugging and search I havent got any solution how to hide the dock panel and restore them on clicking on some button.
I found a way after trying many trial errors for many days.
private void BarButtonItem_ItemClick(object sender, DevExpress.Xpf.Bars.ItemClickEventArgs e)
{
string currentDockPane = e.Item.Content.ToString();
switch (currentDockPane)
{
case "view":
var currentLayout= StandardDockManager.Layout.Descendents().OfType<LayoutAnchorable>().Where(x => x.ContentId == "view").FirstOrDefault();
//Get all the descendents of current dock manger and check for the LayoutAnchorable if its visible .
if (currentLayout.IsVisible)
(((Xceed.Wpf.AvalonDock.Layout.LayoutAnchorable)(currentLayout))).IsVisible = false;
else
(((Xceed.Wpf.AvalonDock.Layout.LayoutAnchorable)(currentLayout))).IsVisible = true;
break;
.......................
}
}
You can toggle the Visibility property of the LayoutDocumentPane
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}" />
</Style>
This is how i did it with MVVM implimentation.
check the style i have give for both file style and toolbox style both have a visibility property binded so we can use the ViewModel to toggle visibility.
<xcad:DockingManager
x:Name="DockingManagerDockView"
ActiveContent="{Binding ActiveToolsPane, Mode=TwoWay}"
AnchorablesSource="{Binding AnchorableSource}"
DocumentsSource="{Binding DocumentSource}">
<xcad:DockingManager.LayoutUpdateStrategy>
<Pane:LayoutInitializer />
</xcad:DockingManager.LayoutUpdateStrategy>
<xcad:DockingManager.Resources>
<DataTemplate DataType="{x:Type ViewModels:ExplorerViewModel}">
<Views:ExplorerView />
</DataTemplate>
<Style TargetType="avalonDockControls:AnchorablePaneTitle">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</xcad:DockingManager.Resources>
<xcad:DockingManager.AnchorableTitleTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Margin="2" Source="{Binding IconSource}" />
<TextBlock
FontSize="12"
FontWeight="Bold"
Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.AnchorableTitleTemplate>
<xcad:DockingManager.AnchorableHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Margin="2" Source="{Binding IconSource}" />
<TextBlock
FontSize="12"
FontWeight="Bold"
Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.AnchorableHeaderTemplate>
<xcad:DockingManager.DocumentHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding IconSource}" />
<TextBlock
FontSize="12"
FontWeight="Bold"
Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.DocumentHeaderTemplate>
<xcad:DockingManager.LayoutItemContainerStyleSelector>
<Pane:PanesStyleSelector>
<Pane:PanesStyleSelector.ToolStyle>
<Style TargetType="{x:Type xcad:LayoutAnchorableItem}">
<Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}" />
<Setter Property="ContentId" Value="{Binding Model.ContentId}" />
<Setter Property="FlowDirection" Value="RightToLeft" />
<Setter Property="UseLayoutRounding" Value="False" />
<Setter Property="IconSource" Value="{Binding Model.IconSource}" />
<Setter Property="IsHitTestVisible" Value="True" />
<Setter Property="Title" Value="{Binding Model.Title}" />
</Style>
</Pane:PanesStyleSelector.ToolStyle>
<Pane:PanesStyleSelector.FileStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}" />
<Setter Property="Title" Value="{Binding Model.Title}" />
<Setter Property="ContentId" Value="{Binding Model.ContentId}" />
<Setter Property="CanClose" Value="{Binding Model.CanClose}" />
<Setter Property="IconSource" Value="{Binding Model.IconSource}" />
<Setter Property="CanFloat" Value="{Binding Model.CanFloat}" />
<Setter Property="Margin" Value="5" />
</Style>
</Pane:PanesStyleSelector.FileStyle>
</Pane:PanesStyleSelector>
</xcad:DockingManager.LayoutItemContainerStyleSelector>
<xcad:LayoutRoot>
<xcad:LayoutPanel>
<xcad:LayoutDocumentPane />
<xcad:LayoutAnchorablePane Name="Explorer" />
</xcad:LayoutPanel>
</xcad:LayoutRoot>
</xcad:LayoutRoot>
</xcad:DockingManager>

Bringing a Border into View

I have this TabItem:
<TabItem x:Name="tabTFGWReadingMainHall" Header="Main Hall" DataContext="{Binding Meeting}">
<TabItem.Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="IsSelected" Value="False"/>
<Style.Triggers>
<DataTrigger Binding="{Binding NumberClasses, ConverterParameter=1, Converter={StaticResource IsEqualOrGreaterThanConverter}}" Value="True">
<Setter Property="IsEnabled" Value="True" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedItem, ElementName=comboActiveStudentAssignmentType}" Value="{x:Static StudentInfoEnums:StudentAssignmentType.BibleReadingMain}">
<Setter Property="IsSelected" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TabItem.Style>
<Border x:Name="borderBibleReadingMain" BorderThickness="5">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItem, ElementName=comboActiveStudentAssignmentType}" Value="{x:Static StudentInfoEnums:StudentAssignmentType.BibleReadingMain}">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel>
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="IsEnabled" Value="False"/>
<Style.Triggers>
<DataTrigger Binding="{Binding NumberClasses, ConverterParameter=1, Converter={StaticResource IsEqualOrGreaterThanConverter}}" Value="True">
<Setter Property="IsEnabled" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Label Content="Student:"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="textBibleReadingMain" Grid.Column="0" Margin="2" IsEnabled="False"
DataContext="{Binding TFGW.BibleReadingItem.Main}"
Text="{Binding DataContext.BibleReadingMain, ElementName=oclmEditor, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"/>
<Button x:Name="buttonBibleReadingMain" Grid.Column="1" Background="Transparent"
DataContext="{Binding DataContext, ElementName=oclmEditor}"
Command="{Binding ApplicationCommand}" CommandParameter="BibleReadingMain">
<Image Source="Images/AssignmentTypeBibleReading16.png" Margin="2"/>
</Button>
</Grid>
<Label Content="Study:"/>
<ComboBox DataContext="{Binding DataContext, ElementName=oclmEditor}"
ItemsSource="{Binding ReadingStudyPointsList}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Number}"/>
<TextBlock Text=" - "/>
<TextBlock Text="{Binding Title}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</Border>
</TabItem>
As you can see, it has some DataTriggers implemented. Thus, when you change the comboActiveStudentAssignmentType (over on the right edge of the editor):
This is how the controls on the left change:
Before:
After:
The DataTriggers are working right. The Border is set correctly and the TabItem gets selected. But, if possible, I would like to end up with this:
I have done some research on this and it appears that I need to use BringIntoView to get the desired results. But that needs to be called from the code behind. I added a SelectionChanged handler and did this:
private void comboActiveStudentAssignmentType_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
OCLMEditorViewModel vm = this.DataContext as OCLMEditorViewModel;
if(borderBibleReadingMain != null &&
vm.ActiveStudentAssignmentType == Data.StudentInfo.Enums.StudentAssignmentType.BibleReadingMain)
borderBibleReadingMain.BringIntoView();
// TODO: Add others here
}
Whilst it did get fired, it did not seem to make any difference. I still had to scroll the reactangle to bring it into view.
How should I be doing this?
Thank you.

Binding XDocument to TreeView - attributes don't show up

I try to bind XDocument to TreeView control. Everything works fine excepting attributes. #%*!$##^% don't want to show up:D
Please, help me to modify that code to make it work:
<SolidColorBrush x:Key="xmlValueBrush" Color="Blue" />
<SolidColorBrush x:Key="xmAttributeBrush" Color="Red" />
<SolidColorBrush x:Key="xmlTagBrush" Color="DarkMagenta" />
<SolidColorBrush x:Key="xmlMarkBrush" Color="Blue" />
<DataTemplate x:Key="AttributeTemplate">
<StackPanel Orientation="Horizontal"
Margin="3,0,0,0"
HorizontalAlignment="Center">
<TextBlock Text="{Binding Path=Name}"
Foreground="{StaticResource xmAttributeBrush}" FontFamily="Consolas" FontSize="8pt" />
<TextBlock Text="=""
Foreground="{StaticResource xmlMarkBrush}" FontFamily="Consolas" FontSize="8pt" />
<TextBlock Text="{Binding Path=Value, Mode=TwoWay}"
Foreground="{StaticResource xmlValueBrush}" FontFamily="Consolas" FontSize="8pt" />
<TextBlock Text="""
Foreground="{StaticResource xmlMarkBrush}" FontFamily="Consolas" FontSize="8pt" />
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate x:Key="NodeTemplate">
<StackPanel Orientation="Horizontal" Focusable="False">
<TextBlock x:Name="tbName" Text="Root" FontFamily="Consolas" FontSize="8pt" />
<ItemsControl
ItemTemplate="{StaticResource AttributeTemplate}" HorizontalAlignment="Center"
ItemsSource="{Binding Path=Attributes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
<HierarchicalDataTemplate.ItemsSource>
<Binding Path="Elements" />
</HierarchicalDataTemplate.ItemsSource>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value, Mode=TwoWay}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}" />
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
My TreeView:
<TreeView x:Name="XmlTree" Grid.Row="1"
ItemsSource="{Binding Path=Root.Elements, UpdateSourceTrigger=PropertyChanged}"
ItemTemplate="{StaticResource NodeTemplate}"
SelectedItemChanged="XmlTree_SelectedItemChanged" />
It's my code behind:
private void BindXmlData(string filePath)
{
_xml = XDocument.Load(filePath);
XmlTree.DataContext = _xml;
}
All the nodes display well, but I can't manage with attributes to make them visible
You may change your DataTriggers Sections from:
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}" />
</DataTrigger>
To:
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name.LocalName}" />
</DataTrigger>
Hope will help, thanks! - Shams
As answer did not work for me, I would like to hint to Ashs Answer (Get XML Attributes in WPF with a treeview).
In the original code given here I found another problem. Values of nodes are not rendered in the tree view.
for this to work I needed to remove the first DataTrigger and add another one. so the part
<HierarchicalDataTemplate.Triggers>
...
</HierarchicalDataTemplate.Triggers>
looks like this:
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
<Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=FirstNode.NodeType}" Value="Text">
<Setter TargetName="tbName" Property="Text">
<Setter.Value>
<MultiBinding StringFormat="{}{0} = {1}">
<Binding Path="Name"/>
<Binding Path="FirstNode.Value"/>
</MultiBinding>
</Setter.Value>
</Setter>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
Now each node containing a Value is rendered as:
Node-Name = Value

Disable blue border for selected Listview item

I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources
To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum
This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>

Categories

Resources