New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabControl with VS style #2346

Closed
joco92 opened this Issue Feb 10, 2016 · 1 comment

Comments

Projects
None yet
3 participants
@joco92

joco92 commented Feb 10, 2016

Hi,

I have Custom user control which extends regular TabControl. Is it possible to apply VS style to it because when I run program Metro style is automatically applied.

Also is it possible to use CloseButton and VS style, I've lost whole day and still not figured it. When I use MetroTabItem metro style is also automatically applied.

Thanks

@chrisklepeis

This comment has been minimized.

Show comment
Hide comment
@chrisklepeis

chrisklepeis Mar 29, 2016

Not sure if it will help, but I'm using Dragablz http://dragablz.net/ with a custom style.
capture

I had a similar issue. I wanted more of a classic tab control, but I didn't want the VS colors, etc.and needed to be able to bind a command to the close button.

In my App.xaml (after MahApps, and <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/Generic.xaml" />)

            <Style x:Key="ClassiczTabItemStyle" TargetType="{x:Type dragablz:DragablzItem}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}" />
                <Setter Property="Margin" Value="0,0,0,0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type dragablz:DragablzItem}">
                            <Border
                                x:Name="templateRoot"
                                Margin="0,1,0,-4"
                                SnapsToDevicePixels="true"
                                BorderThickness="0,0,1,0"
                                BorderBrush="{StaticResource AccentColorBrush3}">
                                <Grid Background="{StaticResource AccentColorBrush4}" x:Name="TabItemzGrid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter
                                        x:Name="contentPresenter"
                                        Margin="{TemplateBinding Control.Padding}"
                                        HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                        Content="{TemplateBinding ContentControl.Content}"
                                        ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                        ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                        SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                    <Thumb
                                        x:Name="PART_Thumb"
                                        Grid.Column="0"
                                        HorizontalAlignment="Stretch"
                                        VerticalContentAlignment="Stretch"
                                        Style="{StaticResource InvisibleThumbStyle}" />
                                    <Button
                                        Grid.Column="1"
                                        Style="{StaticResource CloseItemCommandButtonStyle}"
                                        Command="{x:Static dragablz:TabablzControl.CloseItemCommand}"
                                        CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                        <Button.Visibility>
                                            <MultiBinding Converter="{StaticResource ShowDefaultCloseButtonConverter}">
                                                <Binding Path="ShowDefaultCloseButton" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type dragablz:TabablzControl}}" />
                                                <Binding Path="FixedHeaderCount" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type dragablz:TabablzControl}}" />
                                                <Binding Path="LogicalIndex" RelativeSource="{RelativeSource TemplatedParent}" />
                                            </MultiBinding>
                                        </Button.Visibility>
                                    </Button>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="dragablz:TabablzControl.IsWrappingTabItem" Value="True">
                                    <Setter TargetName="contentPresenter" Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.Header}" />
                                </Trigger>

                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="TabItemzGrid" Property="Background" Value="{StaticResource AccentColorBrush3}" />
                                </Trigger>

                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="TabItemzGrid" Property="Background" Value="{StaticResource AccentColorBrush3}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Then in my UserControl with the TabControl

                    <dragablz:TabablzControl
                        Grid.Row="0"
                        MinHeight="150"
                        Margin="10,0,10,0"
                        Background="#FCFCFC"
                        BorderThickness="0,5,0,0"
                        BorderBrush="{StaticResource AccentColorBrush3}"
                        ItemContainerStyle="{StaticResource ClassiczTabItemStyle}"
                        ItemsSource="{Binding EditTabs}">
                        <dragablz:TabablzControl.HeaderItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock
                                        Padding="8,8,12,8"
                                        FontSize="12"
                                        Text="{Binding Title}" />
                                    <custom:CrossButton
                                        Width="16"
                                        Height="16"
                                        Margin="0,0,5,0"
                                        Visibility="{Binding CanCloseTab, Converter={StaticResource boolToVis}}" />
                                </StackPanel>
                            </DataTemplate>
                        </dragablz:TabablzControl.HeaderItemTemplate>
                    </dragablz:TabablzControl>

