How to modify AvalonDock NavigatorWindow - wpf

I am using AvalonDock as the docking manager for my application. I noticed that it has a Ctrl + Tab window (the NavigatorWindow) but that seems to have some odd hard-coded classifications. I switched my last LayoutAnchorable to a LayoutDocument, so at least I don't have things in different groups now, but I really don't need "Active Tool Windows" and "Active Files" doesn't make sense in my context.
Is there any way to customize this component? I'd ideally just like to hide the left list, and change the tile of the right list to something more generic like "Active Windows".

There is a style that you can override (see below). The NavigatorWindow itself has no dependency properties that you could use to configure it so I don't think you can do more than restyling - but maybe thats all you need :-)
xmlns:avalonDockControls="clr-namespace:Xceed.Wpf.AvalonDock.Controls"
<Style x:Key="{x:Type avalonDockControls:NavigatorWindow}"
TargetType="{x:Type avalonDockControls:NavigatorWindow}">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="SizeToContent"
Value="WidthAndHeight" />
<Setter Property="ResizeMode"
Value="NoResize" />
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome ResizeBorderThickness="10"
CaptionHeight="16"
CornerRadius="3,3,3,3"
GlassFrameThickness="4" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type avalonDockControls:NavigatorWindow}">
<Grid>
<Border x:Name="WindowBorder"
BorderThickness="3"
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition MinHeight="54" />
<RowDefinition Height="*" />
<RowDefinition MinHeight="42" />
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding SelectedDocument.LayoutElement.IconSource, Converter={StaticResource NullToDoNothingConverter}}"
Stretch="None">
</Image>
<TextBlock x:Name="selectedElementTitle"
Text="{Binding SelectedDocument.LayoutElement.Title}"
TextTrimming="CharacterEllipsis"
Grid.Column="1"
VerticalAlignment="Center"
FontWeight="Bold"
Margin="4,0,0,0">
</TextBlock>
</Grid>
<TextBlock x:Name="selectedElementDescription"
Text="{Binding SelectedDocument.LayoutElement.Description}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center">
</TextBlock>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Active Tool Windows"
FontWeight="Bold"
Margin="0,3,0,4">
</TextBlock>
<ListBox x:Name="PART_AnchorableListBox"
Grid.Row="1"
ItemsSource="{Binding Anchorables}"
SelectedItem="{Binding SelectedAnchorable, Mode=TwoWay}"
Background="Transparent"
BorderThickness="0"
MaxHeight="400"
FocusVisualStyle="{x:Null}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Cursor"
Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding LayoutElement.IconSource, Converter={StaticResource NullToDoNothingConverter}}"
Stretch="None">
</Image>
<TextBlock Text="{Binding LayoutElement.Title}"
TextTrimming="CharacterEllipsis"
Grid.Column="1"
Margin="4,2,0,2">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<Grid Grid.Column="1"
Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Active Files"
FontWeight="Bold"
Margin="0,3,0,4">
</TextBlock>
<ListBox x:Name="PART_DocumentListBox"
Grid.Row="1"
ItemsSource="{Binding Documents}"
SelectedItem="{Binding SelectedDocument, Mode=TwoWay}"
Background="Transparent"
BorderThickness="0"
MaxHeight="400"
FocusVisualStyle="{x:Null}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Cursor"
Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding LayoutElement.IconSource, Converter={StaticResource NullToDoNothingConverter}}"
Stretch="None">
</Image>
<TextBlock Text="{Binding LayoutElement.Title}"
TextTrimming="CharacterEllipsis"
Grid.Column="1"
Margin="4,2,0,2">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="{Binding SelectedDocument.LayoutElement.ToolTip}"
VerticalAlignment="Center">
</TextBlock>
</Grid>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SelectedDocument"
Value="{x:Null}">
<Setter Property="Text"
Value="{Binding SelectedAnchorable.LayoutElement.Title}"
TargetName="selectedElementTitle" />
<Setter Property="Text"
Value="{x:Null}"
TargetName="selectedElementDescription" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Related

WPF Datagrid in Control in Viewbox isn't responsive

