左側和右側列表框添加一個，全部添加，刪除一個，刪除中間的所有按鈕

Question

我有一個左側（lhs）列表框和右側（rhs）列表框I希望能夠選擇lhs列表框中的項目並將其中的一個或全部添加到rhs列表框中。然後，我還想從rhs中刪除一個或全部，並將它們返回給lhs。我怎麼做到這一點？到目前爲止，我只能管理lhs框的索引值，但由於某些原因它不會採用實際的項目名稱。這是這樣的代碼：

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

Answer 1

正如H.B.注意到，這可以通過許多方式來完成。可能是WPF最廣爲人知的架構是MVVM，所以我將嘗試概述一個關於我對該架構的理解的解決方案。

視圖模型會暴露出一些不同的特性：LHSList，LHSSelectedItem，RHSList，RHSSelectedItem（收藏在這裏ObservableCollections）以及幾個命令 - MoveLHSSelectedToRHS，MoveLHSToRHS，MoveRHSSelectedToRHS，MoveRHSToLHS。

這些列表是視圖中ListViews的簡單綁定，並且這些ListView的SelectedItem也相應地綁定。這些命令只是對列表和選定的項目進行操作。例如，MoveLHSSelectedToRHS將與一個動作有點像命令：

公共無效OnMoveLHSSelectedToRHS（）{ 如果 （LHSSelectedItem == NULL） 回報; RHSList.Add（LHSSelectedItem）; LHSList.Remove（LHSSelectedItem）; LHSSelectedItem = null; }

不幸的是，它看起來像你現在使用的代碼。如果你對MVVM不熟悉，我會建議尋找Josh Smith的WPF文章 - 他們是一個很好的開始！

Answer 2

嗨，這不是最終的解決方案，但這會幫助你很多。

Working DEMO。

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); 
} 

工作DEMO