Set Command/Action on a Button within a DataTemplate

Question

I have created a new style for a TabControl. On the TabItem I have a close button. Now, I want the user to be able to click on that close button to close the active tab.

<Style x:Key="StudioTabControl" TargetType="{x:Type TabControl}"> <Style.Resources> <Style TargetType="{x:Type TabItem}"> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid Height="20" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="35"/> </Grid.ColumnDefinitions> <ContentPresenter Grid.Column="0" Margin="10,0,10,0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" /> <Button Grid.Column="1" Width="15" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" Command= // CLOSE COMMAND OPERATION HERE. DockPanel.Dock="Right"> ...

I know I can do something like

<i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <Actions:CloseTabItemAction TabItem="{Binding RelativeSource={RelativeSource AncestorType=TabItem}}" TabControl="{Binding RelativeSource={RelativeSource AncestorType=TabControl}}"/> </i:EventTrigger> </i:Interaction.Triggers>

Where the close TabItem Action is set in the template fine and via appropriate code. But what if I wanted to include a second button on the tab that could hold a custom image set from away from the template. How could I do this and how would I handle the click of this button outside of the template? An example of a TabItem that can do this is VS2012...

TabItemVS2012

Thanks for your time.

trinaldi · Accepted Answer · 2013-10-02 11:48:34Z

Killercam!

I've been through the same with a MenuItem on a DataTemplate.

What I did was add a Setter Property=Command inside my Style for the type Button. Here's my code:

<DataTemplate x:Key="Whatever"> <Style TargetType="MenuItem"> <Setter Property="Command" Value="{Binding Comando}" /> <Setter Property="CommandParameter" Value="{Binding Texto}"/> </Style> </HierarchicalDataTemplate.ItemContainerStyle> <StackPanel Orientation="Horizontal"> <!--<Image Source="{Binding Imagem}" />--> <AccessText Text="{Binding Texto}" /> </StackPanel> </DataTemplate>

Remembering that {Binding Comando} is an ICommnd property of my ViewModel like this:

private ICommand _Comando; public ICommand Comando { get { return _Comando; } set { _Comando = value; OnPropertyChanged("Comando"); } }

At my View I could set any Comando (ICommand) I wanted like this:

ViewModel.MenuSubItem.Add(new MenuViewModel { Texto = "xxxxx", Comando = WhateverCommand });

Hope I was helpful!

Collectives™ on Stack Overflow

Set Command/Action on a Button within a DataTemplate

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related