Application with an Dashboard.
The Dashboard uses Cards in the form of User Controls. These Controls weren't responsive so I put them into Viewboxes. Some Cards are working but some don't. Especially the Cards with DataGrids in them don't work for me. Maybe you can help me out.
DashboardView
Here is the DashboardPage:
<Page x:Class="Keppler.MES.Common.Pages.Dashboard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:sysglb="clr-namespace:System.Globalization;assembly=mscorlib"
xmlns:local="clr-namespace:Keppler.MES.Common.Pages"
xmlns:pageviewmodels="clr-namespace:Keppler.ViewModels.PageViewModels;assembly=Keppler.ViewModels" xmlns:controls="clr-namespace:Keppler.MES.Common.Pages.Controls"
mc:Ignorable="d"
Title="DashboardPage">
<Page.DataContext>
<pageviewmodels:VMDashboard/>
</Page.DataContext>
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\Common\ResourceDictionaries\KepplerColorsAndBrushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<controls:KepplerEffortCard PageName="Bookings" GroupedEfforts="{Binding EffortOfLastWorkDay}" EffortOfBindings="{Binding LastWorkDaysEffort}" JumpToLink="{Binding RequestPageChangeCommand}" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2"/>
<controls:KepplerEffortCard PageName="Bookings" GroupedEfforts="{Binding EffortOfLastWeek}" EffortOfBindings="{Binding LastWeeksEffort}" JumpToLink="{Binding RequestPageChangeCommand}" Grid.Column="6" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2"/>
<controls:KepplerOrdersCard PageName="Orders" Grid.ColumnSpan="12" Grid.Row="5" Grid.RowSpan="2" OrderBudgets="{Binding OrderBudgets}" JumpToLink="{Binding RequestPageChangeCommand}"/>
<controls:KepplerTurnOverCard Grid.Row="0" Grid.ColumnSpan="2" Header="{Binding TurnOverThisYear.Header}" TurnOver="{Binding TurnOverThisYear.TurnOver}" Grid.Column="0" Margin="10,0" />
<controls:KepplerTurnOverCard Grid.Row="0" Header="{Binding TurnOverLastYear.Header}" TurnOver="{Binding TurnOverLastYear.TurnOver}" Grid.Column="2" Grid.ColumnSpan="2" Margin="10,0" RenderTransformOrigin="0.5,0.5"/>
<controls:KepplerTurnOverCard Grid.Row="0" Grid.ColumnSpan="2" Header="{Binding TurnOverThisQuarter.Header}" TurnOver="{Binding TurnOverThisQuarter.TurnOver}" Grid.Column="4" Margin="10,0"/>
<controls:KepplerTurnOverCard Header="{Binding TurnOverThisMonth.Header}" TurnOver="{Binding TurnOverThisMonth.TurnOver}" Grid.ColumnSpan="2" Grid.Column="6" Grid.Row="0" Margin="10,0"/>
<Viewbox Grid.Row="1" Grid.Column="0" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding BudgetWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Invoices" WarningsInfo="{Binding InvoiceWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="4" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding ResourceWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="6" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding DeliveryWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="8" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding WorkloadWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="10" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerBankingCard BankingsInfo="{Binding BankingsInfo}"/>
</Viewbox>
<controls:KepplerCustomerCard PageName="Customers" Grid.Row="7" Grid.RowSpan="2" Customers="{Binding Customers}" Grid.ColumnSpan="12" JumpToLink="{Binding RequestPageChangeCommand}"/>
<controls:KepplerProjectsCard PageName="Projects" Grid.ColumnSpan="12" Grid.Row="9" Grid.RowSpan="2" Projects="{Binding Projects}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Grid>
Here is the Control:
<UserControl x:Class="Keppler.MES.Common.Pages.Controls.KepplerOrdersCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Keppler.MES.Common.Pages.Controls"
mc:Ignorable="d"
Name="OrderBudgetCard"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\..\Common\ResourceDictionaries\KepplerColorsAndBrushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Border CornerRadius="5" Margin="5" BorderThickness="0">
<Border.BitmapEffect>
<DropShadowBitmapEffect/>
</Border.BitmapEffect>
<Grid>
<Border x:Name="DBRounded" CornerRadius="5" BorderThickness="1" Background="#FF888888"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Border x:Name="Header" Grid.ColumnSpan="1" Grid.RowSpan="1" CornerRadius="5,5,0,0" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFAE00" Offset="0"/>
<GradientStop Color="#FFFFC500" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Button Background="Transparent" Command="{Binding ElementName=OrderBudgetCard, Path=JumpToLink}" CommandParameter="{Binding ElementName=OrderBudgetCard, Path=PageName}" Grid.ColumnSpan="1" Grid.RowSpan="2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"
BorderThickness="1" CornerRadius="5">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FFFFAE00"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<DataGrid x:Name="dgOrderBudgets"
Background="Transparent"
ItemsSource="{Binding ElementName=OrderBudgetCard, Path=OrderBudgets}"
AutoGenerateColumns="False"
HorizontalGridLinesBrush="Transparent"
VerticalGridLinesBrush="Transparent"
BorderBrush="Transparent"
IsReadOnly="True" Grid.RowSpan="2">
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="Background" Value="Transparent"/>
</Style>
</DataGrid.RowHeaderStyle>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="Margin" Value="5"/>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="black"/>
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="darkred"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="order number" Width="200" Binding="{Binding Order.Number}"/>
<DataGridTextColumn Header="budget [€]" Width="120" Binding="{Binding Order.Subtotal,StringFormat=C2, ConverterCulture=de-DE}"/>
<DataGridTextColumn Header="consumed [€]" Width="*" Binding="{Binding EffortInCash,StringFormat=C2, ConverterCulture=de-DE}"/>
<DataGridTextColumn Header="state" Width="*" Binding="{Binding Order.Title}"/>
</DataGrid.Columns>
</DataGrid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=DBRounded}"/>
</Grid.OpacityMask>
</Grid>
</Grid>
</Border>
I tried putting the other Controls into Viewboxes like the Warningcards, but I didnt get anything out of it. Doesnt matter if I used fill, uniform or uniformtofill.