Didn't wire up the close button to a command yet.

chrisklepeis commented Mar 29, 2016

Not sure if it will help, but I'm using Dragablz http://dragablz.net/ with a custom style.
capture

I had a similar issue. I wanted more of a classic tab control, but I didn't want the VS colors, etc.and needed to be able to bind a command to the close button.

In my App.xaml (after MahApps, and <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/Generic.xaml" />)

            <Style x:Key="ClassiczTabItemStyle" TargetType="{x:Type dragablz:DragablzItem}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}" />
                <Setter Property="Margin" Value="0,0,0,0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type dragablz:DragablzItem}">
                            <Border
                                x:Name="templateRoot"
                                Margin="0,1,0,-4"
                                SnapsToDevicePixels="true"
                                BorderThickness="0,0,1,0"
                                BorderBrush="{StaticResource AccentColorBrush3}">
                                <Grid Background="{StaticResource AccentColorBrush4}" x:Name="TabItemzGrid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter
                                        x:Name="contentPresenter"
                                        Margin="{TemplateBinding Control.Padding}"
                                        HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                        Content="{TemplateBinding ContentControl.Content}"
                                        ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                        ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                        SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                    <Thumb
                                        x:Name="PART_Thumb"
                                        Grid.Column="0"
                                        HorizontalAlignment="Stretch"
                                        VerticalContentAlignment="Stretch"
                                        Style="{StaticResource InvisibleThumbStyle}" />
                                    <Button
                                        Grid.Column="1"
                                        Style="{StaticResource CloseItemCommandButtonStyle}"
                                        Command="{x:Static dragablz:TabablzControl.CloseItemCommand}"
                                        CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                        <Button.Visibility>
                                            <MultiBinding Converter="{StaticResource ShowDefaultCloseButtonConverter}">
                                                <Binding Path="ShowDefaultCloseButton" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type dragablz:TabablzControl}}" />
                                                <Binding Path="FixedHeaderCount" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type dragablz:TabablzControl}}" />
                                                <Binding Path="LogicalIndex" RelativeSource="{RelativeSource TemplatedParent}" />
                                            </MultiBinding>
                                        </Button.Visibility>
                                    </Button>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="dragablz:TabablzControl.IsWrappingTabItem" Value="True">
                                    <Setter TargetName="contentPresenter" Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.Header}" />
                                </Trigger>

                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="TabItemzGrid" Property="Background" Value="{StaticResource AccentColorBrush3}" />
                                </Trigger>

                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="TabItemzGrid" Property="Background" Value="{StaticResource AccentColorBrush3}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Then in my UserControl with the TabControl

                    <dragablz:TabablzControl
                        Grid.Row="0"
                        MinHeight="150"
                        Margin="10,0,10,0"
                        Background="#FCFCFC"
                        BorderThickness="0,5,0,0"
                        BorderBrush="{StaticResource AccentColorBrush3}"
                        ItemContainerStyle="{StaticResource ClassiczTabItemStyle}"
                        ItemsSource="{Binding EditTabs}">
                        <dragablz:TabablzControl.HeaderItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock
                                        Padding="8,8,12,8"
                                        FontSize="12"
                                        Text="{Binding Title}" />
                                    <custom:CrossButton
                                        Width="16"
                                        Height="16"
                                        Margin="0,0,5,0"
                                        Visibility="{Binding CanCloseTab, Converter={StaticResource boolToVis}}" />
                                </StackPanel>
                            </DataTemplate>
                        </dragablz:TabablzControl.HeaderItemTemplate>
                    </dragablz:TabablzControl>

Didn't wire up the close button to a command yet.

@punker76 punker76 added this to the 1.4.0 milestone Dec 20, 2016

@punker76 punker76 closed this in #2768 Dec 20, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment