none
Windows 应用商店应用能做下面图片的效果吗? RRS feed

答案

  • 你好,Windows Store App 可以实现你要的效果。

    我们需要三个Border,按照红,绿,蓝的顺序来定义,然后分别定义RotateTransform即可。

    <Grid Grid.Row="1">
                <Border Background="Red" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Green" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="-45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Blue" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="90"/>
                    </Border.RenderTransform>
                </Border>
                <TextBlock Text="This is a demo." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
            </Grid>

    下面是效果图。



    2014年5月22日 1:34
    版主
  • 顺便补充一下,颜色的话,设置Opacity = 0.5 就行。

    不过设置颜色了之后重叠部分会颜色很深,所以可以在每条色带的下面添加对应的白色条以避免颜色重叠:

           <Grid Grid.Row="1">
                <Border Background="Red" BorderThickness="0" Width="300" Height="50" Opacity="0.5">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="White" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="-45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Green" BorderThickness="0" Width="300" Height="50" Opacity="0.5">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="-45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="White" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="90"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Blue" BorderThickness="0" Width="300" Height="50" Opacity="0.5">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="90"/>
                    </Border.RenderTransform>
                </Border>
                <TextBlock Text="This is a demo." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
            </Grid>
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    2014年5月22日 6:45
    版主

全部回复

  • 你好,Windows Store App 可以实现你要的效果。

    我们需要三个Border,按照红,绿,蓝的顺序来定义,然后分别定义RotateTransform即可。

    <Grid Grid.Row="1">
                <Border Background="Red" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Green" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="-45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Blue" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="90"/>
                    </Border.RenderTransform>
                </Border>
                <TextBlock Text="This is a demo." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
            </Grid>

    下面是效果图。



    2014年5月22日 1:34
    版主
  • 顺便补充一下,颜色的话,设置Opacity = 0.5 就行。

    不过设置颜色了之后重叠部分会颜色很深,所以可以在每条色带的下面添加对应的白色条以避免颜色重叠:

           <Grid Grid.Row="1">
                <Border Background="Red" BorderThickness="0" Width="300" Height="50" Opacity="0.5">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="White" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="-45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Green" BorderThickness="0" Width="300" Height="50" Opacity="0.5">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="-45"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="White" BorderThickness="0" Width="300" Height="50">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="90"/>
                    </Border.RenderTransform>
                </Border>
                <Border Background="Blue" BorderThickness="0" Width="300" Height="50" Opacity="0.5">
                    <Border.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="25" Angle="90"/>
                    </Border.RenderTransform>
                </Border>
                <TextBlock Text="This is a demo." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
            </Grid>
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    2014年5月22日 6:45
    版主