左侧和右侧列表框，中间有add one、add all、remove one和remove all按钮

Question

我有一个左侧( lhs )列表框和一个右侧( rhs )列表框，我希望能够选择lhs列表框中的项目，并将它们中的一个或全部添加到rhs列表框中。然后我也想从rhs中删除一个或全部，将它们返回到lhs。我该如何做到这一点呢？到目前为止，我只能设法获取右侧lhs box的索引值，但由于某种原因，它不会获取实际的项目名称。下面的代码就是这样做的：

    private void SelectOne_Click(object sender, RoutedEventArgs e)
    {
        listBoxFin.ItemsSource = listBoxStart.SelectedIndex.ToString();          
    }

Answer 1

正如H.B.所指出的，有许多方法可以实现这一点。WPF最受欢迎的体系结构可能是MVVM，因此我将尝试根据我对该体系结构的理解概述一个解决方案。

ViewModel将公开一些不同的属性: LHSList、LHSSelectedItem、RHSList、RHSSelectedItem (集合在这里是ObservableCollections )以及一些命令- MoveLHSSelectedToRHS、MoveLHSToRHS、MoveRHSSelectedToRHS、MoveRHSToLHS。

列表是到视图中的ListViews的简单绑定，这些ListViews的SelectedItem也相应地绑定。这些命令只是对列表和所选项目进行操作。例如，MoveLHSSelectedToRHS将是一个具有类似以下内容的操作的命令：

public void OnMoveLHSSelectedToRHS() { if(LHSSelectedItem==null) return；RHSList.Add(LHSSelectedItem)；LHSList.Remove(LHSSelectedItem)；LHSSelectedItem=null；}

不幸的是，看起来您现在正在使用后台代码。如果你不熟悉MVVM，我建议你看看Josh Smith的WPF文章--它们是一个很好的起点！

Answer 2

嗨，这不是最终的解决方案，但这会对你有很大帮助。

工作。

HTML

<div class="wrapper">
<div class="selectbox alignleft">
    <ul id="selection" class="cf">
        <li>One <span class="desc">Description</span></li>            
        <li>...</li>
        <li>...</li>
    </ul>
</div>
<div class="movebutton alignleft">
    <input class="button mover" value=">>" type="button" />
</div>
<div id="moving" class="movebox alignleft">
    <ul class="cf">
        <li>One <span class="desc">Description</span>

        </li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
</div>
<div class="alignleft">
    <input class="button" id="move-up" type="button" value="Up" />
    <input class="button" id="move-down" type="button" value="Down" />
</div>

​

CSS

.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom: 1;
}
/* general purpose classes */
 .nodisplay {
    display: none;
}
.nodisplay_strict {
    display: none !important;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.button {
    cursor: pointer;
    background: #eee;
    border: 0;
    min-width: 116px;
    padding: 5px 0;
    margin-bottom: 2px;
    display: block;
}
body {
    padding: 25px;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
}
li {
    display: block;
    cursor: pointer;
    padding: 5px;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #fff;
}
li.active {
    background: #000;
    color: #fff;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
}
.selectbox {
    border: 1px solid;
    width: 150px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position: relative;
}
.movebox {
    border: 1px solid;
    width: 200px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position:relative;
    margin-left: 10px;
    margin-right: 10px;
}
span.desc {
    display: block;
    padding-top: 5px;
    color: #7a7a7a;
    font-weight: normal;
    font-style: italic;
}
li.active span.desc {
    color: #ccc;
}
.movebox .delete, .movebox .unmoved {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
    background:url(icon-close.png) no-repeat 0 0 red;
    width: 10px;
    height: 10px;
    text-indent: -99999px;
}
.movebutton {
    margin-left: 10px;
}
.movebutton .mover {
    background: url(icon_right.png) no-repeat 0 0 #eee;
    height: 48px;
    margin: 65px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
.moved {
    background: #d9fffe;
}
#move-up {
    background: url("icon_up.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 0px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
#move-down {
    background: url("icon_down.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 15px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}

JavaScript

// JavaScript Document
$(document).ready(function (e) {
    $('.selectbox li, .movebox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });


    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved').prependTo('.movebox ul').prepend('<span class="delete alignright" onclick="moveToLHS(this);">DELETE</span>');
    });

    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved');
        $('.movebox li.active').removeClass('active');
        setTimeout(function () {
            $('.movebox li').removeClass('moved');
        }, 1500);
    });

    $('.movebox ul li').each(function () {
        $(this).prepend('<span class="unmoved alignright" onclick="deleteFromRHS(this);">DELETE</span>');
    });

    $("#move-up").click(moveUp);
    $("#move-down").click(moveDown);
    $("#reset-list").click(resetList);

});


//DELETE
function moveToLHS(t) {
    $(t).parent().remove().prependTo('.selectbox ul');
    $('.selectbox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });

    //deleting span
    $('.selectbox ul li .delete').each(function () {
        $(this).remove();
    });


}

function deleteFromRHS(d) {
    $(d).parent().remove();
}


// LI Up Down
function moveUp() {
    $("#moving li.active").each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == 1) return false;

        listItem.insertBefore(listItem.prev());
    });
}

function moveDown() {
    var itemsCount = $("#moving li").length;

    $($("#moving li.active").get().reverse()).each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == itemsCount) return false;

        listItem.insertAfter(listItem.next());
    });
}

function resetList() {
    $("#moving").html(originalItems);
}

工作