Develop Reference

Listview Surpressing Controlttemplate Routed Events / Animation

I have a style that modyfies the appearance of a radiobutton:
<Style TargetType="ctrl:RadioButtonWithIcon">
<Setter Property="Margin" Value="5,0"/>
<Setter Property="Foreground" Value="{StaticResource stdForeGround}"/>
<Setter Property="Background" Value="{StaticResource stdBackGround}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctrl:RadioButtonWithIcon">
<Border BorderBrush="{StaticResource stdBorder}" Name="brdBackground" Background="{TemplateBinding Background}" BorderThickness="2" CornerRadius="5" MaxWidth="100" MaxHeight="80">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ContentPresenter Margin="0,0,0,2" HorizontalAlignment="Center" Grid.Row="1" ContentSource="{TemplateBinding Content}"/>
<Path x:Name="pthIcon" StrokeEndLineCap="Square" Fill="{StaticResource stdDisabled}" Stretch="Uniform" Margin="5" StrokeThickness="3" Stroke="{TemplateBinding Foreground}" Data="{TemplateBinding IconPath}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter" SourceName="brdBackground">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="pthIcon" Storyboard.TargetProperty="Margin">
<ThicknessAnimation BeginTime="0:0:0" From="5" To="2,2,2,5" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave" SourceName="brdBackground">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="pthIcon" Storyboard.TargetProperty="Margin">
<ThicknessAnimation BeginTime="0:0:0" To="5" From="2,2,2,5" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One feature of it is that the icon "wobbles" a bit when you hover over it. This is achieved using the eventtriger and a margin.
It works as expected if I use the radiobutton by itself:
now i used the control inside of a listview and for some reasons my mouseover events and animations dont fire anymore.
<ListView Background="Transparent" ItemContainerStyle="{StaticResource lstStyleVM}" BorderBrush="Transparent" BorderThickness="0" ItemsSource="{Binding FavoriteViewModes}" SelectedItem="{Binding SelectedFavorite}" Tag="{Binding ElementName=MW, Path=DataContext}">
<ListView.Style>
<Style TargetType="ListView">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Style>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<ctrl:RadioButtonWithIcon ViewMode="{Binding ViewMode}" Content="{Binding Name}" IsEnabled="False" IsChecked="{TemplateBinding IsSelected}"/>
<Grid Visibility="{TemplateBinding IsMouseOver, Converter={StaticResource boolToVisibility}}">
<Button Visibility="{TemplateBinding IsSelected, Converter={StaticResource boolToVisibility}}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0" Style="{StaticResource TransparentButton}" Command="{Binding ElementName=MW, Path=DataContext.RemoveFavorite}" CommandParameter="{Binding .}">
<Border Padding="0" BorderBrush="Gray" BorderThickness="1" CornerRadius="20" Background="Firebrick">
<Border Padding="0" BorderBrush="White" BorderThickness="2" CornerRadius="20" Background="Firebrick">
<Path Height="12" Width="12" Stretch="Fill" Margin="3" Fill="White" Data="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />
</Border>
</Border>
</Button>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I think the listview is handeling the events and thus not passing them through to the radiobuton in its controltemplte but thats just a guess.
How can i get my animations to work in the listview as well?

WPF Optimization

