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 64 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Grégory
Top achievements
Rank 1
Grégory asked on 12 Aug 2010, 10:27 AM
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

3 Answers, 1 is accepted

Sort by
0
Grégory
Top achievements
Rank 1
answered on 16 Aug 2010, 10:03 AM

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

0
Pana
Telerik team
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>                                       
                                    <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>
0
Grégory
Top achievements
Rank 1
answered on 18 Aug 2010, 09:51 AM
Hello,

Thank you for the info :)
Tags
Buttons
Asked by
Grégory
Top achievements
Rank 1
Answers by
Grégory
Top achievements
Rank 1
Pana
Telerik team
Share this question
or