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

[Grégory]

Hello,

I'd just want to know how I can get the 3 items I marked in the screenshots above from the WPF demo ?

Are they available or should I design it myself ?

Regards,

http://img824.imageshack.us/img824/8665/telerik1.jpg
http://img801.imageshack.us/img801/1433/telerik2.jpg
http://img412.imageshack.us/img412/6292/telerik3.jpg

[Grégory]

No answers?
I'm guessing it is a homemade style but before doing it myself I'd like to be sure of it :)

[Pana]

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>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                        <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">
                                    <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" KeySpline="0,0,0,0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                        <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>

[Grégory]

Hello,

Thank you for the info :)