So I have an application that has pages of Buttons. Each page can have up to 100 buttons on it and the User can navigate from page to page. The problem is that each Button calls a number of Converters, the more Buttons on a Page, the longer it takes to switch from one page to another....
I have isolated the problem to the number of Converters (on each Button) commenting out the code in the converters doesn't make any difference so it's not that.....
In the App.xaml defines 'POSButtonContent' defines and 'POSButton' Style
<DataTemplate po:Freeze="True" x:Key="POSButtonContent">
<LocalItemCount:AdornedControl
HorizontalAdornerPlacement="Outside" VerticalAdornerPlacement="Outside"
IsAdornerVisible="{Binding First_Product.Local_Item_Count, Converter={Converters:ShowLocalItemCount}}" AdornerOffsetX="17" AdornerOffsetY="15">
<Button x:Name="POSButton" Style="{StaticResource POS_Button}" >
<Button.IsEnabled>
<MultiBinding Converter="{Converters:DisablePOSButtonConverter}">
<MultiBinding.Bindings>
<Binding />
<Binding Path="DataContext.First_Product.Local_Item_Count" ElementName="POSButton" />
<Binding Path="DataContext.SetLocalStockAvailability" ElementName="Base" />
</MultiBinding.Bindings>
</MultiBinding>
</Button.IsEnabled>
</Button>
<LocalItemCount:AdornedControl.AdornerContent>
<StackPanel HorizontalAlignment="Left">
<Border Background="Green" CornerRadius="2" Width="auto" BorderThickness="1" BorderBrush="Black">
<Label MinWidth="15" Content="{Binding First_Product.Local_Item_Count}" Padding="0.5" FontSize="12" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{Converters:ShowLocalItemCountWarning}">
<Binding Path="First_Product.Local_Item_Count"/>
<Binding Path="First_Product.Min_Local_Item_Count"/>
</MultiBinding>
</DataTrigger.Binding>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="LocalItemCountStoryboard">
<Storyboard FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="0:0:1"
FillBehavior="HoldEnd"
RepeatBehavior="Forever">
<DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Green"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="LocalItemCountStoryboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</LocalItemCount:AdornedControl.AdornerContent>
</LocalItemCount:AdornedControl>
</DataTemplate>
<Style x:Key="POS_Button" po:Freeze="True" TargetType="{x:Type Button}" x:Name="POSButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate po:Freeze="True" TargetType="{x:Type Button}">
<Button FontSize="{Binding POS_Button_Style.FontSize}" HorizontalContentAlignment="Center" Padding="2" Foreground="{Binding POS_Button_Style.Foreground}" FontFamily="{Binding POS_Button_Style.TypeFace}" Style="{StaticResource Default}" Command="{Binding DataContext.ButtonCommand, ElementName=Base}" CommandParameter="{Binding}" Margin="3" >
<StackPanel>
<Grid>
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Grid.Row="1" Margin="10" Visibility="{Binding DataContext.ShowButtonText, ElementName=Base}" MaxWidth="{Binding ActualHeight, ElementName=POSButton}" MaxHeight="{Binding ActualHeight, ElementName=POSButton}" x:Name="vb1">
<Image x:Name="ButtonImage" Grid.Row="1" Margin="0"
Source="{Binding ImagePath, TargetNullValue={x:Null}}"
RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" VerticalAlignment="Center"
Stretch="Fill" />
</Viewbox>
<Label Padding="0" HorizontalAlignment="Left" VerticalContentAlignment="Center" Background="Transparent" FontSize="{Binding FontSize, ElementName=displayname}" FontFamily="{Binding FontFamily, ElementName=displayname}" Foreground="{Binding Foreground, ElementName=displayname}" Content="{Binding DataContext.KeyboardBuffer, ElementName=Base}" Grid.Row="1" >
<Label.Visibility>
<MultiBinding Converter="{Converters:KBBufferTextVisibilityConverter}" >
<Binding Path="Source" ElementName="ButtonImage" />
<Binding Path="DataContext.ShowButtonText" ElementName="Base"/>
<Binding Path="LNK_ButtonLinks"/>
</MultiBinding>
</Label.Visibility>
</Label>
<TextBlock x:Name="displayname" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding DisplayName}" >
<TextBlock.Visibility>
<MultiBinding Converter="{Converters:ButtonTextVisibilityConverter}" >
<Binding Path="Source" ElementName="ButtonImage" />
<Binding Path="DataContext.ShowButtonText" ElementName="Base"/>
<Binding Path="LNK_ButtonLinks"/>
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
</Grid>
<Thumb Visibility="{Binding DataContext.ResizeButtons, ElementName=Base}" VerticalAlignment="Bottom" Margin="0,0,0,0"
DragDelta="OnResizeThumbDragDelta"
DragStarted="OnResizeThumbDragStarted"
DragCompleted="OnResizeThumbDragCompleted">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom">
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="SizeNWSE"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Canvas Background="White" Width="35" Height="35">
<Path Width="35" Height="35" Stretch="Fill" Fill="#FF000000" Data="F1 M 30.25,58L 18,58L 18,45.75L 22,41.75L 22,50.75L 30,42.75L 33.25,46L 25.25,54L 34.25,54L 30.25,58 Z M 58,45.75L 58,58L 45.75,58L 41.75,54L 50.75,54L 42.75,46L 46,42.75L 54,50.75L 54,41.75L 58,45.75 Z M 45.75,18L 58,18L 58,30.25L 54,34.25L 54,25.25L 46,33.25L 42.75,30L 50.75,22L 41.75,22L 45.75,18 Z M 18,30.25L 18,18L 30.25,18L 34.25,22L 25.25,22L 33.25,30L 30,33.25L 22,25.25L 22,34.25L 18,30.25 Z "/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</StackPanel>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then in the View..... is a Grid with a Button in each cell (at ContentPresenter)
<Grid RenderOptions.CachingHint="Cache">
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Button Width="1" Height="1" Command="{Binding DataContext.DecoyButtonPress, ElementName=Base}" CommandParameter="Decoy Button Pressed" AttachedProperties:FocusExtension.IsFocused="{Binding DataContext.FocusDecoy, ElementName=Base}" ></Button>
<ItemsControl ItemsSource="{Binding Buttons}" VirtualizingPanel.VirtualizationMode="Recycling"
VirtualizingPanel.IsVirtualizing="True"
ScrollViewer.CanContentScroll="True">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding DataContext.IsViewSelected, ElementName=ContentMenu_ViewUI}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="SelectedViewStoryboard">
<Storyboard FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
Duration="0:0:2"
FillBehavior="HoldEnd"
RepeatBehavior="Forever">
<DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red"/>
<DiscreteColorKeyFrame KeyTime="0:0:1" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="SelectedViewStoryboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding Column}" />
<Setter Property="Grid.Row" Value="{Binding Row}" />
<!-- Can either use a DataTrigger to determine these values,
or store them on the object itself -->
<Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}" />
<Setter Property="Grid.RowSpan" Value="{Binding RowSpan}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource POSButtonContent}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Any ideas on how to optomise the XAML would be appreciated..... Thanks.

