Make an object follow another object - silverlight

I am trying to create some kind of a window or a toolbox which can be dragged by its header part, just like any window. For some reason, it doesn't seem to work for me. The header moves but the body part stays still.
Here's my code:
BehaviorCollection behaviorCollection = Interaction.GetBehaviors(this._explorerHeader);
MouseDragElementBehavior mouseDragBehavior = new MouseDragElementBehavior { ConstrainToParentBounds = false };
mouseDragBehavior.Dragging += (s1, e1) =>
{
Canvas.SetLeft(this._explorerBody, (Double)_explorerHeader.GetValue(Canvas.LeftProperty));
Canvas.SetTop(this._explorerBody, ((Double)_explorerHeader.GetValue(Canvas.TopProperty) + _explorerHeader.ActualHeight));
};
behaviorCollection.Add(mouseDragBehavior);
UPDATE:
Here's the control template of the control:
<Style x:Key="ApplicationExplorerDefaultStyle" TargetType="Controls:ApplicationExplorer">
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="300" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Background" Value="{StaticResource LightBlue}" />
<Setter Property="HeaderBackgroundBrush" Value="{StaticResource VeryLightBlue}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="TreeItemTemplate" Value="{StaticResource ChildTemplate}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Controls:ApplicationExplorer">
<Border BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}"
BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}"
CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CornerRadius}"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" >
<Grid x:Name="Root" MinWidth="100">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ExplorerHeader" Grid.Row="0" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HeaderBackgroundBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="{TemplateBinding Title}" Style="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TitleStyle}" VerticalAlignment="Center" />
<Controls:LayoutToggleButton Grid.Column="2" x:Name="LayoutButton" Cursor="Hand" />
</Grid>
<Border x:Name="ExplorerBody" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"
Grid.Row="1" HorizontalAlignment="Stretch" BorderThickness="0" >
<toolkit:TreeViewDragDropTarget AllowedSourceEffects="Copy" x:Name="treeViewDropTarget"
HorizontalAlignment="Left" VerticalAlignment="Top" >
<sdk:TreeView x:Name="treeView" ItemsSource="{TemplateBinding Nodes}" Background="Transparent" BorderThickness="0"
ItemTemplate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeItemTemplate}"
HorizontalAlignment="Left" Margin="10 0 0 0" />
</toolkit:TreeViewDragDropTarget>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any suggestions?

Related

AvalonDock DocumentHeaderTemplate not working for Floating Windows

In AvalonDock we use a LayoutDocumentExtended to add some AdditionalInformation (not only a string in our project) in the Title.
In this testcode, we set the DocumentHeaderTemplate as following.
<xcad:DockingManager.DocumentHeaderTemplate>
<DataTemplate DataType="{x:Type local:LayoutDocumentExtended}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title, StringFormat={}{0} ---- }" />
<TextBlock Text="{Binding AdditionalString}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.DocumentHeaderTemplate>
<xcad:LayoutRoot>
<xcad:LayoutPanel Orientation="Vertical" >
<xcad:LayoutDocumentPane>
<xcad:LayoutDocumentPane.Children>
<local:LayoutDocumentExtended Title="Test1" AdditionalString="848451"> </local:LayoutDocumentExtended>
<local:LayoutDocumentExtended Title="Test2" AdditionalString="1"></local:LayoutDocumentExtended>
</xcad:LayoutDocumentPane.Children>
</xcad:LayoutDocumentPane>
</xcad:LayoutPanel>
</xcad:LayoutRoot>
If i undock the LayoutDocument as a FloatingWindow, only the Title shows up and not the AdditionalString. As soon as I redock it again, the AdditionalString is shown again. Does someone have an idea, how I can set a configurable DocumentHeaderTemplate also on FloatingWindows?
The LayoutDocumentFloatingWindowControl control uses the WindowChrome to define the title bar. You probably want to modify the title bar of the chrome to allow it to show additional vertical content i.e. extra lines. Alternatively, consider to show the extra information in parenthesis and in the same single line.
Override the DocumentTitleTemplate to layout the title:
<DataTemplate x:Key="DocumentTitleTemplate">
<TextBlock Text="{Binding Title}"
TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
The override the LayoutDocumentFloatingWindowControl style to modify the title bar height:
<Style x:Key="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}"
TargetType="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
<Setter Property="BorderThickness"
Value="3" />
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome ResizeBorderThickness="10"
CaptionHeight="16"
CornerRadius="3,3,3,3"
GlassFrameThickness="0"
ShowSystemMenu="False" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}">
<AdornerDecorator>
<Grid>
<Border x:Name="WindowBorder"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid Margin="3">
<Grid.RowDefinitions>
<RowDefinition MinHeight="16"
Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{Binding Model.RootDocument, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding Model.Root.Manager.DocumentTitleTemplate, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplateSelector="{Binding Model.Root.Manager.DocumentTitleTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" />
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
Focusable="False"
Visibility="{Binding IsMaximized, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolToVisibilityConverter}}"
Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
Command="{x:Static shell:SystemCommands.MaximizeWindowCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Window_Maximize}"
Grid.Column="2">
<Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinMaximize.png}">
</Image>
</Button>
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
Focusable="False"
Visibility="{Binding IsMaximized, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}"
Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
Command="{x:Static shell:SystemCommands.RestoreWindowCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Window_Restore}"
Grid.Column="2">
<Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinRestore.png}">
</Image>
</Button>
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
Focusable="False"
Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
Command="{Binding Path=RootDocumentLayoutItem.CloseCommand, RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Document_Close}"
Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
Grid.Column="3">
<Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinClose.png}">
</Image>
</Button>
</Grid>
<ContentPresenter Content="{TemplateBinding Content}"
Grid.Row="1" />
</Grid>
</Border>
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="WindowState"
Value="Maximized">
<Setter Property="Padding"
Value="3"
TargetName="WindowBorder" />
</Trigger>
<DataTrigger Binding="{Binding Model.RootDocument.IsActive, RelativeSource={RelativeSource Self}}"
Value="True">
<Setter TargetName="WindowBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How can I set ScrollContentPresenter a backgroundcolor?