Format the HierachicalDatatemplate for a TreeView

I am trying to make a TreeView in XAML and it works well.
1) I have a Class containing a Name and a list of Children
<TreeView x:Name="TreeViewOffset" ItemsSource="{Binding OffsetsCollection}" VM:TreeViewHelper.SelectedItem="{Binding MyCollection, Mode=TwoWay}" Margin="19,32,59,33" AutomationProperties.IsColumnHeader="True">
<TreeViewContainer>Some Properties</TreeViewContainer>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type VM:ParentViewModel}" ItemsSource="{Binding Children}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Reference"
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Ref"/>
<RowDefinition SharedSizeGroup="Value"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding MyName}" Margin="10, 10, 10,10 "/>
</Grid>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type VM:ChildrenViewModel}">
<Grid >
<Grid.ColumnDefinitions>
<!--Placeholders for two columns of ToggleButton-->
<ColumnDefinition SharedSizeGroup="RefName"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Name"/>
<RowDefinition SharedSizeGroup="Value"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ChildrenValue}" Grid.Column="1" Margin="25, 0,0, 0" />
</Grid>
</DataTemplate>
</TreeView.Resources>
2) I want to improve the display by adding an another textbox (who is contained in the ParentViewModel) but this time at the end of the childrens
It Should be exactly like :
Parent : Name
Children1 Value
Children2 Value
Children3 Value
Children4 Value
Value
And this is the problem, how to improve the XAML to show the value?
I have tried to insert under
<TextBlock Grid.Column="0" Text="{Binding MyName}" Margin="10, 10, 10,10 "/>
this
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Value}" Margin="10, 10, 10,10 "/>
but it doesnt work. It is all a question about formatting but I'am not expert enough. Could you help me?
What you need to set is the ItemContainerStyle for the TreeView
A good starting point would be something like this
<Style x:Key="myTreeViewItemContainerStyle" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="14" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ToggleButton
x:Name="Expander"
Grid.Row="0"
Grid.Column="0"
ClickMode="Press"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource myExpandCollapseToggleStyle}" />
<Border
x:Name="PART_Border"
Grid.Row="0"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter
x:Name="PART_Header"
Margin="0,2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<!-- Use the same colors for a selected item, whether the TreeView is focussed or not -->
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which you can apply to the TreeView by setting its style
<Style TargetType="{x:Type TreeView}">
<Setter Property="ItemContainerStyle" Value="{StaticResource myTreeViewItemContainerStyle}" />
</Style>
For your requirement, you need to add another control after the ItemsPresenter, which you then bind to the property you want to display.

