Add A Toggle Button To MetroTabItem Header

[dknippel]

Is there a way to Add A Toggle Button To MetroTabItem Header? I'm guessing I'd have to override a style, but I'm not sure where to start. Any suggestions?

Kind of along the same lines of the original post... is there a way to make the padding between the button and header a bit smaller? The entire control tends to consume quite a bit of real estate.

[punker76]

@dknippel You can set the HeaderTemplate to whatever you need and add a toggle button in there (or other controls too). The following sample sets this for all tab items. You can also do this only for a specific item.

Note: If you click on the toggle button then the item will not be selected.

<mah:MetroTabControl
            mah:HeaderedControlHelper.HeaderMargin="6 0"
            mah:HeaderedControlHelper.HeaderFontFamily="Segoe Script"
            mah:HeaderedControlHelper.HeaderFontSize="18">

    <mah:MetroTabControl.Resources>
        <Style TargetType="{x:Type mah:MetroTabItem}" BasedOn="{StaticResource {x:Type mah:MetroTabItem}}">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <!-- Bind to the Header itself -->
                            <Label Content="{Binding}" />
                            <!-- Bind to a property of your ViewModel -->
                            <mah:ToggleSwitch MinWidth="0" Margin="8 0 0 0">Toggle</mah:ToggleSwitch>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </mah:MetroTabControl.Resources>

    <mah:MetroTabItem Header="Item _1">
        <TextBlock FontSize="30" Text="Content" />
    </mah:MetroTabItem>
    <mah:MetroTabItem Header="Item _2">
        <TextBlock FontSize="30" Text="More content" />
    </mah:MetroTabItem>
    <mah:MetroTabItem Header="Item _3">
        <TextBlock FontSize="30" Text="More more content" />
    </mah:MetroTabItem>
    <mah:MetroTabItem Header="Item _4">
        <TextBlock FontSize="30" Text="So much content!" />
    </mah:MetroTabItem>
    <mah:MetroTabItem Header="Item _5">
        <TextBlock FontSize="30" Text="Content!" />
    </mah:MetroTabItem>
    <mah:MetroTabItem Header="Item _6">
        <TextBlock FontSize="30" Text="This is not content (it is)" />
    </mah:MetroTabItem>
</mah:MetroTabControl>

[dknippel]

Hi Jan,

Sorry to bother you, but I applied your example to a GroupBox control and now the Foreground and VerticalAlignment are off. Any ideas?

Also, is there anyway to shrink the gap between the label and the "SwitchKnob" (sp?)?

Thanks,
Dennis

[timunie]

You should lookup original styles for that conrtol in MahApps source. Most likely it's a DynamicResouce that can be overriden in App.Resources

[dknippel]

Well, I'm almost there. Per @timunie suggestion, I found the StaticResource name ToggleSwitchContentSpaceMargin and overrode that in a local .Resources like so:

<mah:ToggleSwitch.Resources> <GridLength x:Key="ToggleSwitchContentSpaceMargin">3</GridLength> </mah:ToggleSwitch.Resources>

Working on getting the white foreground color back....

[dknippel]

Hmmm, this may not be the cleanest XAML/WPF way to do it, but this is all we had time for:

Which finally resulted in this: