CODEWITHSUNDEEP
c#wpfxamlmahapps.metro
erotavlas
erotavlas

Reputation: 4485

How do I add a close button to a tab of the MahApps TabControl?

I was trying to follow this instruction on how to do it, but I'm just starting out with WPF.

How do I do this using a UserControl that i can reuse in different TabControls? Also which one is the "Header" ContentPresenter in the TabControl Style?

Below is the instruction found at https://github.com/MahApps/MahApps.Metro/issues/281

The other way is to modify/create a style - the issue then is hooking it up to an actual 'close' event in a generic fashion.

If you look at the TabControl style, you'll see the "Header" ContentPresenter. If you wrap that in a stackpanel and add a button like so:

<StackPanel Orientation="Horizontal">
  <Label x:Name="root" FontSize="26.67">
      <ContentPresenter ContentSource="Header"  RecognizesAccessKey="True" />
  </Label>
  <Button Content="X" />
</StackPanel>

You get :

enter image description here

If you have that in your Window or UserControl (rather than a resource dictionary), you can wire that up so Click can fire and you can then remove the item from the databound collection or directly from the TabControl.

Upvotes: 2

Views: 4030

Answers (1)

punker76
punker76

Reputation: 14611

The easiest way is to use the MetroTabItem. It comes with the property CloseButtonEnabled to enable/disable the close button. You can also bind a command to the CloseTabCommand and CloseTabCommandParameter.

<TabControl xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
  <Controls:MetroTabItem Header="The Header of the TabItem"
                         CloseButtonEnabled="True"
                         CloseTabCommand="{Binding CloseTabCommand}"
                         CloseTabCommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Header}">

    <!-- your content of the TabItem -->

  </Controls:MetroTabItem>
</TabControl>

Hope this helps.

Upvotes: 8

Related Questions