How do I set combobox background colour when it gets focus

I'm relatively new to WPF, so bear with me.
I'm trying to set the background colour of a combo box when it receives focus. I'm setting a trigger in the control template for it's togglebutton to change colour on mouse over, and when it receives focus. Mouse over works fine, but when I tab into the combobox nothing happens until I tab a second time(It changes colour then).
So what I want is for the background colour to change when the user first tabs in.
Any help would be greatly appreciated.
<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="Black" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />
<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border
Grid.ColumnSpan="2"
Name="Border"
BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"
CornerRadius="0" BorderThickness="0.6"
Background="{StaticResource YellowBrush}">
</Border>
<Border
Grid.Column="1"
Margin="1"
BorderBrush="#444"
Name="ButtonBorder"
CornerRadius="0, 0, 0, 0"
BorderThickness="2"
Background="Gray" />
<Path Name="Arrow" Grid.Column="1"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
HorizontalAlignment="Center" Fill="White"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource YellowBrush1}" />
</Trigger>
<Trigger Property="ToggleButton.IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource YellowBrush1}" />
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="DarkGray"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="LightGray"/>
<Setter Property="Shape.Fill" TargetName="Arrow" Value="Black"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
<Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
<Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="TextElement.Foreground" Value="Black"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="IsEditable" Value="False"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{StaticResource NouvemYellowBrush}"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton"
ClickMode="Press"
Focusable="True"
IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
<ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
HorizontalAlignment="Left" VerticalAlignment="Center"
Focusable="False"
Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
<TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"
IsReadOnly="{TemplateBinding IsReadOnly}"
Visibility="Hidden" Background="Transparent"
HorizontalAlignment="Left" VerticalAlignment="Center"
Focusable="False">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Border Name="PART_ContentHost" Focusable="False"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<!-- Popup showing items -->
<Popup Name="Popup"
Placement="Bottom"
Focusable="False"
AllowsTransparency="True"
IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True"
MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
Focusable="False"
MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border Name="DropDownBorder"
Background="White"
Focusable="False"
Margin="0, 1, 0, 0"
CornerRadius="0"
BorderThickness="1"
BorderBrush="Black"/>
<ScrollViewer Margin="4" SnapsToDevicePixels="True" Focusable="False">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" Focusable="False"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
<Trigger Property="ComboBox.IsEditable" Value="True">
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
<Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
<Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit: showing the relevant view
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<command:EventToCommand Command="{Binding OnLoadingCommand}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unloaded">
<command:EventToCommand Command="{Binding OnClosingCommand}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="11*"/>
<ColumnDefinition Width="14*"/>
<ColumnDefinition Width="14*"/>
<ColumnDefinition Width="14*"/>
<ColumnDefinition Width="14*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".2*"/>
<RowDefinition Height="3.5*"/>
<RowDefinition Height="8*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="GridGlobalData" Grid.Row="1" Grid.ColumnSpan="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--left side-->
<Label Content="Code _________________________________________________________________________________________________________________"/>
<Label Content="Name _________________________________________________________________________________________________________________" Grid.Row="1"/>
<Label Content="Business Partner Type ________________________________________________________________________" Grid.Row="2"/>
<Label Content="Group _________________________________________________________________________________________________________________" Grid.Row="3"/>
<Label Content="Currency ___________________________________________________________________________________________________________" Grid.Row="4"/>
<TextBox x:Name="TextBoxCode" Text="{Binding PartnerCode, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1">
<TextBox.InputBindings>
<KeyBinding Command="{Binding ControlButtonCommand}" CommandParameter="Add" Key="A" Modifiers="Control" />
<KeyBinding Command="{Binding FindBusinessPartnerCommand}" CommandParameter="Code" Key="Enter"/>
</TextBox.InputBindings>
</TextBox>
<TextBox Text="{Binding PartnerName, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1">
<TextBox.InputBindings>
<KeyBinding Command="{Binding FindBusinessPartnerCommand}" CommandParameter="Name" Key="Enter"/>
</TextBox.InputBindings>
</TextBox>
<ComboBox ItemsSource="{Binding BusinessPartnerTypes}" DisplayMemberPath="Type" SelectedItem="{Binding PartnerType}" SelectedIndex="0" Grid.Column="1" Grid.Row="2"/>
<ComboBox ItemsSource="{Binding BusinessPartnerGroups}" DisplayMemberPath="BPGroupName" SelectedItem="{Binding PartnerGroup}" SelectedIndex="0" Grid.Column="1" Grid.Row="3"/>
<ComboBox ItemsSource="{Binding BusinessPartnerCurrencies}" DisplayMemberPath="Name" SelectedItem="{Binding PartnerCurrency}" SelectedIndex="0" Grid.Column="1" Grid.Row="4"/>
<!--right side-->
<Label Content="Display Currency _________________________________________________________________________________________________________________" Grid.Column="3" />
<Label Content="Invoices _________________________________________________________________________________________________________________" Grid.Column="3" Grid.Row="1"/>
<Label Content="Deliveries _________________________________________________________________________________________________________________" Grid.Column="3" Grid.Row="2"/>
<Label Content="Orders _________________________________________________________________________________________________________________" Grid.Column="3" Grid.Row="3"/>
<ComboBox ItemsSource="{Binding BusinessPartnerCurrencies}" DisplayMemberPath="Name" SelectedItem="{Binding DisplayCurrency}" Style="{StaticResource StyleComboBoxReadonly}" SelectedIndex="0" Grid.Column="4"/>
<TextBox Style="{StaticResource StyleTextBoxNonEditable}" Grid.Column="4" Grid.Row="1"/>
<TextBox Style="{StaticResource StyleTextBoxNonEditable}" Grid.Column="4" Grid.Row="2"/>
<TextBox Style="{StaticResource StyleTextBoxNonEditable}" Grid.Column="4" Grid.Row="3"/>
</Grid>
<TabControl SelectedIndex="{Binding SelectedPartnerView}" Grid.Row="2" Grid.ColumnSpan="6" >
<TabItem Header="General">
<BusinessPartner:BPGeneralView />
</TabItem>
<TabItem Header="Contacts">
<BusinessPartner:BPContactView />
</TabItem>
<TabItem Header="Addresses">
<BusinessPartner:BPAddressesView />
</TabItem>
<TabItem Header="Payment Terms">
<BusinessPartner:BPPaymentTerms />
</TabItem>
<TabItem Header="Properties">
<BusinessPartner:BPPropertiesView />
</TabItem>
<TabItem Header="Remarks">
<BusinessPartner:BPRemarksView />
</TabItem>
<TabItem Header="Attachments">
<BusinessPartner:BPAttachmentsView />
</TabItem>
</TabControl>
<Grid x:Name="GridCrontrolButtons" Grid.Row="3" Grid.ColumnSpan="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<data:CrudView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
</Grid>
</Grid>
You should be able to achieve this by adding an additional IsKeyboardFocused trigger alongside your MouseOver and IsFocused triggers in the ToggleButton control template:
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource YellowBrush1}" />
</Trigger>
MSDN: https://msdn.microsoft.com/en-us/library/bb613567%28v=vs.110%29.aspx (Scroll down to IsKeyboardFocused section)
UPDATE:
The problem in this case is to do with where you're setting your triggers. You're relying on the ToggleButton to have focus so that you can change it's background colour - but in actual fact you want to the content of the combobox to have focus.
The reason you have to TAB twice to apparently achieve focus is because for each ComboBox you're tabbing between the control's ToggleButton, and then the ComboBox selected item (through the ContentPresenter).
One possible fix: First you need to prevent your ToggleButton in your ComboBox template from getting focus:
<ToggleButton Name="ToggleButton"
ClickMode="Press"
Focusable="False"
IsTabStop="False" ... >
I've actually removed ALL of the Focusable="False" setters from your ToggleButton template as they're not needed.
Then make your ToggleButton template transparent (Border.Background), and remove the existing triggers that affect the Border.Background colour.
Now move to your ComboBox template and give the root <Grid> a name. I've called it templateRoot in my example.
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid Name="templateRoot">
<ToggleButton Name="ToggleButton" ... >
And now set the background colour for your combobox using that templateRoot. You can add the Triggers you removed from the ToggleButton template to the ComboBox template:
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource YellowBrush1}" />
</Trigger>
... and the other triggers.
With this approach, you're relying on the ComboBox control to trigger your changes when it has focus.
If this solution doesn't work for your needs, then I hope at least you can see where the problem you're having originates.
You shouldn't need to go to the level of editing the template for this, just the style:
<ComboBox>
<ComboBoxItem>Apple</ComboBoxItem>
<ComboBoxItem>Banana</ComboBoxItem>
<ComboBoxItem>Pear</ComboBoxItem>
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Violet" />
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
</ComboBox>

