Wpf表单从左到右拉元素

时间:2013-05-14 02:19:58

标签: c# .net wpf user-interface

我想制作一个类似于我所分享的屏幕。想法是从左到右拉物品。我浏览了WPF工具箱,但没有找到满足此要求的小部件。或者这只是2个简单小部件的组合,其中包含>>担任助手。

有人能告诉我这是什么样的小部件以及如何去做吗?我试过搜索,但无法想出很好的搜索条件:-((我甚至找不到问题的好标题)

enter image description here

1 个答案:

答案 0 :(得分: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