Question

我是WPF的新手，所以我在自定义控件点击按钮上遇到了一些绑定。

我的文本框具有水印和selctedItems属性。控制selectitems！= null如果在控件中显示它们：

链接到图片 [http://s29.postimg.org/p25qgqzwn/image.jpg][1]

现在我需要连接X按钮以从selectedItems源中删除该项目。我试图在OnApplyTemplate方法中执行此操作，但我不知道如何在itemscontrol中找到该按钮以附加鼠标单击事件。

我的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>

我的ItemTemplate看起来像这样

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代码

    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
        }

    }

那么如何绑定点击代码隐藏项目中的“X”按钮？

Answer 1

首先是带有ObservableCollection的viewmodel和将执行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");
            });
        }
    }

现在是XAML：

资源，它被绑定到'父'datacontext，这是一种了解绑定的简单方法：

<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>

最后是itemscontrol：

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

Answer 2

最后，我设法让它工作，在Jaun的帮助和指导下它仍然无法工作（我尝试了10种不同的东西，它在DataContext中......它从未被绑定。

所以在我的覆盖OnApplyTemplate上我添加了this.DataContext = this ...所以我错过了那部分。

我使用了AttachedCommandBehavior（nuget）来执行命令

代码：

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
        }

    }

wpf customControl绑定itemscontrol DataTemplate按钮

2 个答案: