时间戳

首页 > 解决方案 > C# WPF 如果两个背景颜色不同的 Rectangle 完全重叠，就会出现下面这个 Rectangele 的边框

wpf - C# WPF 如果两个背景颜色不同的 Rectangle 完全重叠，就会出现下面这个 Rectangele 的边框

问题描述

我用 Rectangle 和 button 做测试，结果不一样

我想重叠两个不同颜色的矩形，我不想看到下面的矩形，但事实并非如此。

使用矩形

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
        <Border>
        <Canvas x:Name="Pad">

                <Rectangle Height="100"
                           Width="100"
                           Fill="Red"  
                           Canvas.Left="10" 
                           ClipToBounds="True"
                           Canvas.Top="10"
                           >
                </Rectangle>
                <Rectangle Height="100"
                           Width="100" 
                           Fill="White"  
                           Canvas.Left="10" 
                           Canvas.Top="10">
                </Rectangle>
            </Canvas>
        </Border>
    </Border>
</Grid>

使用按钮 如果我使用两个按钮重叠，我将看不到下面的边框。为什么使用矩形和按钮的结果不同？

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
        <Border>
           <Canvas x:Name="Pad">
                <Button Height="100"
                        Width="100"
                        BorderThickness="0"
                        Background="Red"  
                        Canvas.Left="10" 
                        ClipToBounds="True"
                        Canvas.Top="10">
                </Button>
                <Button Height="100"
                        Width="100" 
                        Background="White"  
                        BorderThickness="0"
                        Canvas.Left="10" 
                        Canvas.Top="10">
                </Button>
            </Canvas>
        </Border>
    </Border>
</Grid>

标签： wpfxaml

解决方案

我使用 SnapsToDevicePixels="True" 来解决问题

      <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
                <Border>
                <Canvas x:Name="Pad">
    
                        <Rectangle Height="100"
                                   Width="100"
                                   Fill="Red"  
                                   Canvas.Left="10" 
                                   ClipToBounds="False"
                                   SnapsToDevicePixels="True"
                                   Canvas.Top="10">
    
                      
                        </Rectangle>
                        <Rectangle Height="100"
                                       Width="100" 
                                       Fill="White"  
                                     SnapsToDevicePixels="True"
                                       Canvas.Left="10" 
                                       Canvas.Top="10">
    
                        </Rectangle>
    
                    </Canvas>
                </Border>
            </Border>
        </Grid>

更新 使用后的结果：

使用后的结果

推荐阅读