This is a migrated thread and some comments may be shown as answers.

How to get (or made) some buttons from the WPF Demo ?

3 Answers 95 Views

Buttons

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 17 Aug 2010, 09:47 AM

Hello,

It is a homegrown HyperlinkControl. It is not even a Button although it may look like one. It would be easier for you to create your own buttons. I am attaching you the XAML though you can get some ideas for the Triggers that run the animations as well as the green brushes.

<Style x:Key="ActionButtonStyle" TargetType="{x:Type qsf:HyperLinkControl}">

<Setter Property="SnapsToDevicePixels" Value="True" />

<Setter Property="FontSize" Value="13.333" />

<Setter Property="FontWeight" Value="Bold" />

<Setter Property="Foreground" Value="Black" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type qsf:HyperLinkControl}">

<TextBlock><Hyperlink x:Name="PART_HyperLink" Foreground="White" TextDecorations="none"

Command="{Binding Command, RelativeSource={RelativeSource TemplatedParent}}"

CommandParameter="{Binding CommandParameter, RelativeSource={RelativeSource TemplatedParent}}"

CommandTarget="{Binding CommandTarget, RelativeSource={RelativeSource TemplatedParent}}"><InlineUIContainer>

<Grid Background="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True">

<Border x:Name="border" BorderThickness="1" CornerRadius="3" RenderTransformOrigin="0.5,0.5">

<Border.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Border.RenderTransform>

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF9DCD00" Offset="1"/>

<GradientStop Color="#FFD8FF00"/>

</LinearGradientBrush>

</Border.BorderBrush>

</Border>

<Border x:Name="border1" BorderThickness="1" CornerRadius="3" BorderBrush="#7FFFFFFF" Opacity="0" />

<Border Margin="2" BorderThickness="1" CornerRadius="1">

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF9DCD00" Offset="1"/>

<GradientStop Color="White"/>

</LinearGradientBrush>

</Border.BorderBrush>

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFBFF700" Offset="1"/>

<GradientStop Color="#FFD7FF70"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<Path x:Name="MouseOverVisual" Opacity="0" Stretch="Fill" Margin="2 2 2 7" Data=

"M179.65936,132.98976 L209.18358,132.98976 C209.18358,132.98976 207.00056,119.53224 194.23856,119.53224 C182.50038,119.53224 179.65936,132.98976 179.65936,132.98976 z"

RenderTransformOrigin="0.5,0.5">

<Path.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleY="-1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform/>

</TransformGroup>

</Path.RenderTransform>

<Path.OpacityMask>

<RadialGradientBrush GradientOrigin="0.502,0.908" RadiusX="0.74">

<GradientStop Color="#A8FFD100" Offset="0.361"/>

<GradientStop Color="#2AFFFFFF" Offset="0.914"/>

<GradientStop Color="#A0DCA209" Offset="0.238"/>

</RadialGradientBrush>

</Path.OpacityMask>

<Path.Fill>

<RadialGradientBrush RadiusY="0.975">

<GradientStop Color="#FFCFFE39" Offset="0.875"/>

<GradientStop Color="#FFF6FFAD" Offset="0.478"/>

</RadialGradientBrush>

</Path.Fill>

</Path>

<ContentPresenter Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Grid>

</InlineUIContainer></Hyperlink></TextBlock>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1.2" KeySpline="0,0,0,1"/>

</DoubleAnimationUsingKeyFrames>

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1.3" KeySpline="0,0,0,1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="0" KeySpline="0,0,0,1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" KeySpline="0,0,0,1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimation To="1" Duration="00:00:00.2" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard>

<Storyboard FillBehavior="Stop">

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" KeySpline="0,0,0,0"/>

</DoubleAnimationUsingKeyFrames>

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" KeySpline="0,0,0,0"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" KeySpline="0,0,0,0"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="0" KeySpline="0,0,0,0"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimation To="0" Duration="00:00:00.2" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>