Skew Mask

Main.xaml

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignWidth="1920"
  d:DesignHeight="1080"
  Background="#FF4D5052" xmlns:noesis="clr-namespace:NoesisGUIExtensions">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="150"/>
      <RowDefinition Height="1*"/>
      <RowDefinition Height="150"/>
      <RowDefinition Height="150"/>
      <RowDefinition Height="1*"/>
      <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Grid x:Name="MaskSrc" Margin="0" Grid.Row="1" Grid.RowSpan="2">
      <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
      </Grid.RowDefinitions>
      <Rectangle Fill="#FFFF0097" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2"/>
      <Rectangle Fill="#FFFF0097" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" Grid.Row="1">
        <Rectangle.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform AngleY="-4"/>
            <RotateTransform/>
            <TranslateTransform/>
          </TransformGroup>
        </Rectangle.RenderTransform>
      </Rectangle>
    </Grid>
    <Grid x:Name="BottomContent" Grid.RowSpan="3" Margin="0" Grid.Row="2">
      <Grid.Background>
        <RadialGradientBrush RadiusY="1.443525" RadiusX="0.47148907" GradientOrigin="0.613177,0.803255" Center="0.613177,0.803255">
          <RadialGradientBrush.RelativeTransform>
            <TransformGroup>
              <ScaleTransform CenterY="0.72338" CenterX="0.588424"/>
              <SkewTransform CenterY="0.72338" CenterX="0.588424"/>
              <RotateTransform Angle="-0.24513023" CenterY="0.8032555" CenterX="0.61317706"/>
              <TranslateTransform/>
            </TransformGroup>
          </RadialGradientBrush.RelativeTransform>
          <GradientStop Color="#FFD9D6E6" Offset="0"/>
          <GradientStop Color="#FFBDA9DE" Offset="0.243"/>
          <GradientStop Color="#FF334776" Offset="1"/>
          <GradientStop Color="#FF7C82AA" Offset="0.526"/>
        </RadialGradientBrush>
      </Grid.Background>
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="1*"/>
          </Grid.RowDefinitions>
          <StackPanel VerticalAlignment="Center" Grid.Row="1" Margin="0,0,150,0" Width="300">
            <TextBlock Text="Common" TextWrapping="Wrap" FontSize="25"/>
            <Path Data="M20,0.5 24.3784,13.9736 38.5456,13.9742 27.0844,22.3019 31.4618,35.7758 20,27.449 8.53819,35.7758 12.9156,22.3019 1.4544,13.9742 15.6216,13.9736 20,0.499998z" Fill="#FFFFCD24" Stretch="Fill" Stroke="#FFD78B24" Height="36.275833" Margin="0.954,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="38.0912"/>
            <TextBlock Text="HELMAR" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="65"/>
            <TextBlock Text="Strong vs Outlaw" TextWrapping="Wrap" FontSize="25"/>
            <TextBlock Text="Level 1" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="45"/>
            <Button Content="SWAP"/>
          </StackPanel>
        </Grid>
        <Ellipse Width="400" Margin="0,160,20,-150" HorizontalAlignment="Center">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
              <GradientStop Color="#FFFFC6B6" Offset="0"/>
              <GradientStop Color="#FF00143C" Offset="1"/>
            </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
      </StackPanel>
    </Grid>
    <Grid x:Name="TopContent" Grid.RowSpan="3" Margin="0" Grid.Row="1">
      <Grid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=MaskSrc}" Stretch="Uniform" AlignmentY="Top"/>
      </Grid.OpacityMask>
      <Grid.Background>
        <RadialGradientBrush RadiusY="1.443525" RadiusX="0.47148907" GradientOrigin="0.613177,0.803255" Center="0.613177,0.803255">
          <RadialGradientBrush.RelativeTransform>
            <TransformGroup>
              <ScaleTransform CenterY="0.72338" CenterX="0.588424"/>
              <SkewTransform CenterY="0.72338" CenterX="0.588424"/>
              <RotateTransform Angle="-0.24513023" CenterY="0.8032555" CenterX="0.61317706"/>
              <TranslateTransform/>
            </TransformGroup>
          </RadialGradientBrush.RelativeTransform>
          <GradientStop Color="#FFD9D6E6" Offset="0"/>
          <GradientStop Color="#FFBDA9DE" Offset="0.243"/>
          <GradientStop Color="#FF464B68" Offset="1"/>
          <GradientStop Color="#FF7C82AA" Offset="0.526"/>
        </RadialGradientBrush>
      </Grid.Background>
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="150"/>
          </Grid.RowDefinitions>
          <StackPanel VerticalAlignment="Center" Margin="0,0,150,0" Width="300">
            <TextBlock Text="Common" TextWrapping="Wrap" FontSize="25"/>
            <Path Data="M20,0.5 24.3784,13.9736 38.5456,13.9742 27.0844,22.3019 31.4618,35.7758 20,27.449 8.53819,35.7758 12.9156,22.3019 1.4544,13.9742 15.6216,13.9736 20,0.499998z" Fill="#FFFFCD24" Stretch="Fill" Stroke="#FFD78B24" Height="36.275833" Margin="0.954,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="38.0912"/>
            <TextBlock Text="ASH" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="65"/>
            <TextBlock Text="Strong vs Beast" TextWrapping="Wrap" FontSize="25"/>
            <TextBlock Text="Level 1" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="45"/>
            <Button Content="SWAP"/>
          </StackPanel>
        </Grid>
        <Ellipse Width="400" Margin="0,10,20,0" HorizontalAlignment="Center">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
              <GradientStop Color="#FFB6FFBC" Offset="0"/>
              <GradientStop Color="#FF133C00" Offset="1"/>
            </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
      </StackPanel>
    </Grid>
    <Grid x:Name="Header" Background="#FF002775"/>
    <Grid x:Name="Footer" Grid.Row="5">
      <Grid.Background>
        <LinearGradientBrush StartPoint="-0.00409131,0.5" EndPoint="1.00292,0.5">
          <GradientStop Color="#FF002775" Offset="0"/>
          <GradientStop Color="#FF733068" Offset="1"/>
        </LinearGradientBrush>
      </Grid.Background>
    </Grid>
  </Grid>
</Page>