WPF实现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会实现重新排列,这是我们需要注意的地方,以后需要的时候可以参考此值!