WPF中小的技能点 1

图片圆角的处理方式

      采用boder里background背景设置图片并设置对应的圆角

<Border CornerRadius="20">
      <Border.Background>
          <ImageBrush ImageSource="/Resources/Images/after.png" />
      </Border.Background>
</Border>

图片修复前后对比示例

<Grid Width="722" Height="476">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.17*" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image
            Grid.ColumnSpan="3"
            Width="722"
            Height="476"
            Source="/Img/after.jpg" />
        <Image
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Width="722"
            Height="476"
            Source="/Img/before.jpg"
            Visibility="Visible" />

        <GridSplitter
            Grid.Column="1"
            Width="40"
            Margin="-40,0"
            HorizontalAlignment="Stretch"
            Cursor="Hand" />
        <Grid>
            <Label
                Margin="60,100"
                VerticalAlignment="Bottom"
                Content="修复前" />
        </Grid>
        <Label
            Grid.Column="3"
            Margin="50,100"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Content="修复后" />
</Grid>

• 图片前后的对比界面的布局放到相应的位置，并且图片大小保证大小一致或者宽高比等比缩放
• GridSplitter控件犹如一条“分割线”，把两边的列隔开了。一旦鼠标划到任意一边，就会改变形状

看一下效果：