I have created a TabControl
as follows:
<TabControl TabStripPlacement="Right" Width="31" DockPanel.Dock="Right" Margin="0" Padding="0">
<TabControl.Style>
<Style>
<Style.Triggers>
<Trigger Property="TabControl.IsSelectionActive" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="CloseStoryBoard" />
<BeginStoryboard Name="OpenStoryBoard">
<Storyboard DecelerationRatio="0.8">
<DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Width)" To="350.0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="OpenStoryBoard" />
<BeginStoryboard Name="CloseStoryBoard">
<Storyboard DecelerationRatio="0.8">
<DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Width)" To="31.0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</TabControl.Style>
<TabItem Header="My Control">
<local:MyControl Width="325" Height="325"/>
</TabItem>
</TabControl>
I would like to click the tab and have the content slide out. When you click anywhere other than inside the tab contents, it slides back in.
This works perfectly, with the exception that if you right click within the TabItem
(Specifically, the MyControl
), it loses focus and causes the tab to slide back in, which I do not want to happen.
Thanks
Any help would be appreciated.