关于WrapPanel和RadioButton相互配合使用实WrapPanel现动态添加或删除项

   最近在做一个项目的时候，有一个需求就是，通过RadioButton来控制一行内容的显示与不显示，当不显示的时候，下面的项能够占住相应的位置，当增加的时候，又会在原来的位置重新显示，如果使用一般的Grid或者其它的布局的时候，位置就确定下来了，但是使用WrapPanel或者StackPanel这类的控件的时候，能够在增加或者删除项的时候实现重新布局，这在实际使用的时候是非常有用的，现总结如下：

 1 <WrapPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical" HorizontalAlignment="Center">

 2         <StackPanel Orientation="Horizontal" Visibility="{Binding Path=JDBHIsVisibility, Mode=TwoWay,Converter={StaticResource BoolToVisibility    Converter}}">

 3                <Border BorderBrush="Transparent" BorderThickness="2" Height="70">

 4                        <Label Name="lbl00" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                    Width="300">警单编号：</Label>

 5                </Border>

 6             <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >

 7                  <Label Name="lb_id" Content="{Binding Path=JDBH,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"                               Height="66" Width="715">

 8                 </Label>

 9            </Border>

10       </StackPanel>

11 <StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJSJIsVisibility, Mode=TwoWay,Converter={StaticResource                                                   BoolToVisibilityConverter}}">

12            <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >

13                 <Label Name="lbl10" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                      Width="300">报警时间：</Label>

14           </Border>

15          <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >

16              <Label Name="lb_time" Content="{Binding Path=BJSJ,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"                       VerticalAlignment="Center" Height="66" Width="715"></Label>

17          </Border>

18 </StackPanel>

19 <StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJDZIsVisibility, Mode=TwoWay,Converter={StaticResource                                                     BoolToVisibilityConverter}}">

20               <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >

21                     <Label x:Name="lbl20" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                      Margin="0,8" Width="300" Content="报警地址："/>

22               </Border>

23              <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Width="716" >

24                  <Label x:Name="lb_addr" Content="{Binding Path=BJDZ,Mode=TwoWay}" Style="{StaticResource StyleLabel}"                                                                  HorizontalAlignment="Left"  Height="66" Width="715" Margin="0,-2,-2,-2" />

25             </Border>

26 </StackPanel>

27 <StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJXQIsVisibility, Mode=TwoWay,Converter={StaticResource                                                      BoolToVisibilityConverter}}">

28          <Border BorderBrush="Transparent" BorderThickness="2" Height="70">

29               <Label Name="lbl30" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66" Margin="0,8"   Width="300">报警详情：</Label>

30         </Border>

31        <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Width="716" >

32               <Label x:Name="lb_detail" Content="{Binding Path=BJXQ,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"    Height="66" Width="715" />

33       </Border>

34 </StackPanel>

35 <StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJRIsVisibility, Mode=TwoWay,Converter={StaticResource                                                     BoolToVisibilityConverter}}">

36              <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >

37                  <Label Name="lbl40" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                     Width="300">报 警 人：</Label>

38             </Border>

39            <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Margin="0,0,10,0" >

40                 <Label Name="lb_person" Content="{Binding Path=BJR,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"                         Height="66" Width="715">

41 

42                 </Label>

43           </Border>

44 </StackPanel>

45 <StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJDHIsVisibility, Mode=TwoWay,Converter={StaticResource                                                      BoolToVisibilityConverter}}">

46               <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >

47                    <Label Name="lbl50" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                      Width="300" Margin="0,-2">报警电话：</Label>

48             </Border>

49             <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Width="719" >

50                   <Label Name="lb_phone" Content="{Binding Path=BJDH,Mode=TwoWay}" Style="{StaticResource StyleLabel}"                                                             HorizontalAlignment="Left"   Height="66" Width="719" Margin="-2,-2,-2,1"/>

51            </Border>

52        </StackPanel>

53 </WrapPanel>              

 

这里在WrapPanel中嵌套多个StackPanel，注意Visibility="{Binding Path=BJDHIsVisibility, Mode=TwoWay,Converter={StaticResource                                                      BoolToVisibilityConverter}}"> 实现的核心是，这里我们定义了一个依赖项属性BJDHIsVisibility，并且和RadioButton的IsChecked属性绑定到一起，当RadioButton选中的时候，IsChecked属性为True，我们不能直接将两个属性绑定到一起，必须去定义一个转换器，将BOOL类型的值转化为Visibility所支持的形，这里需要注意，当RadioButton的IsChecked属性为False的时候，Visibility的属性为Visibility.Hidden,此时WrapPanel会实现重新排列，这是我们需要注意的地方，以后需要的时候可以参考此值！