Community
Select to view content in your preferred language

Drop down tab

488
1
12-01-2010 05:25 AM
JayKappy
by
Frequent Contributor
‎12-01-2010 05:25 AM
I have a tab in my project that would to open via a click.  I am now trying to get this to drop down (open) with a MouseEnter.  I can get this to work, sort of.....
With the code below I can get the tab to open as normal but if I move the mouse off the original tab it closes.  I want the user to be able to move the mouse off the tab and utilize the new size of the tab as it expands....I need this because I have specific buttons in the tab after it expands...
That make any sense?

I am looking for a way to open the tab (that is working) and have the user be able to move ANYWHERE in the newly opened tab to be abel to select things in the tab....
Then once they leave the newly defined tab it will close...

Right now it works like that BUT only for the original tab size...not the expanded tab

Thanks....any help would be appreciated.....

MainPage.xaml
..snip
            <Storyboard x:Name="ShowOverview" >
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="OverviewGrid" Storyboard.TargetProperty="Height" To="110" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="OverviewScaleTransform" Storyboard.TargetProperty="ScaleX" To="1" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="OverviewScaleTransform" Storyboard.TargetProperty="ScaleY" To="1" />
            </Storyboard>
            <Storyboard x:Name="HideHeaderTitle" >
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="HeaderTitleScaleTransform" Storyboard.TargetProperty="ScaleX" To="0" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0" Storyboard.TargetName="HeaderTitleScaleTransform" Storyboard.TargetProperty="ScaleY" To="0" />
                <DoubleAnimation Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetName="HeaderTitleGrid" Storyboard.TargetProperty="Height" To="0" />
            </Storyboard>
..snip

..snip
                <!-- TitleHeader Tab -->
                <Grid Grid.Column="0" >
                    <Border x:Name="HeaderTitleBorder" Background="{StaticResource PanelGradient}" VerticalAlignment="Top" BorderBrush="#66FFFFFF" BorderThickness="1" CornerRadius="0,0,5,5" Height="Auto" >
                        <StackPanel Orientation="Vertical" VerticalAlignment="Top" >
                            <Grid x:Name="HeaderTitleHeaderGrid" Cursor="Hand" MouseEnter="HeaderTitleHeaderGrid_MouseEnter" >
                                <Rectangle Fill="#00FFFFFF"  />
                                <TextBlock HorizontalAlignment="Left" Margin="5,3,5,3" Foreground="White" Text="{Binding Text, Mode=OneWay, ElementName=MapAppTitle}" VerticalAlignment="Top" FontSize="11" FontWeight="Bold" >
                                <TextBlock.Effect>
                                    <BlurEffect />
                                </TextBlock.Effect>
                                </TextBlock>
                                <TextBlock x:Name="MapAppTitle" HorizontalAlignment="Left" Margin="5,3,5,3" Foreground="Black" Text="Maple Grove Mapping Application" VerticalAlignment="Top" FontSize="11" FontWeight="Bold" />
                            </Grid>
                            <Grid x:Name="HeaderTitleGrid" Height="0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"  >
                                <Grid.RenderTransform>
                                    <ScaleTransform x:Name="HeaderTitleScaleTransform" ScaleX="0" ScaleY="0" />
                                </Grid.RenderTransform>
                                <Border Background="{StaticResource WhiteGradient}" Padding="5" >
                                    <StackPanel Orientation="Vertical" Effect="{StaticResource miniDropShadow}" >
                                        <TextBlock Style="{StaticResource Title}" TextWrapping="NoWrap" 
                               Text="{StaticResource ApplicationTitle}" Width="Auto" Height="Auto" 
                               Margin="5,0,0,0" />
                                        <TextBlock Style="{StaticResource Subtitle}" TextWrapping="NoWrap" 
                               Text="{StaticResource ApplicationSubtitle}" Width="Auto" Height="Auto" 
                               Margin="5,1,0,0" />
                                        <TextBlock Foreground="Black" FontSize="11" Width="Auto" TextWrapping="NoWrap" 
                               Text="{StaticResource ApplicationInfo}" Height="Auto" 
                               HorizontalAlignment="Left" Margin="5,5,0,0" />
                                    </StackPanel>
                                </Border>
                            </Grid>

                        </StackPanel>
                    </Border>
                </Grid>
