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>

Blog at WordPress.com.