MVVM ListBox的实用小妙招

下面用ListBox控件实现类似于房态图的样式
如下图样式般

要实现这个样式很简单
首先把数据库表的数据在ViewModel里面查询出来
private ObservableCollection _SundaySchedulingMXVo;
public ObservableCollection SundaySchedulingMXVo
{
get
{
if (_SundaySchedulingMXVo == null)
{
_SundaySchedulingMXVo = new ObservableCollection();
_SundaySchedulingMXVo = GetDalAllSundaySchedulingMX();
}
return _SundaySchedulingMXVo;
}
set
{
if (_SundaySchedulingMXVo == null)
{
_SundaySchedulingMXVo = new ObservableCollection();
}
_SundaySchedulingMXVo = value;
RaisePropertyChanged(“SundaySchedulingMXVo”);
}
}
然后绑定ListBox
重写样式然后把查询到的字段绑定上去

<ListBox   Name="doctorBordersezl" ItemsSource="{Binding SundaySchedulingMXVo,UpdateSourceTrigger = PropertyChanged,Mode = TwoWay}" SelectedItem="{Binding SelectSundaySchedulingMXVo,Mode=TwoWay}" HorizontalAlignment="Center" BorderThickness="0" AllowDrop="True">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Drop">
                                        <i:InvokeCommandAction Command="{Binding MonScheDrop}" CommandParameter="{Binding ElementName=doctorBordersezl}" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel Orientation="Horizontal" Width="1050" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#fefbff"/>
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>

                  <WrapPanel Orientation="Horizontal">
                        <Border Background="White" BorderBrush="#f0f0f0" BorderThickness="1" CornerRadius="10"  Margin="5" Width="200" Height="300" Cursor="Hand">
                      <Grid>
                           <Grid.RowDefinitions>
                   <RowDefinition Height="35"></RowDefinition>
                   <RowDefinition Height="1*"></RowDefinition>
                   <RowDefinition Height="1*"></RowDefinition>
                   <RowDefinition Height="1*"></RowDefinition>
                   <RowDefinition Height="1*"></RowDefinition>
                   <RowDefinition Height="1*"></RowDefinition>
                   <RowDefinition Height="1*"></RowDefinition>
               <RowDefinition Height="1*"></RowDefinition>
                    </Grid.RowDefinitions>
          <Grid Grid.Row="0" Background="#c9e3ff">
              <TextBlock FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding DoctorType}">
              <TextBlock Margin="10,0,0,0" Text="{Binding Doctor}"></TextBlock>
</TextBlock>
         </Grid>
       <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
          <TextBlock FontSize="14" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right"  Margin="0,0,0,3">挂号:</TextBlock>
          <TextBlock FontSize="14" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"  Margin="10,0,0,3" Text="{Binding RegistrationFee}"></TextBlock>
   </Grid>
     <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
              <ColumnDefinition Width="1*"></ColumnDefinition>
              <ColumnDefinition Width="3*"></ColumnDefinition>
                  </Grid.ColumnDefinitions>
      <TextBlock  Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Margin="0,0,0,3">类别:</TextBlock>
     <TextBlock  Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Margin="10,0,0,3" Text="{Binding DoctorType}"></TextBlock>
     </Grid>
       <Grid Grid.Row="3">
           <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Margin="0,0,0,3">已挂号:</TextBlock>
     <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Margin="10,0,0,3" Text="{Binding Registered}"></TextBlock>
      </Grid>
          <Grid Grid.Row="4">
                <Grid.ColumnDefinitions>
              <ColumnDefinition Width="1*"></ColumnDefinition>
              <ColumnDefinition Width="3*"></ColumnDefinition>
              </Grid.ColumnDefinitions>
           <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Margin="0,0,0,3">限号:</TextBlock>
           <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Margin="10,0,0,3" Text="{Binding LimitNumber}"></TextBlock>
           </Grid>
      <Grid Grid.Row="5">
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="1*"></ColumnDefinition>
       <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
 <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Margin="0,0,0,3">班次:</TextBlock>
  <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Margin="10,0,0,3" Text="{Binding Flight}"></TextBlock>
     </Grid>
        <Grid Grid.Row="6">
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
             </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Margin="0,0,0,3">科室:</TextBlock>
         <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Margin="10,0,0,3" Text="{Binding DepartmenName}"></TextBlock>
         </Grid>
            <Grid Grid.Row="7">
                  <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                        <ColumnDefinition Width="3*"></ColumnDefinition>
                   </Grid.ColumnDefinitions>
           <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="14" Margin="0,0,0,3">性别:</TextBlock>
           <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Margin="10,0,0,3" Text=""></TextBlock>
                                                    </Grid>
                                                </Grid>
                                            </Border>
                                        </WrapPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                          </ListBox>

反正就是像表格那样查询到数据然后绑定上它的ItemsSource
然后一个个绑定它的字段