關於WrapPanel和RadioButton相互配合使用實WrapPanel現動態添加或刪除項

標籤：

   最近在做一個項目的時候，有一個需求就是，通過RadioButton來控制一行內容的顯示與不顯示，當不顯示的時候，下面的項能夠佔住相應的位置，當增加的時候，又會在原來的位置重新顯示，如果使用一般的Grid或者其它的布局的時候，位置就確定下來了，但是使用WrapPanel或者StackPanel這類的控制項的時候，能夠在增加或者刪除項的時候實現重新布局，這在實際使用的時候是非常有用的，現總結如下：

<WrapPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical" HorizontalAlignment="Center">
        <StackPanel Orientation="Horizontal" Visibility="{Binding Path=JDBHIsVisibility, Mode=TwoWay,Converter={StaticResource BoolToVisibility

                Converter}}">
               <Border BorderBrush="Transparent" BorderThickness="2" Height="70">
                       <Label Name="lbl00" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                    Width="300">警單編號：</Label>
               </Border>
            <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >
                 <Label Name="lb_id" Content="{Binding Path=JDBH,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"                               Height="66" Width="715">

                </Label>

           </Border>

      </StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJSJIsVisibility, Mode=TwoWay,Converter={StaticResource                                                   BoolToVisibilityConverter}}">
           <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >
                <Label Name="lbl10" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                      Width="300">警示時間：</Label>
          </Border>
         <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >
             <Label Name="lb_time" Content="{Binding Path=BJSJ,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"                       VerticalAlignment="Center" Height="66" Width="715"></Label>
         </Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJDZIsVisibility, Mode=TwoWay,Converter={StaticResource                                                     BoolToVisibilityConverter}}">
              <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >
                    <Label x:Name="lbl20" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                      Margin="0,8" Width="300" Content="警示地址："/>
              </Border>
             <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Width="716" >
                 <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" />
            </Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJXQIsVisibility, Mode=TwoWay,Converter={StaticResource                                                      BoolToVisibilityConverter}}">
         <Border BorderBrush="Transparent" BorderThickness="2" Height="70">
              <Label Name="lbl30" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66" Margin="0,8"   Width="300">警示詳情：</Label>
        </Border>
       <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Width="716" >
              <Label x:Name="lb_detail" Content="{Binding Path=BJXQ,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"    Height="66" Width="715" />
      </Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJRIsVisibility, Mode=TwoWay,Converter={StaticResource                                                     BoolToVisibilityConverter}}">
             <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >
                 <Label Name="lbl40" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                     Width="300">報 警 人：</Label>
            </Border>
           <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Margin="0,0,10,0" >
                <Label Name="lb_person" Content="{Binding Path=BJR,Mode=TwoWay}" Style="{StaticResource StyleLabel}" HorizontalAlignment="Left"                         Height="66" Width="715">

                </Label>
          </Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="{Binding Path=BJDHIsVisibility, Mode=TwoWay,Converter={StaticResource                                                      BoolToVisibilityConverter}}">
              <Border BorderBrush="Transparent" BorderThickness="2" Height="70" >
                   <Label Name="lbl50" Style="{StaticResource StyleLabel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="66"                                      Width="300" Margin="0,-2">警示電話：</Label>
            </Border>
            <Border BorderBrush="Transparent" BorderThickness="2" Height="70" Width="719" >
                  <Label Name="lb_phone" Content="{Binding Path=BJDH,Mode=TwoWay}" Style="{StaticResource StyleLabel}"                                                             HorizontalAlignment="Left"   Height="66" Width="719" Margin="-2,-2,-2,1"/>
           </Border>
       </StackPanel>
</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會實現重新排列，這是我們需要注意的地方，以後需要的時候可以參考此值！

 

 

 

 

 

關於WrapPanel和RadioButton相互配合使用實WrapPanel現動態添加或刪除項