WPF中变换与透明

WPF中变换与透明

1. 变换形状

• RenderTransform形状变换
• RotateTransform旋转变换
• RenderTransformOrigin旋转中心点的相对位置，取值范围[0,1],”0.5 0.5”表示绕中心旋转
• CenterX设置旋转中心的水平绝对位置

<Canvas>
    <Rectangle Margin="5" Width="80" Height="30" Stroke="Blue" Fill="Yellow"
               Canvas.Left="50" Canvas.Top="30"></Rectangle>
    <Rectangle Margin="5" Width="80" Height="30" Stroke="Blue" Fill="Yellow"
               Canvas.Left="50" Canvas.Top="30">
        <Rectangle.RenderTransform>
                <RotateTransform Angle="45" CenterX="40" CenterY="15"></RotateTransform>
        </Rectangle.RenderTransform>
    </Rectangle>
        <Rectangle Margin="5" Width="80" Height="30" Stroke="Blue" Fill="Yellow"
               Canvas.Left="50" Canvas.Top="30" RenderTransformOrigin="0.5 0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="60"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
</Canvas>

2. 变换元素

• RenderTransform只进行旋转，所占的空间并没有改变
• LayoutTransform所占空间变大，不会与其他元素重叠

<StackPanel>
    <StackPanel Margin="25" Background="LightYellow">
<Button Padding="5" HorizontalAlignment="Left">
    <Button.RenderTransform>
        <RotateTransform Angle="30"/>
    </Button.RenderTransform>
    <Button.Content>I am rotated 30 degrees</Button.Content>
</Button>
<Button Padding="5" HorizontalAlignment="Left">I'm not.</Button>
    </StackPanel>
    <StackPanel Margin="25" Background="LightYellow">
<Button Padding="5" HorizontalAlignment="Left">
    <Button.LayoutTransform>
        <RotateTransform Angle="30"/>
    </Button.LayoutTransform>
    <Button.Content>I am rotated 30 degrees</Button.Content>
</Button>
<Button Padding="5" HorizontalAlignment="Left">I'm not.</Button>
    </StackPanel>
</StackPanel>

3. 变换与透明

• Opacity

<StackPanel>
    <StackPanel Margin="25" Background="LightYellow">
<Button Padding="5" HorizontalAlignment="Left">
    <Button.RenderTransform>
        <RotateTransform Angle="30"/>
    </Button.RenderTransform>
    <Button.Content>I am rotated 30 degrees</Button.Content>
</Button>
<Button Padding="5" HorizontalAlignment="Left">I'm not.</Button>
    </StackPanel>
    <StackPanel Margin="25" >
        <StackPanel.Background>
            <ImageBrush ImageSource="Images/Jellyfish.jpg" Opacity="0.4"></ImageBrush>
        </StackPanel.Background>
        <Button Padding="5" HorizontalAlignment="Left">
    <Button.LayoutTransform>
        <RotateTransform Angle="30"/>
    </Button.LayoutTransform>
    <Button.Content>I am rotated 30 degrees</Button.Content>
</Button>
<Button Padding="5" HorizontalAlignment="Left">I'm not.</Button>
    </StackPanel>
</StackPanel>

4. 透明掩码

<StackPanel>
<StackPanel.Background>
    <ImageBrush ImageSource="Images/Jellyfish.jpg">
    </ImageBrush>
        </StackPanel.Background>
    <Button Content="OK" Height="300" Background="Purple">
        <Button.OpacityMask>
            <LinearGradientBrush  EndPoint="0 1">
                <GradientStop Offset="0" Color="Black"></GradientStop>
                <GradientStop Offset="1" Color="Transparent"></GradientStop>
            </LinearGradientBrush>
        </Button.OpacityMask>
    </Button>
</StackPanel>

5. 反射效果

<Grid Margin="10" Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" SharedSizeGroup="Row"/>
        <RowDefinition SharedSizeGroup="Row"/>
    </Grid.RowDefinitions>
    <TextBox x:Name="TextBox1" FontSize="30">Here is some refleted text</TextBox>
    <Rectangle Grid.Row="1" RenderTransformOrigin="1,0.5">
        <Rectangle.Fill>
            <VisualBrush Visual="{Binding ElementName=TextBox1}"></VisualBrush>
        </Rectangle.Fill>
        <Rectangle.OpacityMask>
            <LinearGradientBrush 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>