..snip


MainPage.xaml.vb..snip
    ' AUTOMATICALLY DROP DOWN THE TAB CONTENTS
    Private Sub HeaderTitleHeaderGrid_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
        If HeaderTitleGrid.ActualHeight > 0 Then
            HideHeaderTitle.Begin()
        Else
            ShowHeaderTitle.Begin()
        End If
    End Sub
    '    Private Sub HeaderTitleHeaderGrid_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
    '        If HeaderTitleGrid.ActualHeight > 0 Then
    '            HideHeaderTitle.Begin()
    '        Else
    '            ShowHeaderTitle.Begin()
    '        End If
    '    End Sub
..snip
0 Kudos
1 Reply
JayKappy
by
Frequent Contributor
‎12-01-2010 09:34 AM
Got it....I had to move the calls MouseEnter and MouseLeave around in the Grids...see below

                <!-- TitleHeader Tab -->
                <Grid Grid.Column="0" >
                    <Border x:Name="HeaderTitleBorder" Background="{StaticResource PanelGradient}" VerticalAlignment="Top" BorderBrush="#66FFFFFF" BorderThickness="1" CornerRadius="0,0,5,5" Height="Auto" >
                        <StackPanel Orientation="Vertical" VerticalAlignment="Top" >
                            <Grid x:Name="HeaderTitleHeaderGrid" Cursor="Hand"  MouseEnter="HeaderTitleHeaderGrid_MouseEnter" >
                                <Rectangle Fill="#00FFFFFF"  />
                                <TextBlock HorizontalAlignment="Left" Margin="5,3,5,3" Foreground="White" Text="{Binding Text, Mode=OneWay, ElementName=MapAppTitle}" VerticalAlignment="Top" FontSize="11" FontWeight="Bold" >
                                <TextBlock.Effect>
                                    <BlurEffect />
                                </TextBlock.Effect>
                                </TextBlock>
                                <TextBlock x:Name="MapAppTitle" HorizontalAlignment="Left" Margin="5,3,5,3" Foreground="Black" Text="Maple Grove Mapping Application" VerticalAlignment="Top" FontSize="11" FontWeight="Bold" />
                            </Grid>
                            <Grid x:Name="HeaderTitleGrid" Height="0" MouseLeftButtonUp="HeaderTitleHeaderGrid_MouseLeftButtonUp" MouseLeave="HeaderTitleHeaderGrid_MouseLeave" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"  >
                                <Grid.RenderTransform>
                                    <ScaleTransform x:Name="HeaderTitleScaleTransform" ScaleX="0" ScaleY="0" />
                                </Grid.RenderTransform>
                                <Border Background="{StaticResource WhiteGradient}" Padding="5" >
                                    <StackPanel Orientation="Vertical" Effect="{StaticResource miniDropShadow}" >
                                        <TextBlock Style="{StaticResource Title}" TextWrapping="NoWrap" 
                               Text="{StaticResource ApplicationTitle}" Width="Auto" Height="Auto" 
                               Margin="5,0,0,0" />
                                        <TextBlock Style="{StaticResource Subtitle}" TextWrapping="NoWrap" 
                               Text="{StaticResource ApplicationSubtitle}" Width="Auto" Height="Auto" 
                               Margin="5,1,0,0" />
                                        <TextBlock Foreground="Black" FontSize="11" Width="Auto" TextWrapping="NoWrap" 
                               Text="{StaticResource ApplicationInfo}" Height="Auto" 
                               HorizontalAlignment="Left" Margin="5,5,0,0" />
                                    </StackPanel>
                                </Border>
                            </Grid>
0 Kudos