How can I lose focus from a ComboBox after selecting a value from the dropdown?

I am trying to prevent the directional keys being used in a combobox after selecting the value in the combobox. The functionality of the combobox is that when a value is selected then it can no longer be clicked on, but after the dropdown closes the directional keys can then select a value already being used. I want to 'lose focus' of the combobox or prevent the directional keys from being used.
XAML
<Grid Grid.Row="1" Margin="20 10 20 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="ComboBoxItem">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="Background" Value="#242424"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="MinHeight" Value="20"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsEnabled" Value="{Binding IsAvailable}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HighlightVisual">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.33"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HighlightVisual2">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Border x:Name="HighlightVisual" Width="{TemplateBinding Width}" BorderBrush="#88FFFFFF" Margin="1" BorderThickness="1" Background="#33FFFFFF" CornerRadius="1" Visibility="Collapsed"/>
<Border x:Name="HighlightVisual2" Width="{TemplateBinding Width}" Background="#33FFFFFF" Visibility="Collapsed"/>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="5 0 5 0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<TextBlock Text="{Binding Path=StringLibrary.LM_Priority, Source={StaticResource Strings}}" FontFamily="Segoe UI" Foreground="#FFFFFF" FontSize="12" VerticalAlignment="Center" />
<ComboBox Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="200" Margin="10 0 0 0" ItemsSource="{Binding Priorities}" SelectedValuePath="PriorityNumber" SelectedValue="{Binding SelectedPriority, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid>
<TextBlock Text="{Binding PriorityNumber}" FontFamily="Segoe UI Semibold" Foreground="#FFFFFF" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="4 0 0 0" />
<TextBlock Text="{Binding CurrentList}" FontFamily="Segoe UI" FontStyle="Italic" MaxWidth="150" Foreground="#FFFFFF" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 0 4 0" />
</Grid>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>

