如何在WPF的ListBox中根据数据自定义Item的位置

如题所述

话说，包包想在游戏大厅里实现只操作数据源就能更新绑定控件的需求。OK，你一定会说，用ListBox。没错，ListBox就是干这个用的：

以下是xaml和后台代码：

<UserControl x:Class="TestDeskBindingWpfApplication.PaneDesk"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="clr-namespace:TestDeskBindingWpfApplication"

    Height="160" Width="160">

    <UserControl.Resources>

        <Style TargetType="{x:Type Image}" x:Key="desk" />

        <local:ImageConverter x:Key="imageConverter" />

        <local:HandConverter x:Key="handConverter" />

        <local:LeftConverter x:Key="leftConverter" />

        <local:TopConverter x:Key="topConverter" />

        <DataTemplate DataType="{x:Type local:UserInfo}">

            <TextBlock>

                <Image Canvas.Left="60" Canvas.Top="3" Name="chair" 

                       Source="{Binding Path=ImageIndex, Converter={StaticResource imageConverter},

                       Mode=TwoWay, NotifyOnTargetUpdated=True}" />

                <Image Canvas.Left="86" Canvas.Top="53" Name="hand" Source="Img/hand.gif" 

                       Visibility="{Binding Path=IsPrepareOK, Converter={StaticResource handConverter},

                       Mode=TwoWay, NotifyOnTargetUpdated=True}" />

                <Label Name="lblUser" Width="54"

                       Canvas.Left="{Binding Path=DeskPosition, Converter={StaticResource leftConverter}}" 

                       Canvas.Top="{Binding Path=DeskPosition, Converter={StaticResource topConverter}}"                         

                       Content="{Binding Path=UserName, Mode=TwoWay, NotifyOnTargetUpdated=True}" />

            </TextBlock>

        </DataTemplate>

    </UserControl.Resources>

    <Canvas Background="#FF28699E">

        <ListBox Canvas.Left="0" Canvas.Top="0" Height="160" x:Name="r1" Width="160" />

    </Canvas>

</UserControl>

相应数据源代码：

public ObservableCollection<UserInfo> Users = new ObservableCollection<UserInfo>();

 UserInfo user = null;

user = new UserInfo { UserId = 2, UserName = "kitty", DeskId = 1, DeskPosition = 1, ImageIndex = 4, IsPrepareOK = true };

Users.Add(user);

user = new UserInfo { UserId = 1, UserName = "jax", DeskId = 1, DeskPosition = 2, ImageIndex = 3 };

Users.Add(user);

user = new UserInfo { UserId = 4, UserName = "dx", DeskId = 1, DeskPosition = 3, ImageIndex = 1 };

Users.Add(user);

user = new UserInfo { UserId = 3, UserName = "jeffrey", DeskId = 1, DeskPosition = 4, ImageIndex = 4 };

Users.Add(user);

r1.ItemsSource = Users;

这样做的好处是，以后我只需要Users.Add(newUser)或Users.Remove(oldUser)就可以同时控制桌子上显示的用户了。

但是，我要说，我想在桌子里实现这样的效果：

就是说，对号入座，将ListBox中的每个Item都能自定义它的定位，但遗憾的是，ListBox中的Item要么是横向排列的，要么是纵向的，不支持随意定位。