2013-05-14 39 views
0

我想製作一個類似於我共享的屏幕。這個想法是從左到右拉項目。我通過WPF工具箱,並沒有找到一個完全符合這一點的小部件。或者,這僅僅是一個由2個簡單的小部件組成的「輔助工具」。Wpf表單從左到右拉元素

有人能告訴我這是什麼類型的小部件,以及如何去做呢?我試圖尋找,但想不出拿出好的搜索字詞爲這個:-((我甚至無法找到此問題的基本好標題)

enter image description here

+2

這是一個只有兩個數據網格/列表視圖。該按鈕從列表1中選取所選項目,並移動(從右邊移開,從左邊移除)到新列表。 – Jras 2013-05-14 02:27:36

+0

@Jras謝謝。很有用。我會這樣做。一旦完成,我會更新。希望我會有一些很好的代碼來分享:-) – rockstar 2013-05-14 02:37:41

+0

@RockStar就UX而言,我個人認爲界面真的很差,幾乎是老技術侷限性的解決方法。你爲什麼不用一個安全/不安全的'ComboBox'或只是一個'CheckBox'來做一個ListBox?我們已經用我們產品的早期版本(VB6 +一些winforms)替換了很多這類的東西,並且使用了CheckBoxes以及類似的東西。 – 2013-05-14 02:49:57

回答

2

有像上面沒有預定義的控制,但應該很簡單使

這是一個基本的輪廓,讓你開始

的XAML:

<Window xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=PresentationFramework" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     x:Class="WPFListBoxGroupTest.MainWindow" 
     Title="MainWindow" Height="438" Width="557" x:Name="UI"> 
    <Grid DataContext="{Binding ElementName=UI}" > 
     <Grid.RowDefinitions> 
      <RowDefinition Height="181*"/> 
      <RowDefinition Height="23*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="240*"/> 
      <ColumnDefinition Width="68*"/> 
      <ColumnDefinition Width="241*"/> 
     </Grid.ColumnDefinitions> 
     <Button Content=">>" Grid.Column="1" Command="{Binding AddDevice}" CommandParameter="{Binding SelectedItem, ElementName=unSecure}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="33" Width="48"/> 
     <DockPanel > 
      <TextBox DockPanel.Dock="Top" Text="Unsecured Devices" /> 
      <DataGrid x:Name="unSecure" ItemsSource="{Binding UnsecuredDevices}" /> 
     </DockPanel> 
     <DockPanel Grid.Column="2"> 
      <TextBox DockPanel.Dock="Top" Text="Secured Devices" /> 
      <DataGrid ItemsSource="{Binding SecuredDevices}" /> 
     </DockPanel> 
    </Grid> 
</Window> 

代碼:

public partial class MainWindow : Window 
{ 
    private ObservableCollection<Device> _unsecuredDevices = new ObservableCollection<Device>(); 
    private ObservableCollection<Device> _securedDevices = new ObservableCollection<Device>(); 

    public MainWindow() 
    { 
     AddDevice = new RelayCommand(o => SecuredDevices.Add(o as Device), o => o != null); 
     InitializeComponent(); 
     UnsecuredDevices.Add(new Device { Name = "Jonathan Mac", MacAddress = "00:1A:8C:B9:CC" }); 
     UnsecuredDevices.Add(new Device { Name = "Jonathan Mobile", MacAddress = "00:1A:8C:B9:CC" }); 
     UnsecuredDevices.Add(new Device { Name = "Samsung S3", MacAddress = "00:1A:8C:B9:CC" }); 
     UnsecuredDevices.Add(new Device { Name = "BlackBerry BB102", MacAddress = "00:1A:8C:B9:CC" }); 
    } 

    public ICommand AddDevice { get; set; } 

    public ObservableCollection<Device> UnsecuredDevices 
    { 
     get { return _unsecuredDevices; } 
     set { _unsecuredDevices = value; } 
    } 

    public ObservableCollection<Device> SecuredDevices 
    { 
     get { return _securedDevices; } 
     set { _securedDevices = value; } 
    } 
} 

public class Device 
{ 
    public string Name { get; set; } 
    public string MacAddress { get; set; } 
} 

結果:

enter image description here

+0

1+不錯的例子。除了Resharper將這些'ObservableCollections'標記爲「轉換爲自動屬性」(只是Alt + Enter + Enter + Enter)= P – 2013-05-14 03:13:41

+0

@HighCore,我不使用reshaper,我發現它是有史以來最煩人的擴展VS,但那只是我:) – 2013-05-14 03:32:47

+0

@ sa_ddam213我從來沒有想過這麼好的例子。太感謝了 。 – rockstar 2013-05-14 03:38:11