How can I give ScrollContentPresenter a backgroundcolor? is the same question, but I set the Background on the Parent of the ScrollContentPresenter. It is the Grid and it does not work for me. I can not change the background.
<Style x:Key="ScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Border x:Name="border" BorderBrush="{Binding L1, Source={x:Static color:DesignBrushCollection.DesignColors}}" BorderThickness="1">
<Grid x:Name="Grid" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Background="Red">
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" />
</Grid>
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"
Style="{DynamicResource ScrollBarStyle}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border"
Value="{Binding AC3, Source={x:Static color:DesignBrushCollection.DesignColors}}"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border"
Value="{Binding AC3, Source={x:Static color:DesignBrushCollection.DesignColors}}"/>
<Setter Property="Background" TargetName="border"
Value="{Binding BG1, Source={x:Static color:DesignBrushCollection.DesignColors}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="border" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Width="auto" Height="auto">
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="3" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<local:CommonLabel RequiredMark="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type local:CommonComboBox}},Path=RequiredMark}"
FontSize="13" Padding="0"
Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type local:CommonComboBox}},Path=Content}"
Grid.Row="0" Height="16" Width="139"
Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.ColumnSpan="2" />
<ScrollViewer Style="{StaticResource ScrollViewerStyle}" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Grid.Row="2">
<TextBox x:Name="TextField" TextWrapping="Wrap" BorderThickness="0" CaretBrush="{Binding AC3, Source={x:Static color:DesignBrushCollection.DesignColors}}"
Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CommonTextField}},Path=Content,Mode=OneWay}" >
</TextBox>
</ScrollViewer>
</Grid>
</UserControl>
TextBox.Background does override the ScrollViewer.Background. If you set TextBox.Background = "Transparent" or TextBox.Background = "{x:Null}" you will see ScrollViewer.Background.
<TextBox x:Name="TextField" Background="Transparent" ... />
Be aware, that ScrollViewer.IsFocused set to true if you click the border of ScrollViewer or set the focus in code behind, not if you input a text in the TextBox.

How to modify AvalonDock NavigatorWindow

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>

Performance issue while LayoutTransform is applied to DataGridCell content

