locked
Is it possible to have a tabcontrol with NO tabs selected (Sketchflow)? RRS feed

  • Question

  • I would like to have the initial state of a tabcontrol in my prototype to have no tabs selected.  When I uncheck the IsSelected box it always seems to become selected again.  This tabcontrol has one tab.

    Is this possible?

    FYI - I am trying to get this single tab tabcontrol to slide out from the side of the window when the tab is selected.


    Brice
    Thursday, June 30, 2011 5:43 PM

All replies

  • What do you mean by no tabs selected? A TabControl always has a selected tab, in a single tab tabcontrol, the single tab will always be selected.
    Thursday, June 30, 2011 7:40 PM
    Moderator
  • The TabControl have no unselected state - maybe you can create a second tab with a style which looks like a transparent tab!? - So it looks like "no selection"
    Friday, July 1, 2011 9:30 AM
  • Use buttons / toggle buttons. Tabs aren't going to work the way you want for this, and assuming the control isn't using a billion buttons it's pretty easy to build with straight xaml.
    Leon Terry
    Blog | TFK Labs | Twitter
    Friday, July 1, 2011 1:02 PM
  • It's a slow Friday in the office, so I made you a simple prototype to get you started. Hope it helps :)

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:System="clr-namespace:System;assembly=mscorlib"
    	x:Class="TestBed.Window1"
    	x:Name="Window"
    	Title="Window1"
    	Width="640" Height="480">
    	<Window.Resources>
    		<Storyboard x:Key="OnChecked1">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="200"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border2" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border3" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="OnChecked2">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border2" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="200"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border3" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="OnChecked3">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border3" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="205"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border2" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="reset">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border2" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border3" Storyboard.TargetProperty="(FrameworkElement.Width)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="Button.Click" SourceName="Button1">
    			<BeginStoryboard Storyboard="{StaticResource OnChecked1}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="Button.Click" SourceName="Button2">
    			<BeginStoryboard x:Name="OnChecked2_BeginStoryboard" Storyboard="{StaticResource OnChecked2}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="Button.Click" SourceName="Button3">
    			<BeginStoryboard x:Name="OnChecked3_BeginStoryboard" Storyboard="{StaticResource OnChecked3}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="grid">
    			<BeginStoryboard x:Name="reset_BeginStoryboard" Storyboard="{StaticResource reset}"/>
    		</EventTrigger>
    	</Window.Triggers>
    	<Grid Background="White">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="Auto"/>
    			<ColumnDefinition Width="*"/>
    		</Grid.ColumnDefinitions>
    		<Grid x:Name="grid">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto"/>
    				<ColumnDefinition Width="*"/>
    			</Grid.ColumnDefinitions>
    			<StackPanel Background="Black" >
    				<Button x:Name="Button1" Content="Check it out!" Margin="5"/>
    				<Button x:Name="Button2" Content="This totally works!" Margin="5"/>
    				<Button x:Name="Button3" Content="You're welcome" Margin="5"/>
    			</StackPanel>
    			<Border x:Name="border1" Grid.Column="1" Background="Blue" Width="0" HorizontalAlignment="Left">
    				<Label Content="Try mousing off the expander" />
    			</Border>
    			<Border x:Name="border2" Grid.Column="1" Background="Red" Width="0" HorizontalAlignment="Left">
    				<Label Content="Didn't I tell you this would work? :)" />
    			</Border>
    			<Border x:Name="border3" Grid.Column="1" Background="Gray" Width="0" HorizontalAlignment="Left">
    				<Label Content="Still confused? Time to hire a UI guy." />
    			</Border>
    		</Grid>
    	</Grid>
    </Window>
    



    Leon Terry
    Blog | TFK Labs | Twitter
    • Proposed as answer by VLTII Friday, July 1, 2011 1:42 PM
    Friday, July 1, 2011 1:42 PM