I have the following template defined. The TextBlock PART_TextBlock binds correctly if outside of the StackPanel but when placed inside the StackPanel I get a binding error. The StackPanel datacontext is bound to a converter and is applying the storyboard (flashing tab) as required. I need the tab to flash and also the text to display in the tab header with the flashing in the background of the text.
<dashboard:EditableTabHeaderControl.Template>
<ControlTemplate TargetType="{x:Type dashboard:EditableTabHeaderControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel DataContext="{Binding Path=., Mode=OneWay, Converter={StaticResource DependencyObjectToFilterConverter}}" Grid.Row="1" Background="Transparent" >
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=HasError}" Value="True" >
<DataTrigger.EnterActions>
<BeginStoryboard Name="StartBlinking" >
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
To="Red"
Duration="00:00:00.4"
RepeatBehavior="Forever"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=HasError}" Value="False" >
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="StartBlinking" />
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<TextBlock Text=" " VerticalAlignment="Top">
</TextBlock>
<TextBox x:Name="PART_TabHeader" Text="{Binding Path=Title,
Mode=TwoWay, diag:PresentationTraceSources.TraceLevel=High}" Visibility="Collapsed">
</TextBox>
<TextBlock x:Name="PART_TextBlock" Text="{Binding Path=Title,
Mode=TwoWay, diag:PresentationTraceSources.TraceLevel=High}" >
</TextBlock>
</StackPanel>
<!-- IF THE TEXBOX/TEXTBLOCK ARE PLACED HERE TITLE BINDS CORRECTLY-->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsInEditMode" Value="True">
<Trigger.Setters>
<Setter TargetName="PART_TabHeader" Property="Visibility" Value="Visible"/>
<Setter TargetName="PART_TextBlock" Property="Visibility" Value="Collapsed"/>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</dashboard:EditableTabHeaderControl.Template>
</dashboard:EditableTabHeaderControl>
I finally figured out the Binding expression, the following worked
Text="{Binding DataContext.Title, RelativeSource={RelativeSource AncestorType=dashboard:EditableTabHeaderControl}}"
Related
I have a Popover control whose IsOpen is set to true under 2 conditions (When a string property has value and IsMouse over on the Ui Control is true). The Popover should open after a delay of 0.3 seconds .
Sample
<ContentControl Content="{Binding}"
Background="Transparent"
AutomationProperties.AutomationId="xyz.ssd">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="FontSize" Value="15" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border x:Name="ertt">
<StackPanel x:Name="Grid1" MouseEnter="Image11_OnMouseEnter"
MouseLeave="Image11_OnMouseLeave" MouseDown="Grid1_OnMouseDown">
<Image Height="60" Width="60" Source="{StaticResource SampleImage}"
ToolTip="{Binding DataContext.SomeTextToDisplay , RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=tlui:MainWindow} , Mode=TwoWay}"
DocumentViewerBase.IsMasterPage="True"
x:Name="Image11" >
</Image>
<controls:Popover
PlacementTarget="{Binding ElementName=Image11}"
Placement="Bottom" Height="1" Width="1"
FocusManager.IsFocusScope="False"
controls:DialogWindowCloseBehavior.IsCloseButton="False"
AllowDrop="False"
AutomationProperties.IsOffscreenBehavior="FromClip"
controls:BackgroundBlurBehavior.BackgroundBlur="True"
controls:CultureBehavior.UseHarmonizedCulture="False"
ArrowHeight="1"
StaysOpen="True"
x:Name="SomePopover"
>
<!--<controls:Popover.IsOpen>
<MultiBinding Converter="{StaticResource BooleanToVisibilityConverter}">
<Binding Path="DataContext.SomeTextToDisplay"
RelativeSource="{RelativeSource Mode=FindAncestor,
AncestorType=tlui:MainWindow}" />
<Binding Path="IsPopOverOpen" RelativeSource="{RelativeSource AncestorType=conv:UserControl1}"
/>
</MultiBinding>
</controls:Popover.IsOpen>-->
<controls:Popover.IsHitTestVisible>False</controls:Popover.IsHitTestVisible>
<controls:Popover.IsManipulationEnabled>False</controls:Popover.IsManipulationEnabled>
<controls:Popover.VerticalOffset>-1</controls:Popover.VerticalOffset>
<Border Margin="10,0,0,0" ClipToBounds="True">
<Border.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Width" Value="60" />
<Setter Property="Height" Value="60" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</Border.Resources>
<StackPanel>
<TextBlock x:Name="NotesComment"
TextWrapping="Wrap">
<TextBlock.Text>
<Binding Path="DataContext.SomeTextToDisplay"
RelativeSource="{RelativeSource Mode=FindAncestor,
AncestorType=tlui:MainWindow}" />
</TextBlock.Text>
</TextBlock>
</StackPanel>
</Border>
</controls:Popover>
</StackPanel>
</Border>
<DataTemplate.Resources>
<Storyboard x:Key="OpenPopOver">
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="SomePopover"
Storyboard.TargetProperty="IsOpen"
FillBehavior="Stop">
<DiscreteBooleanKeyFrame KeyTime="0:0:2.3" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<DataTemplate.Triggers>
<Trigger SourceName="ertt" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="bsb" >
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="SomePopover"
Storyboard.TargetProperty="IsOpen"
FillBehavior="HoldEnd">
<DiscreteBooleanKeyFrame KeyTime="0:0:1.3"
Value="{Binding ElementName=Image11 ,Path=ToolTip,
Converter={x:Static converter:StringtoBool.Instance}}"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="bsb"/>
<BeginStoryboard x:Name="bxb" Storyboard="{StaticResource OpenPopOver}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger SourceName="SomePopover" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="bsb"/>
</Trigger.EnterActions>
<!--<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource OpenPopOver}"/>
<RemoveStoryboard BeginStoryboardName="bxb"/>
</Trigger.ExitActions>-->
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ContentControl.Style>
</ContentControl>
Problem is whenever I am hovering on the contentcontrol the popover is getting displayed. It should Only display when Both IsMouseOver on ContentControl is tru AND The image(Image11) has a tooltip that shows the description . The Image is not visible in certain scenarios.In those scenarios the Popover should not Open while hovering on contentcontrol
I'm pretty much new to XAML and I'm trying to mimic following => menu
example menu (menu items I'm talking about google, facebook etc.)
Expected Behaviour:
Hoover on below Button
Should look like:
My code gives me only:
How do I achieve the expected output - make my TextBlock to appear and be part of the button?
My first approach was to use a grid and create two columns and have the second one always hidden and show only on hoover. Then I came up with belows button approach finally I found out about Expander class... Not sure whats the correct approach, below it's what I have so far, obviously far away from expected output.
<Button Name="button1" Width="170" Height="170" Cursor="Hand">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
<TextBlock Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink">
MenuItem1
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=button1}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Margin" Value="20,0,0,0" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
You can use animation to achieve this. Below is the Template for Button which uses animation to give Slide-In and Slide-Out effect on MouseEnter and MouseLeave events
<Button Name="button1" Cursor="Hand">
<Button.Template>
<ControlTemplate>
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
<TextBlock Grid.Column="1" x:Name="myTextBlock" Width="0" Height="48" VerticalAlignment="Center" HorizontalAlignment="Left" Background="pink">
MenuItem1
</TextBlock>
<TextBlock Grid.Column="1" Visibility="Hidden" Width="100" Height="48" x:Name="dummyBlock" />
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="myTextBlock"
Storyboard.TargetProperty="Width"
From="0.0"
To="100"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="myTextBlock"
Storyboard.TargetProperty="Width"
From="100.0"
To="0"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Here is a fair start for implementing your requirements:
1.The Style uses render transform to stretch your button.
2.The button content changes cording to a bound bool
<UserControl ...>
<UserControl.Resources>
<!--*********** Templates ***********-->
<ControlTemplate x:Key="VIEWALLTemplate">
</ControlTemplate>
<ControlTemplate x:Key="DefultTemplate">
<StackPanel Background="White" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
<TextBlock Text="MenuItem1" Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink"/>
</StackPanel>
</ControlTemplate>
<!--*********** Styles ***********-->
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="1"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Button Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Content>
<ContentControl DataContext="{Binding}" Grid.Row="1">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Template" Value="{StaticResource DefultTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=SomeBool}" Value="true">
<Setter Property="Template" Value="{StaticResource VIEWALLTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Button.Content>
</Button>
</Grid>
</UserControl>
I have a ListBox with an ItemTemplate (shown below) that when the mouse is over an item, a button is displayed that will fire a Delete Command.
This works, but what I'd like is for the button to "fade in" after the mouse has been over the listitem for a couple of seconds. How can I achieve this?
<ListBox.ItemTemplate>
<DataTemplate d:DesignSource="{d:DesignInstance quizCompanion:Question}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="16"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Number}"></TextBlock>
<Button
Content="x" Grid.Column="1"
Command=MyDeleteCommand>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Hidden"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsMouseOver}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Try using a DataTrigger with a RelativeSource for the Binding.
Here's a sample ... mouse over anywhere on the StackPanel for 2 seconds or more and the hidden button will fade in. It'll disappear when the mouse is moved off. Hopefully it'll work within your ListBox ItemTemplate:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<StackPanel Height="100" Background="Yellow">
<TextBlock Text="Mouse over the yellow area to see the button"/>
<Button Width="250" Height="50" HorizontalAlignment="Left" Opacity="0">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="Fade">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="0:0:3" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="Fade"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</Grid>
</Page>
I am wondering if it possible to delay a datatrigger to change layout for 0.5 a second. Is any easy way to do it? I need to set the visibility of the object but wait for 0.5 a second. Any adeas are highly appreciated.
<DataTemplate x:Key="ListBoxItemDataTemplate">
<Grid x:Name="DataItem">
<Image x:Name="IconImage" Source="{Binding XPath=#icon}" Height="16" Margin="16,0,0,0" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBlock x:Name="ListboxIemtextBlock" Text="{Binding XPath=#name}" />
<Image x:Name="ArrowImage" Height="10" Source="Resources/Images/arrow_collapsed_grey.png" Visibility="{Binding XPath=#state}"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Setter TargetName="ListboxIemtextBlock" Property="Foreground" Value="White"/>
<Setter TargetName="IconImage" Property="Source" Value="{Binding XPath=#iconSelected}"/>
<Setter TargetName="IconImage" Property="Height" Value="16"/>
<Setter TargetName="ArrowImage" Property="Source" Value="Resources/Images/arrow_collapsed_white.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Setter TargetName="ListboxIemtextBlock" Property="Foreground" Value="#FF6dacbe"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, Path=SelectedItem.Attributes[retract].Value}" Value="True">
<Setter TargetName="ListboxIemtextBlock" Property="Visibility" Value="Hidden" />
<DataTrigger.EnterActions>
<BeginStoryboard Name="StartAnimation" Storyboard="{StaticResource MakeObjectVisibleAfterHalfASecond}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="StartAnimation"/>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers></DataTemplate>
Storyaboard:
<Storyboard x:Key="MakeObjectVisibleAfterHalfASecond" Storyboard.TargetName="ListboxIemtextBlock">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0" BeginTime="0:0:.5">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
It can be done using an animation. The pieces involved are:
1) An ObjectAnimationUsingKeyFrames that sets the Visibility property on the target, with a BeginTime of 0:0:.5 to delay this for a half second when the storyboard begins.
2) A DataTrigger that checks the property whose change will make the object visible (in this case, the IsChecked property on the CheckBox named Start).
3) BeginStoryboard in DataTrigger.EnterActions that launches the animation, and a RemoveStoryboard in DataTrigger.ExitActions that makes the object invisible again if the bound property changes back.
Here's a simple working example:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Storyboard x:Key="MakeObjectVisibleAfterHalfASecond">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:.5">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<DockPanel>
<CheckBox DockPanel.Dock="Top"
Margin="10"
x:Name="Start">Check this to make the label appear</CheckBox>
<Border BorderThickness="2"
BorderBrush="AliceBlue"
CornerRadius="5"
Margin="10"
Padding="10"
DockPanel.Dock="Top">
<Label Visibility="Hidden">
<Label.Content>This should appear a half second after the box is checked.</Label.Content>
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Start, Path=IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="StartAnimation"
Storyboard="{StaticResource MakeObjectVisibleAfterHalfASecond}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="StartAnimation"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Border>
<TextBlock/>
</DockPanel>
</Page>
Note that you could also do this by omitting BeginTime and setting Duration on the animation, since the two are essentially the same thing with a key-frame animation.
I have added a DataTemplate to a ListBox class to bind my collection to:
<ListBox x:Name="lstEmails" Height="259" Margin="12,0,12,41" Width="276"
SelectionChanged="lstEmails_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Visibility="Hidden" Content="{Binding ID}"></Label>
<TextBox Width="200" Text="{Binding EmailAddress}"></TextBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This does exactly what I want it to do. Although when I click on the TextBox, the ListBox does not automatically set the associated ListItem as Selected. I could do this in code, but I would prefer to use this as a component (no surprises there then).
Any ideas on how to achieve this?
That doesn't seem to work, it won't let me click on anything. Have I missed something. Here is my new XAML.
<UserControl.Resources>
<!--<TextBox x:Key="TB" x:Name="TextBoxInsideListBoxItemTemplate">
<TextBox.Style>-->
<Style TargetType="{x:Type TextBox}">
<Setter Property="IsHitTestVisible" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ListBoxItem}, AncestorLevel=1}}"
Value="True">
<Setter Property="IsHitTestVisible" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
<!--</TextBox.Style>
</TextBox>-->
</UserControl.Resources>
<Grid>
<ListBox x:Name="lstEmails" Height="259" Margin="12,0,12,41" Width="276" SelectionChanged="lstEmails_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<Label Visibility="Hidden" Content="{Binding ID}"></Label>-->
<TextBox Width="220" Text="{Binding EmailAddress}" >
</TextBox>
<!--<TextBox Width="220" Text="{Binding EmailAddress}" GotFocus="TextBox_GotFocus"></TextBox>-->
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Width="20" Margin="12,0,0,12" Name="btnAdd" VerticalAlignment="Bottom" Click="btnAdd_Click" Height="23" HorizontalAlignment="Left">+</Button>
<Button Width="20" HorizontalAlignment="Left" Margin="30,0,0,12" Name="btnRemove" VerticalAlignment="Bottom" Click="btnRemove_Click" Height="23">-</Button>
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" Name="btnApply" VerticalAlignment="Bottom" Width="49" Click="btnApply_Click">Apply</Button>
</Grid>
I think the click twice bit is good functionality.
You can trigger on the property IsKeyboardFocusWithin in the ItemContainerStyle and set IsSelected to true.
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(ListBoxItem.IsSelected)">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
You could also use a Setter instead of a single frame animation but then the selection will be lost again once the focus leaves the ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="IsSelected" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
If you have multiple instance of ListBox then you may consider using your custom listbox (by deriving it from ListBox). See the explanation here.
Or, use this hack if you have only 1 (or only small number of) such ListBox and don't want to create a separate class for that:
<TextBox x:Name="TextBoxInsideListBoxItemTemplate" ... >
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="IsHitTestVisible" Value="False" />
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ListBoxItem}, AncestorLevel=1}}"
Value="True">
<Setter Property="IsHitTestVisible" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Note that you'll have to click once again to edit text in the TextBox (which is actually cool according to me).
I had a situation where the selection of a listbox item would change its layout, so the control might have moved away from the cursor before the mouse button is released. I have found no better solution than to use a slight delay in the Storyboard if I want to keep everything in xaml.
More importantly, GotKeyboardFocus seems to work better than IsKeyboardFocusWithin for repeated selections.
<EventTrigger RoutedEvent="GotKeyboardFocus">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsSelected">
<DiscreteBooleanKeyFrame KeyTime="00:00:00.3" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>