TabControl - Align TabItems correctly if free space dominates

I have a customized TabControl:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel Grid.Column="0" Panel.ZIndex="1" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Column="1">
<ItemsControl.Items>
<Button Height="50">DOMINATES</Button>
</ItemsControl.Items>
</ItemsControl>
</Grid>
<ContentPresenter Grid.Row="0" ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Background="LightCyan" Padding="20,0">
<TextBlock SnapsToDevicePixels="True" Text="{TemplateBinding Header}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock>1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock>2</TextBlock>
</TabItem>
</TabControl>
</Window>
Beside the TabItems other controls are placed - which are much higher than the TabItems. How can i stretch the TabItems and place the TextBox in the middle (so that the fill the area)? Can i adjust the Padding dynamically?
http://goo.gl/xcYOY3 The red marked area should be filled and the TextBox centered. Is this possible?
Thx :)
Solution
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" ContentSource="SelectedContent" />
<TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" Height="70" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabPanel}}, Path=ActualHeight}">
<TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0" Text="{TemplateBinding Header}" ></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock >1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock >2</TextBlock>
</TabItem>
</TabControl>
</Window>
I have edited your template As per you image ..please run this xaml code separately.
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" />
<Grid Grid.Row="1" Grid.Column="0" Background="LightCyan">
<TabPanel Panel.ZIndex="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
</Grid>
<ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" >
<TextBlock SnapsToDevicePixels="True" Margin="5,0,5,0" >
<ContentPresenter x:Name="ContentSite" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True"/>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock >1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock >2</TextBlock>
</TabItem>
</TabControl>
and output from above code is http://prntscr.com/2yc51f
Update
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" />
<TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" Height="50">
<TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" Text="{TemplateBinding Header}" ></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF ListBox items with template become invisible after grouping

