ItemsControl中的項目之間的間距在使用Slider進行縮放時發生了不必要的影響

使用通過Slider放置在網格中的項目縮放ItemsControl時，我在每個縮放位置的項目之間縮小間距。請參考我的下面的代碼。ItemsControl中的項目之間的間距在使用Slider進行縮放時發生了不必要的影響

MainWindow.xaml：

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="30"></RowDefinition> 
     <RowDefinition Height="*"></RowDefinition> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 

    <ToolBar Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" FlowDirection="LeftToRight"> 


     <Slider Name="slider1" 
     Grid.Row="1" 
     Maximum="2" 
     Minimum=".15" 
     IsMoveToPointEnabled="True" 
     TickPlacement="BottomRight" 
     TickFrequency="2" 
     Ticks=".15,.30,.45,.60,.75,1,1.15,1.30,1.45,1.60,1.75,2" 
     Width="200" 
     Margin="0" 
     HorizontalAlignment="Right" 
     SelectionStart="1" IsSnapToTickEnabled="True"/> 

    </ToolBar> 

    <Grid Name="grid" Grid.Column="0" Grid.Row="1" 
       VerticalAlignment="Center" HorizontalAlignment="Center"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"></RowDefinition> 
      <RowDefinition Height="Auto"></RowDefinition> 
     </Grid.RowDefinitions> 
     <Grid.LayoutTransform> 
      <TransformGroup> 
       <ScaleTransform x:Name="scaleTransform" 
             ScaleX="{Binding Path=Value, ElementName=slider1}" 
             ScaleY="{Binding Path=Value, ElementName=slider1}" /> 

      </TransformGroup> 

     </Grid.LayoutTransform> 


     <ItemsControl Name="TabItems" 
          ItemsSource="{Binding Path=TabPreviewParamsList}" > 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 

        <StackPanel Orientation="Vertical" Width="140"> 
        </StackPanel> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <DockPanel Height= "60" ClipToBounds="True" Background="Red" Margin="0,0,0,0"> 

         <Border ClipToBounds="True" BorderThickness="0" BorderBrush="Black" Height="60"> 
          <TextBlock Text="Sample" > 
           <TextBlock.LayoutTransform> 
            <RotateTransform Angle="90"/> 
           </TextBlock.LayoutTransform> 
          </TextBlock> 
         </Border> 

        </DockPanel> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.LayoutTransform> 
       <RotateTransform Angle="{Binding Path=TabOrientationAngle}"/> 
      </ItemsControl.LayoutTransform> 
     </ItemsControl> 

    </Grid> 
</Grid>

MainWindow.xaml.cs

/// <summary> 
/// Interaction logic for MainWindow.xaml 
/// </summary> 
public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 
     this.TabItems.Items.Add(1); 
     this.TabItems.Items.Add(1); 
     this.TabItems.Items.Add(1); 
     this.TabItems.Items.Add(1); 
     this.TabItems.Items.Add(1); 
    } 
}

當運行與上面的代碼的應用和拖動滑塊，就會發生項之間一定差距這看起來像項目之間的白色邊框。請參考下圖：

ItemsControlBorder

請讓我知道了解決方案，以避免在ItemsControl的項目之間的差距，而縮小。

謝謝，

來源

2016-04-26 Nindhu R