在表格上放置旋转标签

Question

I am having problems correctly placing my object, i want to achieve corner ribbon, something like this:

Because my ribbon should be 1/5 of a whole form i devided form into 5 columns:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid Grid.ColumnSpan="5">
    </Grid>
    <Border Margin="0" BorderThickness="2" Height="auto" BorderBrush="White" Background="#FFE12727" HorizontalAlignment="Stretch" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Padding="0,0,6,0">
        <Border.RenderTransform>
            <CompositeTransform Rotation="-45"/>
        </Border.RenderTransform>
        <Viewbox VerticalAlignment="Center" Margin="50,15,50,10">
            <TextBlock VerticalAlignment="Center" Text="NEW HERE?"/>
        </Viewbox>
    </Border>
</Grid>

It looks like this:

How should i set the margins, padding etc, so that ribbon on all resolutions remained like on 1 picture?

Or any different way to achieve this?

Answer 1

You can use the CenterX and CenterY properties to set the center of rotation for the object. In your case the rotation center is in the middle of the border - playing a bit with these properties and it should work

For example, if you wanted a 100 by 100 square to pivot around its center, you would set the CenterX and CenterY properties to 50.

by http://msdn.microsoft.com/en-us/library/system.windows.media.compositetransform.rotation(v=vs.95).aspx