Thanks for the comments. Nighthawk441's advice would have worked fine, but Helix 88 reminded me of just using a shortcut to lose focus of the ComboBox. I just created a 'dummy' TextBox and set the focus to that after the DropDown is closed. I added
DropDownClosed="ComboBox_DropDownClosed"
to the ComboBox Here are the changes I made for those interested. Thanks again.
<!--DROPDOWN-->
<ComboBox Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="200" Margin="10 0 0 0" ItemsSource="{Binding Priorities}" SelectedValuePath="PriorityNumber" SelectedValue="{Binding SelectedPriority, Mode=TwoWay}" DropDownClosed="ComboBox_DropDownClosed">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid>
<!--PRIORITY NUMBER-->
<TextBlock Text="{Binding PriorityNumber}" FontFamily="Segoe UI Semibold" Foreground="#FFFFFF" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="4 0 0 0" />
<!--CURRENT LIST-->
<TextBlock Text="{Binding CurrentList}" FontFamily="Segoe UI" FontStyle="Italic" MaxWidth="150" Foreground="#FFFFFF" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 0 4 0" />
</Grid>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The 'dummy' textbox
<!--used to lose focus when dropdown is closed-->
<TextBox x:Name="dummyTB" Width="0" Height="0" Opacity="0" VerticalAlignment="Top" HorizontalAlignment="Right" />
And the Code-Behind
private void ComboBox_DropDownClosed(object sender, EventArgs e)
{
dummyTB.Focus();
}

The same problem happens when scrolling with the MouseWheel over the newly closed ComboBox, be it in a Standalone Combobox or, as in my case, in a Combobox added to a DataGrid via a DataGridTemplateColumn, like this:
<DataGrid x:Name="dgvFieldsMapping" Grid.Row="1" ItemsSource="{Binding}">
<DataGrid.Columns>
...
<DataGridTemplateColumn Width="*" Header="Destination Field" >
<DataGridTemplateColumn.CellTemplate >
<DataTemplate >
<ComboBox ItemsSource="{Binding Source={StaticResource CustomerDbFields}}" SelectedValue="{Binding destinationField, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ></ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
...
</DataGrid.Columns>
</DataGrid>
So, whenever the DropDown is closed, the Mousewheel would still scroll that Combobox's Items and modify the Selection.
I ended up modifying my XAML to look like this:
<DataGrid x:Name="dgvFieldsMapping" Grid.Row="1" ItemsSource="{Binding}">
<DataGrid.Resources>
<Style x:Key="dgvComboBox_Loaded" TargetType="ComboBox">
<EventSetter Event="Loaded" Handler="dgvCombobox_Loaded" />
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
...
<DataGridTemplateColumn Width="*" Header="Destination Field" >
<DataGridTemplateColumn.CellTemplate >
<DataTemplate >
<ComboBox Style="{StaticResource dgvComboBox_Loaded}" ItemsSource="{Binding Source={StaticResource CustomerDbFields}}" SelectedValue="{Binding destinationField, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ></ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
...
</DataGrid.Columns>
</DataGrid>
And adding these lines in codebehind
public void dgvCombobox_Loaded(Object sender, RoutedEventArgs e)
{
((ComboBox)sender).DropDownClosed -= ComboBox_OnDropDownClosed;
((ComboBox)sender).DropDownClosed += new System.EventHandler(ComboBox_OnDropDownClosed);
}
void ComboBox_OnDropDownClosed(object sender, System.EventArgs e)
{
dgvFieldsMapping.Focus();
}
In this way I just move the Focus away from the ComboBox to the outer DataGrid after closing its corresponding DropDown, and I don't need to add any dummy FrameWorkElement

HorizontalAlignment Issue

I am using Silverlight 5 and Telerik library.
I have set my RadPanelBar HorizontalAlignment to stretch. When my control is displayed the first time, it takes the size of its parent control. But the problem is, when my data grows horizontally, my panelbar grows with it!
Here goes my code, I have put all the controls to horizontalalignment to stretch, but no effect:
<UserControl.Resources>
<DataTemplate x:Key="ContentTemplate">
<ScrollViewer HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Top">
<ItemsControl x:Name="Test"
ItemsSource="{Binding Items}"
HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical"
Height="220"
HorizontalAlignment="Stretch">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:ParameterItem Style="{StaticResource ParamItem}"
Description="{Binding Code}"
ParamValue="{Binding Value}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadBusyIndicator IsBusy="{Binding IsLoading}">
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Height="28">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/ISDN.NSS.UI.Themes;component/Images/HeaderBG.png" />
</Grid.Background>
<TextBlock Grid.Column="0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Arial" Margin="8,0,0,0" Text="Model Parameters"></TextBlock>
</Grid>
<telerik:RadPanelBar Grid.Row="1"
Margin="2"
ItemsSource="{Binding Parameters}"
HorizontalAlignment="Stretch"
>
<telerik:RadPanelBar.ItemTemplate>
<telerik:HierarchicalDataTemplate ItemTemplate="{StaticResource ContentTemplate}"
ItemsSource="{Binding RootItems}">
<TextBlock Text="{Binding Name}" FontSize="13" FontWeight="Bold" FontFamily="Arial"/>
</telerik:HierarchicalDataTemplate>
</telerik:RadPanelBar.ItemTemplate>
</telerik:RadPanelBar>
</Grid>
</telerik:RadBusyIndicator>
</Grid>
Can anyone help?

