创建自定义项目控件

Question

我正在尝试创建一个从ItemsControl 派生的自定义控件。 ItemsControl 用项目初始化，但没有显示出来。

itemsControl：

public class PipeControl : ItemsControl 
{
    static PipeControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(PipeControl), new FrameworkPropertyMetadata(typeof(PipeControl)));                    
    }

    public PipeControl()
    {
        Checkers = new ObservableCollection<Checker>();
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());           
    }

    public ObservableCollection<Checker> Checkers 
    {
        get;
        set;               
    }        
}    

主题资源字典：Generic.xaml

<Style TargetType="{x:Type local:PipeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:PipeControl}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">                                        
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate DataType="{x:Type local:Checker}">
                <Ellipse Fill="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />                    
            </DataTemplate>                
        </Setter.Value>            
    </Setter>

    <Setter Property="ItemsSource" Value="{Binding Checkers,RelativeSource={RelativeSource Self}}"/>                           

    <!-- Just a Precaution its the default panel any ways -->  
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </Setter.Value>            
    </Setter>

</Style>

任何想法为什么不显示这些项目？

Answer 1

您需要设置 ItemsSource。因此，例如，您可以在最后一个 Checkers Add 行下方添加 ItemsSource = Checkers;。即使您尝试将 ItemsSource 设置为 Checkers 样式，我认为如果您在控件类中设置会更容易。不过，只是我的两分钱。

这是 PipeControl 类的示例：

public class PipeControl : ItemsControl
{
    public ObservableCollection<Checker> Checkers { get; set; }
    static PipeControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(PipeControl), new FrameworkPropertyMetadata(typeof(PipeControl)));
    }
    public PipeControl()
    {
        Checkers = new ObservableCollection<Checker>();
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        Checkers.Add(new Checker());
        ItemsSource = Checkers;
    }
}

您的 ControlTemplate 中还需要一个 ItemsPresenter，而您的 Ellipse 需要一个宽度和高度。这是为您提供的更新样式：

<Style TargetType="{x:Type local:PipeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:PipeControl}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ItemsPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate DataType="{x:Type local:Checker}">
                <Ellipse Width="25"
                         Height="25"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Fill="Red" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>