I have ObservableCollection with items which I want to display in a ListBox.
Also I write a template for ListboxItem for correct display of my collection.
On this stage everything works fine.
in .cs
Sensors = new ObservableCollection<Sensor>();
...
lstBox.ItemsSource = Sensors;
in .xaml
...
<DataTemplate x:Key="SensorTileTemplate">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.ColumnSpan="3"></TextBlock>
<Image Source="{Binding ImageModel.ImgSource}" Style="{StaticResource ImageGlowStyle}" Height="72" Grid.Row="1" Grid.Column="0"></Image>
<StackPanel Grid.Row="1" Grid.Column="1" Margin="5">
<TextBlock Text="IP:"></TextBlock>
<TextBlock Text="Port:"></TextBlock>
<TextBlock Text="Command port:"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Margin="5">
<TextBlock Text="{Binding DeviceAddress}"></TextBlock>
<TextBlock Text="{Binding DeviceDataPort}"></TextBlock>
<TextBlock Text="{Binding DeviceControlPort}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="ContainerStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="ListBoxItem.Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
</ListBox>
The problem appears when I need to group certain items using expander as a group container.
in .cs
...
ICollectionView view = CollectionViewSource.GetDefaultView(Sensors);
view.GroupDescriptions.Add(new PropertyGroupDescription("GroupNumber"));
lstBox.ItemsSource = view;
...
in .xaml
<!--Same Template and Style-->
...
...
<Style x:Key="GroupContainerStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Group #" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
<ListBox.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupContainerStyle}" />
</ListBox.GroupStyle>
</ListBox>
This code works and groups items but items become invisible.
So without grouping items display correctly but with grouping expanders show nothing in it.
I think there is something about ItemsPresenter in Expander but can't figure out what.
The problem was in one third party theme I use in my app. That theme has a ListBox template like:
<Style TargetType="{x:Type ListBox}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
<ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
<StackPanel Margin="1,1,1,1" IsItemsHost="true" />
</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So I use an ItemsPresenter instead of the StackPanel in that template and everything works now.

Resources