MWMUIMockup/Glass Button.xaml at master · Basketcasesoftware/MWMUIMockup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Silver">
  <Page.Resources>
		<ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
			<ControlTemplate.Resources>
				<Storyboard x:Key="Timeline1">
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
						<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
				<Storyboard x:Key="Timeline2">
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
						<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
			</ControlTemplate.Resources>
			<Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
				<Border x:Name="border" Background="#7F004000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="0.507*"/>
							<RowDefinition Height="0.493*"/>
						</Grid.RowDefinitions>
						<Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
							<Border.Background>
								<RadialGradientBrush>
									<RadialGradientBrush.RelativeTransform>
										<TransformGroup>
											<ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
											<SkewTransform AngleX="0" AngleY="0"/>
											<RotateTransform Angle="0"/>
											<TranslateTransform X="-0.368" Y="-0.152"/>
										</TransformGroup>
									</RadialGradientBrush.RelativeTransform>
									<GradientStop Color="#c000FF00" Offset="0"/>
									<GradientStop Color="#00008000" Offset="1"/>
								</RadialGradientBrush>
							</Border.Background>
						</Border>
						<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
						<Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
							<Border.Background>
								<LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
									<GradientStop Color="#99FFFFFF" Offset="0"/>
									<GradientStop Color="#33FFFFFF" Offset="1"/>
								</LinearGradientBrush>
							</Border.Background>
						</Border>
					</Grid>
				</Border>
			</Border>
			<ControlTemplate.Triggers>
				<Trigger Property="IsPressed" Value="True">
					<Setter Property="Opacity" TargetName="shine" Value="0.4"/>
					<Setter Property="Background" TargetName="border" Value="#CC004000"/>
					<Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
				</Trigger>
				<Trigger Property="IsMouseOver" Value="True">
					<Trigger.EnterActions>
						<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
					</Trigger.EnterActions>
					<Trigger.ExitActions>
						<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
					</Trigger.ExitActions>
				</Trigger>
			</ControlTemplate.Triggers>
		</ControlTemplate>

		<Style TargetType="{x:Type Button}">
		  <Setter Property="Template" Value="{StaticResource GlassButton}" />
		</Style>
	</Page.Resources>

  <Grid>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50">
      Test Text
    </Button>
  </Grid>
</Page>