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

4 posts, 0 answers
  1. Grégory
    Grégory avatar
    3 posts
    Member since:
    Jul 2010

    Posted 12 Aug 2010 Link to this post

    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
  2. Grégory
    Grégory avatar
    3 posts
    Member since:
    Jul 2010

    Posted 16 Aug 2010 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. Pana
    Admin
    Pana avatar
    748 posts

    Posted 17 Aug 2010 Link to this post

    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>
  5. Grégory
    Grégory avatar
    3 posts
    Member since:
    Jul 2010

    Posted 18 Aug 2010 Link to this post

    Hello,

    Thank you for the info :)
Back to Top