locked
How to get a Sketchflow TabControl to "slide out" from the side (like tabcontainers/panels in Blend) RRS feed

  • Question

  • I am new to working with Blend (but have been using Visual Studio for years) and I am trying to create a Sketchflow prototype for a WPF application.

    The effect I am going for is to have a tab on the right side of the screen that slides out a panel when clicked. (Further, I would like to slide it back on MouseLeave of the tabcontainer).  Is there an easy way to do this?  Am I using the wrong control?

    So far I have achieved the look that I want (a default state) with a tabcontrol that has tabs on the left, slid almost out of view on the right side of the window.  I have successfully created an animation to slide the container in, but cannot get it to work on tab click.  Not sure if this is the route to go, anyway.

    I then investigated "states" which seemed to be EXACTLY what I want (transition to opened state on click), but when I right-clicked on the tab and selected "Activate State" to assign the state change, it would not fire when I ran the project.

    Has anyone been successful achieving this effect?

     

    UPDATE:  I have been able to set this up with the state attached to the TabControl and not the TabItem and it works OnTabChange.  I think the problem is that my tab is selected by default when the screen is loaded, so no TabChange fires when it is clicked.  If I could figure out how to start the screen with no tab selected, I think I could get this solved.


    Brice

    Thursday, June 30, 2011 5:06 PM

Answers

  • You're talking about a DockManager. We use the one Infragistics sells because there's not a native one in WPF, but this guy has built one that looks pretty nifty as well.

    If you're hellbent to make your own, I would start with buttons instead of tabs. You might end up with some weird multitriggers to make the logic work, but it shouldn't be too bad.


    Leon Terry
    Blog | TFK Labs | Twitter
    • Proposed as answer by VLTII Thursday, June 30, 2011 6:24 PM
    • Marked as answer by bcave Thursday, June 30, 2011 6:35 PM
    Thursday, June 30, 2011 6:24 PM

All replies

  • You're talking about a DockManager. We use the one Infragistics sells because there's not a native one in WPF, but this guy has built one that looks pretty nifty as well.

    If you're hellbent to make your own, I would start with buttons instead of tabs. You might end up with some weird multitriggers to make the logic work, but it shouldn't be too bad.


    Leon Terry
    Blog | TFK Labs | Twitter
    • Proposed as answer by VLTII Thursday, June 30, 2011 6:24 PM
    • Marked as answer by bcave Thursday, June 30, 2011 6:35 PM
    Thursday, June 30, 2011 6:24 PM
  • Thanks, Leon.  I suppose if I grouped a rectangle and a button I might have better results.  I had thought about tat, but I was sure there had to be an easier way ;)
    Brice
    Thursday, June 30, 2011 6:35 PM
  • Hi Brice.

    I have a tendancy to build from scratch in Sketchflow. Below is a sample of using states to simulate a 'sliding drawer' effect. I don't know if it will be useful to you but it might be something that demonstrates what you're looking for. 

    Good luck!

     

    <UserControl
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls"
     mc:Ignorable="d"
     x:Class="testSlidingDrawerScreens.Screen_1"
     Width="640" Height="480">

     <Grid x:Name="LayoutRoot" Background="White">
      <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="SlidingDrawerStates">
        <VisualStateGroup.Transitions>
         <VisualTransition GeneratedDuration="0:0:0.5">
          <VisualTransition.GeneratedEasingFunction>
           <CircleEase EasingMode="EaseOut"/>
          </VisualTransition.GeneratedEasingFunction>
         </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="SliderOff"/>
        <VisualState x:Name="SliderOn">
         <Storyboard>
          <DoubleAnimation Duration="0" To="351" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="TabControl" d:IsOptimized="True"/>
          <DoubleAnimation Duration="0" To="351" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="TabPanel" d:IsOptimized="True"/>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CloseSlder">
           <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
             <Visibility>Visible</Visibility>
            </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
          </ObjectAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
       </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <Grid x:Name="SlidingDrawer" HorizontalAlignment="Left" Margin="-357,0,0,0" Width="415" Clip="M357.5,0.5 L997.5,0.5 L997.5,479.5 L357.5,479.5 z">
       <Grid x:Name="TabControl" HorizontalAlignment="Right" Margin="0,146,0,193" Width="85" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
         <CompositeTransform/>
        </Grid.RenderTransform>
        <pc:SketchRectangleSL x:Name="OpenSlider" Margin="27,0,26,0" Style="{StaticResource Rectangle-Sketch}" Background="#FFA1A1A1">
         <i:Interaction.Triggers>
          <i:EventTrigger EventName="MouseLeftButtonDown">
           <ei:GoToStateAction StateName="SliderOn"/>
          </i:EventTrigger>
         </i:Interaction.Triggers>
        </pc:SketchRectangleSL>
        <pc:SketchRectangleSL x:Name="CloseSlder" Margin="27,0,26,0" Style="{StaticResource Rectangle-Sketch}" Background="#FFA1A1A1" Visibility="Collapsed">
         <i:Interaction.Triggers>
          <i:EventTrigger EventName="MouseLeftButtonDown">
           <ei:GoToStateAction StateName="SliderOff"/>
          </i:EventTrigger>
         </i:Interaction.Triggers>
        </pc:SketchRectangleSL>
       </Grid>
       <Rectangle x:Name="TabPanel" Fill="#FFA1A1A1" Margin="0,0,55,0" Stroke="Black" Height="480" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
         <CompositeTransform/>
        </Rectangle.RenderTransform>
       </Rectangle>
      </Grid>
     </Grid>
    </UserControl>

    Thursday, June 30, 2011 6:43 PM