创建自定义ItemsControl

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>

有什么想法，为什么这些项目没有显示？

- eran otzap

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>

- Brandon Baker

---

你的意思是我必须在Checkers属性上引发一个属性更改事件吗？ - eran otzap

不，不需要这样做。你只需要将你的Checkers属性分配给你的ItemsSource即可。 - Brandon Baker

好吧，itemsPresenter没有起作用，我也不明白在代码中赋值给itemssource有什么意义...这也没有任何效果。 - eran otzap

好的，我刚在我的电脑上重新创建了这个。我还发现你的椭圆缺少宽度和高度。 - Brandon Baker

非常感谢，你真的付出了很多努力。 我会试一下并让你知道结果。可能是我忘记设置高度和宽度了吗？ 我本来期望它会自动拉伸以适应项目面板的宽度。 - eran otzap

@Brandon 很好的回答。 - Fred Jand