Question

使用通过滑块放置在Grid中的项目缩放ItemsControl时，我在每个缩放位置的项目之间会出现间隙。请参考下面的代码。

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中项目之间的差距的解决方案。

谢谢，

Answer 1

这可能是WPF中像素舍入的结果，两者都“渗入”白色空间，导致白线。这种行为通常通过缩放来暴露，因为它试图将事物压缩成更少的像素。

尝试在您的有边框/背景项目上设置SnapToDevicePixels=true（或者设置父ItemControl，我认为它会逐渐减少）。

见这里：https://msdn.microsoft.com/en-us/library/aa970908(v=vs.85).aspx

使用Slider

1 个答案: