绑定自定义ItemsControl

Question

我试图创建自定义Itemscontrol类以显示一组不同的形状。 为了加快过程，我重用了CodeProject（WPF图设计器-第4部分）中的源代码，其中所有实现均已完成，但形状是从XAML代码添加的。 出于我的目的，我需要从后面的代码中（动态地）添加它们，因此我将自定义Itemscontrol绑定到ObservableCollection列表。 现在，不用像这样显示形状：

我得到这样的东西：

有人可以告诉我我在做什么错吗？ 任何帮助将不胜感激。 提前致谢。

XAML：

<s:Toolbox x:Key="FlowChartStencils" ItemsSource="{Binding ElementName=MyDesigner,    Path=ToolboxDataItems}" ItemTemplate="{StaticResource toolboxItemTemplate}" ItemSize="190,150" SnapsToDevicePixels="True"   ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</s:Toolbox>

<DataTemplate x:Key="toolboxItemTemplate">        
    <Grid Margin="5,5,5,5">            
        <Path Style="{StaticResource Process}">
            <s:DesignerItem.DragThumbTemplate>
                <ControlTemplate>
                    <Path Style="{StaticResource Process_DragThumb}"/>
                </ControlTemplate>
            </s:DesignerItem.DragThumbTemplate>
        </Path>            
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="  {Binding Title}" IsHitTestVisible="False" FontWeight="Bold"/>            
    </Grid>            
 </DataTemplate>

<Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
    <Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
</Style>

 <Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
    <Setter Property="IsHitTestVisible" Value="true"/>
    <Setter Property="Fill" Value="Transparent"/>
    <Setter Property="Stroke" Value="Transparent"/>
</Style>

<Style x:Key="FlowChartItemStyle" TargetType="Path">
    <Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
    <Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
    <Setter Property="StrokeThickness" Value="1"/>
    <Setter Property="StrokeLineJoin" Value="Round"/>
    <Setter Property="Stretch" Value="Fill"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

<Brush x:Key="ItemStroke">#FFD69436</Brush>

<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
    <GradientStop Color="#FAFBE9" Offset="0" />
    <GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

后面的代码：

// Implements ItemsControl for ToolboxItems    
public class Toolbox : ItemsControl
{
    // Defines the ItemHeight and ItemWidth properties of
    // the WrapPanel used for this Toolbox
    public Size ItemSize
    {
        get { return itemSize; }
        set { itemSize = value; }
    }
    private Size itemSize = new Size(50, 50);

    // Creates or identifies the element that is used to display the given item.        
     protected override DependencyObject GetContainerForItemOverride()
    {
         return new ToolboxItem();
    }

    // Determines if the specified item is (or is eligible to be) its own container.        
    protected override bool IsItemItsOwnContainerOverride(object item)
    {
       return (item is ToolboxItem);
    }
}
// Represents a selectable item in the Toolbox/>.
public class ToolboxItem : ContentControl
{
    …
}

public class ToolboxDataItem : DependencyObject
{
    public string Title
    {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }

    public static readonly DependencyProperty TitleProperty =
        DependencyProperty.Register( "Title", typeof( string ),
        typeof(ToolboxDataItem), new UIPropertyMetadata(""));

    public ToolboxDataItem(string title)
    {
        Title = title;
    }
}

public partial class DesignerCanvas : Canvas
{
    private ObservableCollection<ToolboxDataItem> toolboxDataItems = new ObservableCollection<ToolboxDataItem>();
    public ObservableCollection<ToolboxDataItem> ToolboxDataItems
    {
        get { return toolboxDataItems; }
    }

    public DesignerCanvas()
    {
        ToolboxDataItem toolboxDataItem = new ToolboxDataItem("123");
        ToolboxDataItems.Add(toolboxDataItem );
        toolboxDataItem = new ToolboxDataItem("456");
        ToolboxDataItems.Add(toolboxDataItem );
    }              
}   

MyDesigner：

<s:DesignerCanvas Focusable="true" x:Name="MyDesigner"
                  Background="{StaticResource WindowBackgroundBrush}" FocusVisualStyle="{x:Null}"
                  ContextMenu="{StaticResource DesignerCanvasContextMenu}"/>

Answer 1

因此，我首先尝试使一个应用程序与您共享的代码一起使用，但是样式都以不正确的顺序排列，因此在正确设置样式之后，我得到了一个类似于以下示例的示例：

 <Window.Resources>
    <ResourceDictionary>

        <Brush x:Key="ItemStroke">#FFD69436</Brush>

        <LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FAFBE9" Offset="0" />
                <GradientStop Color="Orange" Offset="1" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

        <Style x:Key="FlowChartItemStyle" TargetType="Path">
            <Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
            <Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="StrokeLineJoin" Value="Round"/>
            <Setter Property="Stretch" Value="Fill"/>
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>

        <Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
            <Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/>
        </Style>

        <DataTemplate x:Key="toolboxItemTemplate">
            <Grid Margin="5,5,5,5">
                <Path Style="{StaticResource Process}">
                </Path>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}" IsHitTestVisible="False" FontWeight="Bold"/>
            </Grid>
        </DataTemplate>

        <Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}">
            <Setter Property="IsHitTestVisible" Value="true"/>
            <Setter Property="Fill" Value="Transparent"/>
            <Setter Property="Stroke" Value="Transparent"/>
        </Style>

    </ResourceDictionary>
</Window.Resources>
<Grid>
    <ItemsControl Background="Yellow"
                            ItemsSource="{Binding ToolboxDataItems}" 
                            ItemTemplate="{StaticResource toolboxItemTemplate}"
                            SnapsToDevicePixels="True"  
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    </ItemsControl>
</Grid>

因此，如果您将此示例检查为自己的示例，则问题可能出在以下两个位置之一：

1）TextBlock的Text绑定（注意{之前的空格）：

2）或工具箱的ItemsSource绑定内的路径

<s:Toolbox x:Key="FlowChartStencils" ItemsSource="{Binding ElementName=MyDesigner,    Path=ToolboxDataItems}" ItemTemplate="{StaticResource toolboxItemTemplate}" ItemSize="190,150" SnapsToDevicePixels="True"   ScrollViewer.HorizontalScrollBarVisibility="Disabled">

在这里尝试类似ItemsSource =“ {Binding ToolboxDataItems，ElementName = MyDesigner}”之类的东西