WPF快速入门4 变化与透明

来源：互联网发布：精易模块取json true 编辑：程序博客网时间：2024/05/22 03:51

TranslateTransform 坐标
RotateTransfrom旋转
ScaleTransform 缩放
SkewTransform 倾斜角度

一、变换形状

效果：三个矩形中心点旋转

代码：

    <Canvas>        <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100"></Rectangle>                <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100">            <Rectangle.RenderTransform>                <RotateTransform Angle="29" CenterX="40" CenterY="5"></RotateTransform> <!--旋转29度,中心点是40,5-->            </Rectangle.RenderTransform>        </Rectangle>        <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">            <!--RenderTransformOrigin="0.5,0.5" 相对中心点旋转-->            <Rectangle.RenderTransform>                <RotateTransform Angle="50"></RotateTransform>            </Rectangle.RenderTransform>        </Rectangle>    </Canvas>

二、变换元素

效果：

代码：

    <StackPanel>        <StackPanel Margin="20" Background="LightYellow">            <Button Padding="5" HorizontalAlignment="Left">                <Button.RenderTransform><!--RenderTransform布局前旋转-->                    <RotateTransform Angle="50" CenterX="45" CenterY="5" ></RotateTransform>                </Button.RenderTransform>                <Button.Content>我旋转了50度</Button.Content>            </Button>            <Button Padding="5" HorizontalAlignment="Left">我们没有旋转</Button>        </StackPanel>        <StackPanel Margin="20" Background="LightYellow">            <Button Padding="5" HorizontalAlignment="Left">                <Button.LayoutTransform><!--LayoutTransform布局后旋转-->                    <RotateTransform Angle="50" CenterX="45" CenterY="5" ></RotateTransform>                </Button.LayoutTransform>                <Button.Content>我旋转了50度</Button.Content>            </Button>            <Button Padding="5" HorizontalAlignment="Left">我们没有旋转</Button>        </StackPanel>    </StackPanel>

三、使用元素半透明

1、Opacity

            <Button Padding="5" HorizontalAlignment="Left" Opacity="0.3"><!--Opacity透明 值在0至1-->            </Button>

2、画刷 ImageBrush
（1）添加->现有项->选择图片文件

（2）

        <StackPanel Margin="20">            <StackPanel.Background>                <ImageBrush ImageSource="P1070669.JPG" Opacity="0.7"></ImageBrush>            </StackPanel.Background>        </StackPanel>

3、alpha值

        <StackPanel Margin="20" Background="#30FF0000"><!--30透明度，FF0000红色-->        </StackPanel>

四、透明掩码 OpacityMask

效果：

代码：

<Window x:Class="WpfApplication1.Window2"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="Window2" Height="300" Width="300">        <Window.Background>        <ImageBrush ImageSource="P1070669.JPG"></ImageBrush>    </Window.Background>        <Grid Margin="10,50">        <Button Background="Purple" FontSize="15" FontWeight="Bold">            <Button.OpacityMask><!--OpacityMask-->                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><!--线型画刷的开始点左上，结束点左下-->                    <GradientStop Offset="0" Color="Black"></GradientStop><!--颜色上面为Black-->                    <GradientStop Offset="1" Color="Transparent"></GradientStop><!--颜色下面为透明-->                </LinearGradientBrush>            </Button.OpacityMask>            <Button.Content>部分透明按钮</Button.Content>        </Button>     </Grid>    </Window>

效果：

代码：

    <Grid Margin="10" Grid.IsSharedSizeScope="True" VerticalAlignment="Center"><!--IsSharedSizeScope是否共享坐标 VerticalAlignment="Center"垂直居中-->        <Grid.RowDefinitions>            <RowDefinition Height="Auto" SharedSizeGroup="Row"></RowDefinition>            <RowDefinition SharedSizeGroup="Row"></RowDefinition>        </Grid.RowDefinitions>        <TextBox Name="txt" FontSize="30">反射的文本</TextBox>                <Rectangle Grid.Row="1" RenderTransformOrigin="1,0.5" ><!--RenderTransformOrigin反射的位置-->            <Rectangle.Fill>                <VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush><!--虚拟画刷 绑定txt-->            </Rectangle.Fill>            <Rectangle.OpacityMask>                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                    <GradientStop Offset="0.3" Color="Transparent"></GradientStop>                    <GradientStop Offset="1" Color="#44000000"></GradientStop>                </LinearGradientBrush>            </Rectangle.OpacityMask>            <Rectangle.RenderTransform>                <ScaleTransform ScaleY="-1" ></ScaleTransform><!--翻转-->            </Rectangle.RenderTransform>        </Rectangle>            </Grid>

0 0