The problem is solved with the support of Telerik Team.
Here goes the code for the edited template of the RadPanelBar:
<telerik:Office_BlackTheme x:Key="Theme" />
<SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000" />
<Style x:Key="RadPanelBarStyle" TargetType="telerik:RadPanelBar">
<Setter Property="ExpandMode" Value="Single" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:PanelBarPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadPanelBar">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Vertical">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="transformationRoot"
Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="0" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Horizontal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="transformationRoot"
Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="-90" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<telerik:LayoutTransformControl x:Name="transformationRoot">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<!-- <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Padding="{TemplateBinding Padding}" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"> -->
<ItemsPresenter />
<!-- </ScrollViewer> -->
</Border>
</telerik:LayoutTransformControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="IsTabStop" Value="true" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
The default scrollviewer had to be removed from the RadPanelBar default style.

How to show/hide a panel

When the mouse hover, the panel will be show on the left side and leave the mouse it will be hiden.
How to do that in WPF?
Is there any component?

Here's a slide-out console panel from one of my apps (I haven't included the style, but you get the idea). It starts with a width and height of zero, and expands when a toggle button is clicked (notice the EventTrigger that ties the slide-out animation to the Unchecked event of the Togglebutton).
If you base it on the mouseover event instead, that should help you on your way.
<!-- Console Panel -->
<Border Style="{StaticResource SettingsWindowStyle}" x:Name="ConsoleBorder" Grid.Row="0" Grid.Column="2" Margin="0,0,0,0">
<Border.Triggers>
<EventTrigger SourceName="toggleConsole" RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width" To="635" />
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.3" Storyboard.TargetProperty="Height">
<LinearDoubleKeyFrame Value="680" KeyTime="0:0:0.2" />
<LinearDoubleKeyFrame Value="690" KeyTime="0:0:0.24" />
<LinearDoubleKeyFrame x:Name="FullScreenConsole" Value="700" KeyTime="0:0:0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="toggleConsole" RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="Height">
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:0.2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetProperty="Width">
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource ToggleButtonStyle}" x:Name="toggleConsole">
<TextBlock Text="Console" Foreground="Black">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
<ToggleButton.ToolTip>
<ToolTip>
<TextBlock Padding="10" Background="White" Foreground="Black" Text="Show/Hide" />
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
<Rectangle Style="{StaticResource RectangleDividerStyle}" />
<DockPanel Grid.Column="0" Margin="10,2,0,2" Background="#33FFFFFF">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Margin="0,10,0,0">
<!-- main screen box -->
<TextBox x:Name="txtConsole" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" Margin="5,0,0,0" Width="500" Height="590" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBox>
<!-- button row -->
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,10,0,0">
<TextBox x:Name="txtSend" Width="400" Height="30" Margin="0,0,0,0" KeyDown="txtSend_KeyDown" >
</TextBox>
<Button Name="cmdSend" Click="cmdSend_Click" Width="80" Margin="3,0,0,0" Template="{StaticResource GlassButton}">
<TextBlock Foreground="LightGray">Send</TextBlock>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,5,0,0">
<Button HorizontalAlignment="Left" Margin="5,2,0,0" Foreground="White" Height="30" x:Name="btnRawStatus" Click="btnRawStatus_Click" Width="100" Template="{StaticResource GlassButton}">Raw Status</Button>
<Button HorizontalAlignment="Left" Margin="5,2,0,0" Foreground="White" Height="30" x:Name="btnLast50" Click="btnLast50_Click" Width="100" Template="{StaticResource GlassButton}">Last 50 Logs</Button>
</StackPanel>
</StackPanel>
</DockPanel>
</Grid>
</Border>