创建自定义项目控件

问题描述

我正试图创建一个自 ItemsControl 派生的自定义控件。 ItemsControl 已使用项目初始化，但未显示。

I'm trying to create a custom control derived from ItemsControl. The ItemsControl is initialized with items, but they are not shown.

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>

为什么不显示项目？

推荐答案

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

You need to set the ItemsSource. So, for example, you could add ItemsSource = Checkers; below the last Checkers Add line. Even though you're trying to set the ItemsSource to Checkers in the style, I think it would be easier if you set in the control class. Just my two cents, though.

以下是PipeControl类的示例：

Here's an example of the PipeControl class:

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和Ellipse中使用ItemsPresenter需要宽度和高度。这是为您提供的更新样式：

You also need an ItemsPresenter in your ControlTemplate and your Ellipse needs a width and height. Here's an updated style for you:

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

这篇关于创建自定义项目控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！