wpf customControl binding itemscontrol DataTemplate button

Question

i am new to WPF so i am stuck with some binding on my customcontrol click button.

I have textbox that has watermark and selctedItems properties. Control if selecteditems != null display them in control as this:

link to picture [http://s29.postimg.org/p25qgqzwn/image.jpg][1]

Now i need to wire up X buttons to delete that item from selectedItems source. I am trying to do this in OnApplyTemplate method but i dont know how to get to that button in itemscontrol to attach mouse click event.

my Xaml

<Style TargetType="{x:Type local:TextBoxPicker}">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="WatermarkTemplate" Value="{StaticResource DefaultWatermarkTemplate}"/>
    <Setter Property="SelectedItemsTemplate" Value="{StaticResource DefaultSelectedItemsTemplate}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TextBoxPicker}">
                <Grid>
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                    </Border>
                    <Border BorderBrush="Red" BorderThickness="1">
                        <ContentControl x:Name="PART_WatermarkHost"
                                Content="{TemplateBinding Watermark}"
                                ContentTemplate="{TemplateBinding WatermarkTemplate}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                IsHitTestVisible="False"
                                Margin="{TemplateBinding Padding}"
                                Visibility="Collapsed" />
                    </Border>

                    <Border BorderBrush="Green" BorderThickness="1">
                        <ItemsControl x:Name="PART_SelectedItemsHost"
                                ItemsSource="{TemplateBinding SelectedItems}"
                                ItemTemplate="{TemplateBinding SelectedItemsTemplate}"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"                                                                      
                                Margin="{TemplateBinding Padding}"
                                Visibility="Visible">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel>
                                    </WrapPanel>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>

                    </Border>
                </Grid>
               ....
            </ControlTemplate>
        </Setter.Value>
    </Setter>

and my ItemTemplate is looking like this

xaml:

<DataTemplate x:Key="DefaultSelectedItemsTemplate" >
    <Border x:Name="selectedItemBorder" BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Margin="5,1,1,1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="15"/>
            </Grid.ColumnDefinitions>
            <!--<TextBlock Grid.Column="0" Text="{Binding RelativeSource={RelativeSource Self}, Path=Ime}" Margin="5,0,3,0"></TextBlock>-->
            <TextBlock Grid.Column="0" Text="{Binding}" Margin="5,0,3,0"></TextBlock>
            <Button x:Name="PART_selectedItemButton" BorderThickness="0" Grid.Column="1" >X</Button>
        </Grid>
    </Border>
</DataTemplate>

.cs code

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        ItemsControl selectedItem = GetTemplateChild("PART_SelectedItemsHost") as ItemsControl;

        if (selectedItem != null)
        {
            selectedItem.MouseLeftButtonDown += new MouseButtonEventHandler(selectedItemBorder_MouseLeftButtonDown);

            // blind click on X buttons in ItemsControl
        }

    }

so how can i bind click on that "X" button on items in code-behind ?

Answer 1

Finally i manage to make it work, with help and guidance from Jaun it still didnt work (i tried probably 10 different things and it was in DataContext .. it was never binded.

So on my override OnApplyTemplate i added this.DataContext = this ... so i missed that part.

I used AttachedCommandBehavior (nuget) for command

code:

public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        this.DataContext = this;

        ItemsControl itmControl = GetTemplateChild("PART_SelectedItemsHost") as ItemsControl;

        if (itmControl != null)
        {
            itmControl.MouseLeftButtonDown += new MouseButtonEventHandler(itmControl_MouseLeftButtonDown);

            // blind click on X buttons in ItemsControl
        }

    }

Answer 2

First the viewmodel with the ObservableCollection and the Command that will execute the X:

private ObservableCollection<string> items = new ObservableCollection<string>() { "One", "Two", "Three" };
    public ObservableCollection<String> Items
    {
        get
        {
            return items;
        }
        set
        {
            items = value;
            NotifyPropertyChanged();
        }
    }

    public Command<String> DeleteItem
    {
        get
        {
            return new Command<string>((item) =>
            {
                if (items.Contains(item))
                {
                    items.Remove(item);
                }
                NotifyPropertyChanged("Items");
            });
        }
    }

Now the XAML:

Resources, where it is binded to the 'parent' datacontext, this is a easy way to know where the binding is going:

<Page.Resources>
    <DataTemplate x:Key="DefaultSelectedItemsTemplate" >
        <Border x:Name="selectedItemBorder" BorderBrush="Gray" BorderThickness="1" CornerRadius="5"  Margin="5,1,1,1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="15"/>
                </Grid.ColumnDefinitions>
                <!--<TextBlock Grid.Column="0" Text="{Binding RelativeSource={RelativeSource Self}, Path=Ime}" Margin="5,0,3,0"></TextBlock>-->
                <TextBlock Grid.Column="0" Text="{Binding}" Margin="5,0,3,0"></TextBlock>
                <Button x:Name="PART_selectedItemButton" BorderThickness="0" Grid.Column="1" Command="{Binding DataContext.DeleteItem, ElementName=ItemsControlInstance}" CommandParameter="{Binding}">X</Button>
            </Grid>
        </Border>
    </DataTemplate>
</Page.Resources>

And finally the itemscontrol:

<ItemsControl x:Name="ItemsControlInstance" ItemTemplate="{StaticResource DefaultSelectedItemsTemplate}" ItemsSource="{Binding Items}"/>