WPF基本画刷和图片简单处理

二、WPF基本画刷

       1> SolidColorBrush：实心画刷，使用颜色直接赋值

       2> LinearGradientBrush：线性渐变画刷，色彩沿设定的直线方向、按设定的变化点进行渐变。

       3> RadialGradientBrush：径向渐变画刷，色彩沿半径的方向、按设定的变化点进行渐变，形成圆形填充

       4> ImageBrush：使用图片作为填充内容

看下面一个例子：

<Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="201*"/>

            <ColumnDefinition Width="198*"/>

            <ColumnDefinition Width="193*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="120*"/>

            <RowDefinition Height="149*"/>

        </Grid.RowDefinitions>

        <!--实心填充-->

        <Ellipse Grid.Column="0" Grid.Row="0" Fill="Pink"/>

        <!--线性渐变-->

        <Ellipse Grid.Column="1" Grid.Row="0">

            <Ellipse.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                    <GradientStop Color="#FFFBDC18" Offset="0"></GradientStop>

                    <GradientStop Color="#FFD1CA48" Offset="0.25"></GradientStop>

                    <GradientStop Color="#FF72C0F5" Offset="0.6"></GradientStop>

                    <GradientStop Color="#FF5F6BEA" Offset="1"></GradientStop>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <!--径向渐变-->

        <Ellipse Grid.Column="2" Grid.Row="0">

            <Ellipse.Fill>

                <RadialGradientBrush>

                    <GradientStop Color="#FFFB9418" Offset="0"></GradientStop>

                    <GradientStop Color="#FFDEEC53" Offset="0.25"></GradientStop>

                    <GradientStop Color="#FF72C0F5" Offset="0.6"></GradientStop>

                    <GradientStop Color="#FF5F6BEA" Offset="1"></GradientStop>

                </RadialGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <!--图片填充-->

        <Ellipse Grid.Column="0" Grid.Row="1">

            <Ellipse.Fill>

                <ImageBrush ImageSource="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg"/>

            </Ellipse.Fill>

        </Ellipse>

</Grid>

效果图如下：

 

三、WPF图像简单处理

1>图片拉伸：通过设置Stretch属性实现图像的拉伸，

看下面一个例子：

<Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="146*"/>

            <ColumnDefinition Width="146*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="134*"/>

            <RowDefinition Height="135*"/>

        </Grid.RowDefinitions>

        <Grid x:Name="contentGrid" Grid.Row="0" Grid.Column="0">

            <!--Uniform 等比拉伸，默认等比拉伸-->

            <Image Source="Image\史大力小兔子.jpg" Width="120" Height="120" Stretch="Uniform"/>

        </Grid>

        <Grid Grid.Column="1" Grid.Row="0">

            <!--None 原始尺寸-->

            <Image Source="Image\史大力小兔子.jpg" Width="120" Height="120" Stretch="None"/>

        </Grid>

        <Grid Grid.Column="0" Grid.Row="1">

            <!--Fill 填充拉伸-->

            <Image Source="Image\史大力小兔子.jpg" Width="120" Height="120" Stretch="Fill"/>

        </Grid>

        <Grid Grid.Column="1" Grid.Row="1">

            <!--UniformToFill 等比拉伸填充-->

            <Image Source="Image\史大力小兔子.jpg" Width="120" Height="120" Stretch="UniformToFill"/>

        </Grid>

</Grid>

效果图如下：

2>裁切图像：通过设置Clip属性裁切图像

看下面一个例子：

  <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="198*"/>

            <RowDefinition Height="271*"/>

        </Grid.RowDefinitions>

        <Image Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Grid.Row="0"/>

        <Image Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Grid.Row="1">

            <Image.Clip>

                <!--设置需要裁切的左上和右下位置-->

                <RectangleGeometry Rect="30,30 150,150"></RectangleGeometry>

            </Image.Clip>

        </Image>

</Grid>

效果图如下：上面是原图，下面的是经过裁切的

3>使用图像输入文字：ImageBrush元素实现使用图像输入文字

看下面一个例子：

<Grid>

        <TextBlock FontSize="180" FontStyle="Italic" FontWeight="Bold">smile

            <TextBlock.Foreground>

                <ImageBrush ImageSource="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg"/>

            </TextBlock.Foreground>

        </TextBlock>

</Grid>

效果图如下：

4>透明效果：

看下面一个例子：

<Grid>

        <Image Source="Image\aaf34bac5e8cc41b65187b0817e00cda.jpg" Opacity="0.8"/>

</Grid>

效果图如下：