Tabs Studio Blog (organizing Visual Studio document tabs)

October 11, 2009

Close tab button redesign

Filed under: Uncategorized — Sergey Vlasov @ 3:07 pm

For a long time the close tab button was implemented as an image. The image had the mouse over glow effect, but no pressed state. The close tab button image also allowed accidental activation on the mouse left button up event without corresponding mouse left button down. I’ve resolved both of these shortcomings finally implementing the close tab button as System.Windows.Controls.Button:

Mouse over the new close tab button

Mouse over the new close tab button


Here is the new default close tab button style:

<Style x:Key="DefaultCloseTabButtonStyle" TargetType="TabsStudio:CloseTabButton">
    <Setter Property="Margin" Value="2,0,-4,0"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabsStudio:CloseTabButton">
                <ControlTemplate.Resources>
                    <Style TargetType="Image">
                        <Setter Property="Stretch" Value="None"/>
                    </Style>
                </ControlTemplate.Resources>
                <Grid>
<Image Name="Normal"    Source="pack://application:,,,/TabsStudio;component/close_tab_button_normal.png"/>
<Image Name="Pressed"   Source="pack://application:,,,/TabsStudio;component/close_tab_button_pressed.png"
 Visibility="Collapsed"/>
<Image Name="MouseOver" Source="pack://application:,,,/TabsStudio;component/close_tab_button_mouse_over.png"
 Visibility="Collapsed"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="MouseOver" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="MouseOver" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsTabSelected" Value="False">
            <Setter Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </Style.Triggers>
</Style>

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

Please log in to WordPress.com to post a comment to your blog.

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Theme: Shocking Blue Green. Blog at WordPress.com.