I have a custom datagrid whose cell is styled as below
<Style x:Key="CellStyleBase"
TargetType="{x:Type DataGridCell}">
<Setter Property="Visibility"
Value="Visible" />
<Setter Property="Background"
Value="{Binding RelativeSource={RelativeSource Self}, Path=Column.Header.CellBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid x:Name="BackgroundGrid"
Background="{TemplateBinding Background}">
<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Text}"
HorizontalAlignment="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Column.Header.CellHorzontalAlignment}"
VerticalAlignment="Center"
FontWeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Column.Header.CellFontWeight}"
Margin="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Margin}"
Padding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Padding}" />
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90" />
</TransformGroup>
</Grid.LayoutTransform>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The datagrid is styled as below
<Style TargetType="{x:Type local:CustomDataGrid}">
<Setter Property="BorderThickness"
Value="1" />
<!-- This is needed to force DG to have a non-default value. Otherwise the DGR.DetailsVisibility cannot have a value of VisibleWhenSelected by default. -->
<Setter Property="RowDetailsVisibilityMode"
Value="VisibleWhenSelected" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="true" />
<Setter Property="VirtualizingPanel.IsVirtualizing"
Value="True" />
<Setter Property="VirtualizingPanel.VirtualizationMode"
Value="Recycling" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled"
Value="True" />
<Setter Property="EnableColumnVirtualization"
Value="True" />
<Setter Property="EnableRowVirtualization"
Value="True" />
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="CellStyle"
Value="{StaticResource CellStyleBase}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomDataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True"
Padding="{TemplateBinding Padding}">
<ScrollViewer Focusable="false"
Name="DG_ScrollViewer">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--Left Column Header Corner -->
<Border BorderBrush="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:CustomDataGrid}}, Path=HeaderBorderBrush}"
BorderThickness="0,0,1,0"
Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:CustomDataGrid}}, Path=HeaderBackground}"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=CellsPanelHorizontalOffset}"
Visibility="Collapsed" />
<!--Column Headers-->
<DataGridColumnHeadersPresenter Grid.Column="1"
Name="PART_ColumnHeadersPresenter"
Visibility="Visible">
<DataGridColumnHeadersPresenter.Style>
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Border Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:CustomDataGrid}}, Path=NameHeaderBackground}">
<ItemsPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridColumnHeadersPresenter.Style>
</DataGridColumnHeadersPresenter>
<!--Column Header Splitter-->
<GridSplitter Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Height="4"
HorizontalAlignment="Stretch"
Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:CustomDataGrid}}, Path=NameHeaderBackground}"
Foreground="Transparent"
Cursor="SizeWE" />
<!-- Line separates the column header with the content-->
<Canvas Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Height="1.5"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:CustomDataGrid}}, Path=HorizontalGridLinesBrush}" />
<!--DataGrid content-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
Grid.Row="2"
Grid.ColumnSpan="2"
CanContentScroll="{TemplateBinding CanContentScroll}" />
<ScrollBar Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="2"
Name="PART_VerticalScrollBar"
Orientation="Vertical"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{Binding Path=VerticalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Style="{StaticResource ScrollBarStyle}" />
<Grid Grid.Row="3"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=NonFrozenColumnsViewportHorizontalOffset}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollBar Grid.Column="1"
Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{Binding Path=HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Style="{StaticResource ScrollBarStyle}" />
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger SourceName="DG_ScrollViewer"
Property="ComputedVerticalScrollBarVisibility"
Value="Visible">
<Setter Property="IsShowingHorizontalScrollBar"
Value="True" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the datagrid, rows will be dynamically added using a background thread and it can contain thousands of data. There is a performance issue with the datagrid. CPU usage keeps on increasing.
I found out that the reason is LayoutTransform. If I set the Height of the DataGridCell or Width of the Grid which is the content of the cell, the CPU usage will be reduced. But I cannot hardcode the same. The width should be set based on the length of the content.
Setting hardcoded height:
<Setter Property="Height"
Value="50" />
Setting hardcoded width:
<Grid x:Name="BackgroundGrid"
Background="{TemplateBinding Background}"
Width="50">
<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Text}"
HorizontalAlignment="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Column.Header.CellHorzontalAlignment}"
VerticalAlignment="Center"
FontWeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Column.Header.CellFontWeight}"
Margin="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Margin}"
Padding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Padding}" />
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90" />
</TransformGroup>
</Grid.LayoutTransform>
</Grid>
First, I tried binding a converter to which content is passed and width is calculated and returned to Width property of Grid. This causes a flickering while new data is added and the CPU usage will be increased.
<Grid x:Name="BackgroundGrid"
Background="{TemplateBinding Background}"
Width="{Binding Path=Content.Text,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Converter={StaticResource WidthConverter}}">
<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Text}"
HorizontalAlignment="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Column.Header.CellHorzontalAlignment}"
VerticalAlignment="Center"
FontWeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Column.Header.CellFontWeight}"
Margin="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Margin}"
Padding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridCell}},Path=Content.Padding}" />
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90" />
</TransformGroup>
</Grid.LayoutTransform>
</Grid>
Second, I replaced LayoutTransform with RenderTransform. The width of the cell will not increase based on the content which will result in showing only part of the data.
Third, I tried binding a property to Height of DataGridCell which is updated dynamically with highest width of the value in the DataGridCell. This is also consuming CPU usage.
Is there any other alternative to achieve the result of LayoutTransform other than RenderTransform?
Looking forward to any kind of input/suggestions. Thanks.
I would try making the transform happen in the rendering logic itself. I haven't tried this myself but I think it is worth a shot to see if this would give similar performance to using RenderTransform while also giving you the result that you are looking for if you use RotatedText in place of your TextBlock with the LayoutTransform:
public class RotatedText : FrameworkElement
{
public string Text { get; set; }
protected override void OnRender(DrawingContext drawingContext)
{
base.OnRender(drawingContext);
var ft = new FormattedText(Text, CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Calibri"), 12, Brushes.Black);
drawingContext.PushTransform(new RotateTransform(-90, 0, ft.Width));
drawingContext.DrawText(ft, new Point(0, ft.Width));
drawingContext.Pop();
Width = ft.Height;
Height = ft.Width;
}
}

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>

Resources