CODEWITHSUNDEEP
c#wpfdatatemplate
MoonKnight
MoonKnight

Reputation: 23833

Set Command/Action on a Button within a DataTemplate

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.

Upvotes: 2

Views: 235

Answers (1)

trinaldi
trinaldi

Reputation: 2950

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!

Upvotes: 1

Related Questions