将 ItemsControl ItemSource 绑定到 UserControl 依赖项属性

Question

这是我第一次尝试创建具有依赖属性的用户控件。所以请原谅我对这个问题缺乏了解。我在我的其中一个页面上创建了一个通用设计，我想将该设计带到可重用的用户控件中。

页面上的原始控件

这就是我要移植到可重用用户控件中的控件

<ToggleButton x:Name="filterButton" Background="{StaticResource BackgroundLightBrush}" BorderThickness="0">
    <fa:ImageAwesome x:Name="border"
                     Height="15"
                     Foreground="{StaticResource MediumBlueBrush}"
                     Icon="Filter"/>
</ToggleButton>

<Popup x:Name="popup" 
       AllowsTransparency="True"
       StaysOpen="False"
       PlacementTarget="{Binding ElementName=filterButton}"
       IsOpen="{Binding ElementName=filterButton,Path=IsChecked,Mode=TwoWay}">
    <Border BorderThickness="2" BorderBrush="{StaticResource MediumBlueBrush}" Background="{StaticResource BackgroundLightBrush}" CornerRadius="5">
        <ItemsControl ItemsSource="{Binding HeaderList}"
                      Background="{StaticResource BackgroundLightBrush}"
                      Margin="1">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <CheckBox IsChecked="{Binding IsChecked}"/>
                        <TextBlock Text="{Binding HeaderName}"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
</Popup>

这是该控件的图片

这是我的依赖属性代码

在这里您可以看到我创建了一个类型为 RulesColumnHeader 的 ObservableCollection。这是我试图将我的 UserControl 设置为的项目源。

public partial class FilterDropDown : UserControl
{
    public ObservableCollection<RulesColumnHeader> ItemSource
    {
        get => (ObservableCollection<RulesColumnHeader>)GetValue(ItemSourceProperty);
        set => SetValue(ItemSourceProperty, value);
    }
    // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ItemSourceProperty =
        DependencyProperty.Register("ItemSource", typeof(ObservableCollection<RulesColumnHeader>), typeof(FilterDropDown), new FrameworkPropertyMetadata(null));

    public FilterDropDown()
    {
        InitializeComponent();
    }
}

用户控件

这是我 "attempt" 创建用户控件并将项目源绑定到我创建的依赖项属性。

<UserControl x:Class="YAI.BomConfigurator.Desktop.Control.FilterDropDown"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:YAI.BomConfigurator.Desktop.Control"
         xmlns:fa="http://schemas.fontawesome.io/icons/"
         mc:Ignorable="d" 
         d:DesignHeight="50" d:DesignWidth="50">
<Grid>
    <ToggleButton x:Name="filterButton" Background="Transparent" BorderThickness="0">
        <fa:ImageAwesome x:Name="border"
                         Height="15"
                         Foreground="{StaticResource MediumBlueBrush}"
                         Icon="Filter"/>
    </ToggleButton>

    <Popup x:Name="popup" 
           AllowsTransparency="True"
           StaysOpen="False"
           PlacementTarget="{Binding ElementName=filterButton}"
           IsOpen="{Binding ElementName=filterButton,Path=IsChecked,Mode=TwoWay}">

        <Border BorderThickness="2" BorderBrush="{StaticResource MediumBlueBrush}" Background="{StaticResource BackgroundLightBrush}" CornerRadius="5">
            <ItemsControl ItemsSource="{Binding ItemSource, Source={local:FilterDropDown}}"
                          Background="{StaticResource BackgroundLightBrush}"
                          Margin="1">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="5">
                            <CheckBox IsChecked="{Binding IsChecked}"/>
                            <TextBlock Text="{Binding HeaderName}"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>
    </Popup>
</Grid>

在我的 ItemsControl 上的 ItemSource 绑定中，source= 部分抛出错误 "Invalid Markup Extension, expected type is 'object' actual is FilterDropDown"。

这就是我现在的基本情况。我不确定如何前进或从这里开始做什么。我试图弄清楚如何将 UserControl 项目源绑定到依赖项属性。我不知道这是我的语法错误还是我做错了整件事。如果有人能帮助指导我，那就太好了。

谢谢，

Answer 1

当您构建自定义控件时，您希望将 ItemsSource 定义为：

public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(nameof(ItemsSource), typeof(IEnumerable),
    typeof(xxx), new FrameworkPropertyMetadata(null, new PropertyChangedCallback(OnItemsSourceChanged)));

    public IEnumerable ItemsSource
    {
        get
        {
            return (IEnumerable)GetValue(ItemsSourceProperty);
        }

        set
        {
            SetValue(ItemsSourceProperty, value);
        }
    }

OnItemsSourceChanged 不是必需的，我只是在我 c&p 的代码中有了它。

您还希望您的控件派生自 Control。不是用户控件。因此，.cs 和 .xaml 的嵌套方式不同。它们是完全独立的。 .cs 是独立的，xaml 在您的主题文件夹中。

public class xxx : Control

并有一个静态构造函数：

static xxx()
{
    DefaultStyleKeyProperty.OverrideMetadata(typeof(xxx), new FrameworkPropertyMetadata(typeof(xxx)));
}

然后在您的 XAML 中定义一个以 xxx 为目标的样式，并在该样式中设置 ControlTemplate。

在那里，通常，您将使用 TemplateBinding 绑定来绑定到属性。

Answer 2

设置 ItemsSource 绑定的 Source 属性是错误的。

替换

ItemsSource="{Binding ItemSource, Source={local:FilterDropDown}}"

和

ItemsSource="{Binding ItemSource,
                      RelativeSource={RelativeSource AncestorType=UserControl}}"

除此之外，将 ItemsSource 声明为 ObservableCollection 是不必要的，甚至是错误的。使用更通用的类型，例如 IEnumerable:

public IEnumerable ItemSource
{
    get => (IEnumerable)GetValue(ItemSourceProperty);
    set => SetValue(ItemSourceProperty, value);
}

public static readonly DependencyProperty ItemSourceProperty =
    DependencyProperty.Register(
        nameof(ItemSource), typeof(IEnumerable), typeof(FilterDropDown));

将 ItemsControl ItemSource 绑定到 UserControl 依赖项属性

Bind ItemsControl ItemSource to UserControl Dependency Property

wpf

binding

user-controls

templates

dependency-properties

将 ItemsControl ItemSource 绑定到 UserControl 依赖项 属性

Bind ItemsControl ItemSource to UserControl Dependency Property

wpf

binding

user-controls

templates

dependency-properties

将 ItemsControl ItemSource 绑定到 UserControl 依赖项属性