列表框项目被放置在彼此的顶部答案

【问题标题】：Listbox items are placed ontop of each other列表框项目被放置在彼此的顶部
【发布时间】：2012-08-09 05:33:42
【问题描述】：

我似乎无法弄清楚为什么列表框项目彼此重叠...它们应该彼此下方。这是一些标记和代码。

<ListBox x:Name="DeviceList" Background="#ff4c4c4c" BorderThickness="0" ScrollViewer.CanContentScroll="False" MouseEnter="DeviceList_MouseEnter" MouseLeave="DeviceList_MouseLeave" 
                     ManipulationBoundaryFeedback="DeviceList_ManipulationBoundaryFeedback" ItemContainerStyle="{DynamicResource ResourceKey=ListBoxItemStyle}" PreviewMouseDown="DeviceList_PreviewMouseDown" 
                     PreviewMouseMove="DeviceList_PreviewMouseMove" PreviewMouseUp="DeviceList_PreviewMouseUp" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Bottom">
                <ListBox.Resources>
                    <ResourceDictionary>
                        <ResourceDictionary.MergedDictionaries>
                            <ResourceDictionary Source="..\Utilities\Resources\Themes\Slider.xaml"></ResourceDictionary>
                        </ResourceDictionary.MergedDictionaries>
                    </ResourceDictionary>
                </ListBox.Resources>
            </ListBox>

#region Constructors
    /// <summary>
    /// Constructor.
    /// </summary>
    public ConfiguratorView()
    {
        InitializeComponent();

        foreach (Device device in (Application.Current.Windows[1].DataContext as ConfiguratorViewModel).AvailableDevices)
        {
            devices.Add(AddDevice(device.Icon + "_def", device.Description));
        }

        DeviceList.ItemsSource = devices;
    }
    #endregion


    #region Internal Members
    /// <summary>
    /// Add the device to the list of devices.
    /// </summary>
    /// <param name="icon"></param>
    /// <param name="description"></param>
    /// <returns></returns>
    private Canvas AddDevice(string icon, string description)
    {
        Canvas canvas = new Canvas();
        canvas.Name = icon;

        ContentControl backgroundContent = new ContentControl();
        Label label = new Label();

        backgroundContent.Template = Application.Current.FindResource(icon) as ControlTemplate;
        label.Content = description;

        canvas.Children.Add(backgroundContent);
        canvas.Children.Add(label);

        return canvas;
    }

设备列表将画布添加为项目...然后我将 ItemsSource 设置为列表。加载它会在最后一个图标的顶部显示所有图标。有什么想法吗？

【问题讨论】：

很难从您展示的 sn-ps 中准确判断您在做什么，但 Canvases 是用绝对定位呈现的，这可能是问题的根源。 .

标签： c# wpf

【解决方案1】：

因为 Canvas.Top 默认为 NaN，所以所有内容都将出现在彼此之上。

您可以手动计算适当的 Canvas.Top 值，但我建议：

使用描述和图标属性保持设备对象简单
为 ListBox 项创建 DataTemplate 以显示这些属性。

编辑：

例如（我没有测试过）

假设您的设备类看起来像这样：

public class Device
{
    public string Description { get; set; }
    public object Icon { get; set; } 
}

然后您的 ListBox 数据模板可能如下所示：

<ListBox ItemsSource="{Binding Devices}">
    <ListBox.ItemsTemplate>
        <DataTemplate>
            <Canvas>
                <!-- add items here -->
                <TextBlock Text="{Binding Description}" Canvas.Top="5" />
            <Canvas>
        </DataTemplate>
    </ListBox.ItemsTemplate>
</ListBox>

【讨论】：