允许列表框中的项目选择指示器覆盖Silverlight中的所有项目 [英] Allowing item selection indicator in ListBox to overlay all items in Silverlight

问题描述

我有一个ListBox，其ItemsPanel使用WrapPanel，自定义ItemTemplate和自定义ItemContainerStyle.该ItemContainerStyle的模板包含一个选择框，显示了当选择一个项目.图形设计师希望此选择框像重叠一样，将ListBox中的兄弟项目重叠.

我尝试的第一件事是将ItemContainer的Canvas.ZIndex属性设置为Selected状态.这似乎没有效果.然后，我读到列表项可能包裹在ContentPresenter内，因此我创建了一个附件属性，该属性更改了该项目的父项的ZIndex，但是后来我发现Silverlight故事板不允许您对自定义的附件属性进行动画处理.

有人知道我们可以用来实现我们想要的效果的技术吗?

解决方案

我找到了解决方案.基本上，我创建了一个附加属性，用于在任何Selector(包括ListBox)上设置更改其选择时的事件处理程序.更改后，代码将遍历所有项目容器，并根据容器是否代表所选项目来调整Canvas.ZIndex:

public static readonly DependencyProperty SetZIndexOnSelectionProperty = DependencyProperty.RegisterAttached(
    "SetZIndexOnSelection", typeof(bool), typeof(FrameworkUtils), 
    new PropertyMetadata(zIndexSettingChanged));

public static bool GetSetZIndexOnSelection(DependencyObject obj)
{
    return (bool)obj.GetValue(SetZIndexOnSelectionProperty);
}

public static void SetSetZIndexOnSelection(
    DependencyObject obj, bool value)
{
    obj.SetValue(SetZIndexOnSelectionProperty, value);
}

private static void zIndexSettingChanged(
    DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
    if (obj is Selector)
    {
        var selector = obj as Selector;
        selector.SelectionChanged += (s, e) =>
        {
            if (selector.SelectedItem != null)
            {
                foreach (var pair in selector.GetItemsAndContainers())
                {
                    pair.Value.SetValue(
                        Canvas.ZIndexProperty, 
                        (pair.Key == selector.SelectedItem) ? 1 : 0);
                }
            }
        };
    }
}

I have a ListBox that uses a WrapPanel for its ItemsPanel, a custom ItemTemplate, and a custom ItemContainerStyle. The ItemContainerStyle's template contains a selection box that shows up when an item is selected. The graphics designer would like this selection box to overlap sibling items in the ListBox like it's an overlay.

The first thing I tried was setting the Canvas.ZIndex property of the ItemContainer in the Selected state. That did not seem to have an effect. Then I read that list items might be wrapped inside of a ContentPresenter, so I created an attached property that changes the ZIndex of an item's parent, but then I found out Silverlight storyboards don't let you animate custom attached properties.

Does anyone know of a technique we can use to achieve the effect we desire?

解决方案

I found a solution. Basically, I created an attached property that sets up an event handler on any Selector (including ListBox) for when its selection changes. When it changes, the code iterates through all of the item containers, adjusting the Canvas.ZIndex based on whether the container represents the selected item:

public static readonly DependencyProperty SetZIndexOnSelectionProperty = DependencyProperty.RegisterAttached(
    "SetZIndexOnSelection", typeof(bool), typeof(FrameworkUtils), 
    new PropertyMetadata(zIndexSettingChanged));

public static bool GetSetZIndexOnSelection(DependencyObject obj)
{
    return (bool)obj.GetValue(SetZIndexOnSelectionProperty);
}

public static void SetSetZIndexOnSelection(
    DependencyObject obj, bool value)
{
    obj.SetValue(SetZIndexOnSelectionProperty, value);
}

private static void zIndexSettingChanged(
    DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
    if (obj is Selector)
    {
        var selector = obj as Selector;
        selector.SelectionChanged += (s, e) =>
        {
            if (selector.SelectedItem != null)
            {
                foreach (var pair in selector.GetItemsAndContainers())
                {
                    pair.Value.SetValue(
                        Canvas.ZIndexProperty, 
                        (pair.Key == selector.SelectedItem) ? 1 : 0);
                }
            }
        };
    }
}

这篇关于允许列表框中的项目选择指示器覆盖Silverlight中的所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！