I have 2 DataGrids. To make them pretty I did some styling on them. I defined CellTemplate and HeaderTemplate and applied them in an implicit Style to the DataGrid. I add the coloumns in XAML and leave them be. They also have HeaderTemplates.
EDIT:
I've tried some other scenarios, so here's some more on what happens:
DataGrid 'A' works fine. It is initiated completely from XAML. It accepts all kinds of widths (including star size) and displays correctly. It is placed inside a UserControl that has a VM. Here's the XAML:
<DataGrid ItemsSource="{Binding Items}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name" MinWidth="50" Width="250" HeaderTemplate="{StaticResource DefaultDataGridHeader}"/>
<DataGridTextColumn Binding="{Binding StartDate}" Header="Start" MinWidth="50" Width="150" HeaderTemplate="{StaticResource DefaultDataGridHeader}" />
<DataGridTextColumn Binding="{Binding FinishDate}" Header="Finish" MinWidth="50" Width="150" HeaderTemplate="{StaticResource DefaultDataGridHeader}" />
<DataGridTextColumn Binding="{Binding Leader}" Header="Leader" MinWidth="50" Width="*" HeaderTemplate="{StaticResource DefaultDataGridHeader}" />
</DataGrid.Columns>
</DataGrid>
Then there is DataGrid B...
It's a little more complicated now. There's a Control that displays DataGrid B and does some other things. It is used in many other Views, with different data. So for every data there's another View, that contains the DataGrid columns. When the data arrives to the main control, it clears the columns of DataGrid B and repopulates it with the ones defined in the corresponding View.
Here's DataGrid B in the usercontrol:
<DataGrid x:Name="datagrid" ItemsSource="{Binding Items}" IsReadOnly="True" SelectionMode="Single" />
The UserControl has a ObservableCollection GridColumns DependencyProp. This is where the actual DataGridColumns arrive. So on the CollectionChanged event I do this:
void GridColumnsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
datagrid.Columns.Clear();
foreach (var gridColumn in GridColumns)
{
datagrid.Columns.Add(gridColumn);
}
}
Here's an example for how I set the actual columns in data-specific View:
<c:GenericList >
<c:GenericList.GridColumns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name"
Width="300" HeaderTemplate="{StaticResource DefaultDataGridHeader}"/>
</c:GenericList.GridColumns>
</c:GenericList>
-------- What happens with DataGrid B: --------
If I leave the XAML like this, the column gets rendered with 300 px width.
If I chnage the width to star size, or add any other columns with star size, they get rendered with 20px width. (even if there is some text in the header)
If I set MinWidth, then all the star sized columns are rendered with MinWidth.
If I leave out the whole 'placing columns from another view' part, and add some columns
directly to datagrid then pixel size columns span to the width of the header text and star sized columns render with 20px width. Also if I resize a starsized column in the running app, some width constraints kick in and I cannot make the columns small again anymore. - But in this version, there's no data to bind to columns. Could that be causing this effect?
//end of EDIT.
The Styles were made in Blend with the "Edit a Copy" function.
They are like this:
<Style x:Key="DefaultDataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<Microsoft_Windows_Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
IsClickable="{TemplateBinding CanUserSort}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}"
Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorBrush="{TemplateBinding SeparatorBrush}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}" Background="#00000000">
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle StrokeThickness="0" RadiusY="0" Opacity="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#33000000" Offset="1"/>
<GradientStop Color="#4CFFFFFF"/>
<GradientStop Color="#007B7B7B" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Microsoft_Windows_Themes:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" Width="8"/>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" Width="8"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DefaultDataGridHeader">
<Border BorderBrush="{DynamicResource ShadowBrush}" Background="{x:Null}" d:DesignWidth="289" d:DesignHeight="72.28">
<Grid>
<Rectangle RadiusY="0" StrokeThickness="0" Fill="{DynamicResource ActionTileBrush}" />
<Rectangle RadiusY="0" StrokeThickness="0" >
<Rectangle.Fill>
<SolidColorBrush Color="#88FFFFFF" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="{Binding}" Margin="12" FontSize="16" FontWeight="Bold">
<TextBlock.Foreground>
<SolidColorBrush Color="#FF11789D" />
</TextBlock.Foreground>
</TextBlock>
<Rectangle RadiusY="0" StrokeThickness="1" Stroke="{DynamicResource ShadowBrush}"></Rectangle>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="DefaultDataGridCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Padding="12,8">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource HighlightBrush}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource HighlightBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="DefaultDataGridStyle" TargetType="{x:Type DataGrid}">
<Setter Property="AlternatingRowBackground" Value="{x:Null}"/>
<Setter Property="AlternationCount" Value="2"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ChromeBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CellStyle" Value="{StaticResource DefaultDataGridCellStyle}"/>
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DefaultDataGridColumnHeaderStyle}"/>
<Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}"/>
<Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource ShadowBrush}"/>
<Setter Property="RowBackground" Value="{DynamicResource BackgroundBrush}"/>
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="True"/>
<Setter Property="VerticalGridLinesBrush" Value="{DynamicResource ShadowBrush}"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</Style.Triggers>
</Style>
Clearly there is something wrong somewhere and I should be able to set the columns to star size, or if set them to pixel size I expect them to keep that.
Thank you for any help!
Hope the space is there in your xaml in the second DataGridTextColumn in-between Binding and Width
Is the HorizontalAlignment of the UserControl that hosts the second datagrid set to Stretch?
I would try setting HorizontalAlignment of the UserControl to Stretch - maybe that is restricting the DataGrid size.
Related
I would like to get scrollbar in ListBox see through.
Currently I managed to move contents under with negative margin, but I cannot make it visible under ScrollBar even setting its Opacity.
Any ideas?
Current XAML (to disable selection and hover effects):
<ListBox x:Name="TestIC" Grid.Row="1"
ScrollViewer.CanContentScroll="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.VirtualizationMode="Recycling" >
<ListBox.Resources>
<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Focusable" Value="false"/>
<Setter Property="Margin" Value="0,0,-100,0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You must simply override the default Style of the ScrollViewer and e.g., place it in the ResourceDictionary of App.xaml or your ListBox:
Allow the content to stretch into the scroll bar's column/row by setting the ColumnSpan/RowSpan of the ScrollContentPresenter
Set Background of ScrollBar elements, and if required the Rectangle named "Corner" too, to Transparent or modify their Opacity
To make the Thumb of the ScrollBar opac, override/copy all the default ScrollBar Styles and Templates and set the Thumb.Opacity in the x:Key="ScrollBarThumb" style.
As you already have a customized ScrollBar, you probably want to adjust your current Thumb style instead.
Important: don't forget to remove your negative Margin!
Since the content of the ScrollViewer is now allowed to span accross the full content host, the Margin is no longer needed. You should generally avoid a negative Margin in order to layout elements, when arranging them in columns (using proper spanning) yield the same result.
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2"
BorderThickness="0,1,1,1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
</Border>
<ScrollBar x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Background="Transparent"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Background="Transparent"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
<Rectangle x:Name="Corner"
Grid.Column="1" Grid.Row="1"
Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do I style the Tab Control Border so that the selected Tab Item does not have a line underneath it?
These are my Tab Control and Tab Item styles so far.
<!-- Tab control styling -->
<Style TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="10,5,10,5" />
<Setter Property="Margin" Value="3.5" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
</Style>
<!-- Tab item styling -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
BorderBrush="Black"
BorderThickness="1,1,1,0"
CornerRadius="3,3,0,0"
MinWidth="120">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I can achieve the look displayed in the screenshot without having to overload the tab item control template then I don't have an issue as the default tab item template doesn't have the line underneath it on the selected tab. I haven't been able to do this so far. Thanks for your help.
The XAML below is how I have overridden the TabControl to solve this problem. The key piece of info is the Margin property of the HeaderPanel. You will see that the bottom margin is -1, which shifts it down just enough to cover up that line.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<SolidColorBrush Color="White"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="White"/>
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Add property Padding="0,0,0,0" to tab control :-)
Instead of modifying tabcontrol template, you may as well just modify the TabItem template, by adding two lines to cover up the border, and using minus margins for covering up.
(Please take a look at "TopLineCover" and "BottomLineCover" borders.)
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
<Setter Property="Foreground" Value="{DynamicResource VsBrush.WindowText}"/>
<Setter Property="Background" Value="{DynamicResource VsBrush.Window}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="HeaderBorder" Padding="8,3,8,3" BorderThickness="1,1,1,0"
Background="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBrushKey}}"
BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}">
<ContentPresenter x:Name="Content" ContentSource="Header"
HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
/>
</Border>
<Border x:Name="TopLineCover" BorderThickness="1,1,1,0" Margin="0,-2,0,0" Height="3" Panel.ZIndex="100"
Background="{DynamicResource VsBrush.Window}" BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}"
VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
<Border x:Name="BottomLineCover" BorderThickness="0,0,0,3" Margin="1,0,1,-2" Panel.ZIndex="100" BorderBrush="{DynamicResource VsBrush.Window}"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
<Setter Property="Visibility" TargetName="TopLineCover" Value="Visible"/>
<Setter Property="Visibility" TargetName="BottomLineCover" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the past I've accomplished this by making the TabItem extend a little further down then it's allocated, so its actually drawn on top of the border element and hides it
I can't remember how I did it exactly, but I think it was with a negative margin on the bottom of the TabItem
The Situation:
I have two classes that are represented in a TreeView. DiskSpec and DiskSet. DiskSpec can exist by itself, or it can be a child of DiskSet. I am working on enabling DragDrop functionality so that the user can drag a DiskSpec from the DiskSpec node onto a DiskSet to add it to that DiskSet. Now all is working except for one thing. My DragDropHelper class needs to specify in an ItemsPresenter (or related class) that that control is a drag source or a drop target.
My TreeView is set up like so: .
The Problem:
So I really need to have two TreeViewItem Styles. Once for DiskSets (which specifies that the ItemsPresenter that will present the DiskSpecs is a DropTarget) and one for everything else which specifies that it's ItemsPresenter is a DragSource.
Unfortunately I have not seen any way to set the TreeViewItem Style or Template from the HierarchicalDataTemplate object, and there does not appear to be a way to specify that this ItemTemplate is only for a particular DataType.
Any thoughts? Or am I missing something?
Find below some samples from my XAML.
Default TreeViewItem
See the ItemsPresenter section for an example of the DragDropHelper properties settings.
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="1,0,0,0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid Margin="0,4,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="27.75"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="#00376206" Foreground="#00000000" Style="{DynamicResource ToggleButtonStyle1}" Grid.Column="1">
<ToggleButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#00F3EEDB" Offset="0.9"/>
</LinearGradientBrush>
</ToggleButton.Background>
</ToggleButton>
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true" Grid.ColumnSpan="2" CornerRadius="7" Height="26" VerticalAlignment="Top" Margin="0,0,8,0" Background="#59000000">
<ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="5,3,0,3" VerticalAlignment="Center"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1" drag:DragDropHelper.IsDropTarget="False" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="BitmapEffect" TargetName="Bd">
<Setter.Value>
<DropShadowBitmapEffect />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<Setter Property="Background" TargetName="Bd">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5C5C5C" Offset="0.27"/>
<GradientStop Color="#FF585858" Offset="1"/>
<GradientStop Color="#FF747474" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
TreeView structure
<TreeView x:Name="treeView" Margin="4,40,4,4" Style="{DynamicResource SnazzyTreeView}" >
<TreeView.Resources>
</TreeView.Resources>
<TreeViewItem ItemsSource="{Binding Disks}" IsExpanded="True" drag:DragDropHelper.IsDragSource="True" drag:DragDropHelper.IsDropTarget="False" drag:DragDropHelper.DragDropTemplate="{StaticResource draggedDisk}">
<TreeViewItem.Header>
<TextBlock Text="Disks" Foreground="White" FontSize="16"/>
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem ItemsSource="{Binding DiskSets}" IsExpanded="True">
<TreeViewItem.Header>
<TextBlock Text="DiskSets" Foreground="White" FontSize="16"/>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
Bea Stolnitz's Blog Post: How can I drag and drop items between data bound ItemsControls?
Why do you need a style for a TreeViewItem?
It can be done using DataTemplates only, and don't specify a key if you want them to apply automatically.
<Window.Resources>
<DataTemplate DataType = "{x:Type local:DiskSpec}">
<TextBlock Text="{Binding Title}" drag:DragDropHelper.IsDragSource="True"
drag:DragDropHelper.IsDropTarget="False"/>
</DataTemplate>
<HierarchicalDataTemplate DataType = "{x:Type local:DiskSet}"
ItemsSource = "{Binding Path=Disks}">
<TextBlock Text="{Binding Title}"/>
</HierarchicalDataTemplate>
</Window.Resources>
tree.ItemsSource = new object[]{
new DiskSpec{Title = "Disc 1"},
new DiskSpec{Title = "Disc 2"},
new DiskSet{Title = "Set 1", Disks = new List<DiskSpec>{new DiskSpec{Title="Disc 1.1"}}},
new DiskSet{Title = "Set 2", Disks = new List<DiskSpec>{new DiskSpec{Title="Disc 2.1"}, new DiskSpec{Title="Disc 2.2"}}}};
After that you can enable drag in the Disk template and drop in the Set template.
just watch this screenshot I made so you see the difference:
I have these requirments to be changed in the ComboBox`s PopUp so it looks like the grouped WPF DataGrid, its only about the Popup-area, do not judge the editable area of the ComboBox or that there is no Header... Important are these things, because I could not change them:
ComboBox:
(Green Line) The alternating
Background of the Item must start at
the beginning
(Red Line) The TextBlocks within the
Border must be aligned Center OR
Right1.
(Blue) The weakly visible horizontal
Border must always stretch to the
right side or take all space2.
to 1.) I have no idea why there is a margin
to 2.) HorizontalAlignment of the TextBlock does not work
to 3.) I can make the stackpanel in the ItemTemplate of the Combobox a read background then you can see very well the red color has a margin somehow on the right and left side. Have no idea how to remove that.
Anyone can help, please?
If you want to see the textbox live just download it here:
http://www.sendspace.com/file/6lmbrh
Its a 30 kb VS2010 .NET 4.0 project.
Here is the XAML for the ComboBox:
<Window x:Class="TestComboGrouped.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="200">
<Window.Resources>
<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="Red"/>
<Style.Triggers>
<Trigger Property="ComboBox.AlternationIndex" Value="0">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
<Trigger Property="ComboBox.AlternationIndex" Value="1">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush RenderOptions.EdgeMode="Aliased" StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Color="#FFFEFEFF" Offset="0"/>
<GradientStop Color="#FFE4F0FC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ComboBoxBorderStyle" TargetType="Border">
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="BorderBrush" Value="#FFCEDFF6" />
<Setter Property="BorderThickness" Value="1 0 0 1" />
</Style>
<Style x:Key="ComboBoxStyle" BasedOn="{StaticResource {x:Type ComboBox}}" TargetType="{x:Type ComboBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource ComboBoxItemStyle}"/>
</Style>
<!-- Grouped CollectionView -->
<CollectionViewSource Source="{Binding WeeklyDateList,IsAsync=False}" x:Key="WeeklyView">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="MonthName"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<StackPanel>
<ComboBox
ItemsSource="{Binding Source={StaticResource ResourceKey=WeeklyView}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
Style="{StaticResource ComboBoxStyle}"
AlternationCount="2"
MaxDropDownHeight="300"
Width="Auto"
x:Name="comboBox"
>
<ComboBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
Background="White"
Foreground="DarkBlue"
FontSize="14"
FontWeight="DemiBold"
Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ComboBox.GroupStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Style="{StaticResource ComboBoxBorderStyle}">
<TextBlock Width="100" Foreground="Purple" Text="{Binding WeeklyLessonDate, StringFormat='yyyy-MM-dd'}"/>
</Border>
<Border Style="{StaticResource ComboBoxBorderStyle}">
<TextBlock Padding="5,0,5,0" Width="40" Text="{Binding WeekNumber}"/>
</Border>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</Window>1.2.
UPDATE:
#Meleak thats the updated image it looks very nice thanks to you:
I was just about to put my old 2-"ColumnHeader" in that ComboBox`s Popup top area but I could not find anymore my sample... seems due to changing/trying a lot I have overritten that code :/ I know I did it in the controltemplate above the scrollviewer with a stackpanel or a grid with 2 rowdefinitions. But your code looks now totally different to my default combobox controltemplate I have no idea how to merge both code snippets.
I think that was the code where I put the 2 "column headers", just search for inside the POPUP
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="4,3"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
// Here should be the column headers, but how merge your code with the ItemsPresenter?
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Microsoft_Windows_Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
<ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter Property="Background" Value="#FFF4F4F4"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
I think it looks pretty close. You can download my modified version from here
Added a template for ComboBoxItem
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid HorizontalAlignment="Stretch"
Margin="-5,0,0,0"
Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="45"/>
</Grid.ColumnDefinitions>
<Border Name="border1"
BorderThickness="0,0,1,1"
BorderBrush="#FFCEDFF6"
Grid.Column="0">
<TextBlock Foreground="Purple"
HorizontalAlignment="Right"
Margin="0,0,2,0"
Text="{Binding WeeklyLessonDate, StringFormat='yyyy-MM-dd'}"/>
</Border>
<Border Name="border2"
BorderThickness="0,0,1,1"
BorderBrush="#FFCEDFF6"
Grid.Column="1">
<TextBlock HorizontalAlignment="Center"
Text="{Binding WeekNumber}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="border1" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
<Setter TargetName="border2" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Red"/>
<Style.Triggers>
<Trigger Property="ComboBox.AlternationIndex" Value="0">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
<Trigger Property="ComboBox.AlternationIndex" Value="1">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush RenderOptions.EdgeMode="Aliased" StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Color="#FFFEFEFF" Offset="0"/>
<GradientStop Color="#FFE4F0FC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Ok in my ListBox scrolling images w/ text, etc. the saga continues. When I click one of the items, to select it, that runs a process to open a web browser and go to a specific URL. The problem I'm having now is that when the WPF app loses focus, and the web browser opens, the item clicked inside the listbox turns white. Here's the whole ListBox XAML. I have set the selected items to transparent, so does this have something to do with the WPF app losing focus?
Is there something I can add tom the code that runs the process to open the web browser to set focus back to the WPF app?
Thanks.
<ListBox ItemsSource="{Binding Source={StaticResource WPFApparelCollection}}" Margin="61,-8,68,-18" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionMode="Single" x:Name="list1" MouseLeave="List1_MouseLeave" MouseMove="List1_MouseMove" Style="{DynamicResource ListBoxStyle1}" Background="Transparent" BorderThickness="0">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="20,10,20,10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid>
<Image Source="{Binding Image}" MouseLeave="Image_MouseLeave" MouseEnter="Image_MouseEnter" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Image_MouseLeftButtonDown" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
</Grid>
<Label Content="{Binding Name}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Label_MouseLeftButtonDown" VerticalAlignment="Bottom" Foreground="White" Style="{StaticResource Gotham-Medium}" FontSize="8pt" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
One trick I've found when playing with selection colours in a ListBox is to work with the system brushes rather than fighting against them.
When a ListBox is focused and an item is selected, that item's background is SystemColors.HighlightBrush. When the ListBox loses focus, however, the selected item's background becomes SystemColors.ControlBrush.
Knowing this, you can override the system brushes for that ListBox so that the items within are painted with the colours you want.
<ListBox>
<ListBox.Resources>
<!-- override the system brushes so that selected items are transparent
whether the ListBox has focus or not -->
<SolidColorBrush
x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
<SolidColorBrush
x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
<SolidColorBrush
x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black" />
</ListBox.Resources>
<!-- ... your items here ... -->
</ListBox>