Setting Selected tab with small triangle below in wpf

Question

Is there any examples of the animated tab control (one in android mentioned below) in WPF? Any tab/button controls that animate to down-arrow when pressed?

This one is for android: Setting selected TAB with a small triangle below it

score 1 · Answer 1 · answered Apr 02 '13 at 07:17

What is keeping you from doing like this

<Application.Resources>
    <ControlTemplate x:Key="ButtonTemplate1" 
                 TargetType="{x:Type Button}">
        <Border 
            Name="Border" 
            BorderBrush="Black" 
            BorderThickness="2"
            CornerRadius="2"
            Background="#FF2278CF"
            TextBlock.Foreground="White">
            <Grid>
                <ContentPresenter 
                Margin="{TemplateBinding Padding}"
                    RecognizesAccessKey="True"
                    HorizontalAlignment="Center">
                </ContentPresenter>
            </Grid>
        </Border>
    </ControlTemplate>

    <ControlTemplate x:Key="ButtonTemplate2" 
                 TargetType="{x:Type Button}">
        <Border 
            Name="Border" 
            BorderBrush="Black" 
            BorderThickness="2"
            CornerRadius="50"
            Background="Red"
            TextBlock.Foreground="White">
            <Grid>
                <ContentPresenter 
                Margin="{TemplateBinding Padding}"
                    RecognizesAccessKey="True"
                    HorizontalAlignment="Center">
                </ContentPresenter>
            </Grid>
        </Border>
    </ControlTemplate>

    <Style TargetType="{x:Type Button}">
        <Setter Property="Control.Template" Value="{StaticResource ButtonTemplate1}"></Setter>
        <Style.Triggers>
            <Trigger Property="Control.IsMouseOver" Value="true">
                <Setter Property="Control.Template" Value="{StaticResource ButtonTemplate2}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Application.Resources>

In ControlTemplate you can make your control any form you want.

score 0 · Answer 2 · answered Apr 02 '13 at 06:51

0

Perhaps you should use triggers. Trigger Class Styles using triggers in WPF

answered Apr 02 '13 at 06:51

Grenkin

93
1
10

Thanks for the reply! I am more interested in having an animation kind of thing to extend the button or tab with small inverted triangle below the box when selected. There may also be a possiblity of using blend in this. I am looking out for examples inclined towards this, rather than changing colors and fonts. – Mullaly Apr 02 '13 at 06:58

Mullaly · Answer 3 · 2013-04-02T08:42:36.300

I was able to do this is blend. This is able to animate itself, the storyboard is triggered on click of the button. This is not the perfect answer, but it gives the idea.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
mc:Ignorable="d"
x:Class="SilverlightPrototype1Screens.Screen_1"
Width="640" Height="480">
<UserControl.Resources>
    <Storyboard x:Name="Storyboard1">
        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Callout.AnchorPoint)" Storyboard.TargetName="callout">
            <EasingPointKeyFrame KeyTime="0" Value="0.254,0.962"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="0.269,1.385"/>
        </PointAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <ed:Callout x:Name="callout" AnchorPoint="0.277,1.593" CalloutStyle="RoundedRectangle" Fill="#FF737393" FontSize="14.666999816894531" HorizontalAlignment="Left" Height="52" Margin="150,88,0,0" Stroke="Black" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5"/>
</Grid></UserControl>

Setting Selected tab with small triangle below in wpf

3 Answers3