RadTabControl Custom Template Add Buttons Right of Tabs

5 posts, 0 answers
  1. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 29 Jun 2015 Link to this post

    I am trying to make it so there are 3 buttons to the right of the tabs in RabTabControl.  I made a new control template and style, based off RadTabControl, and I see my 3 buttons.  The problem is that I don't know how to get access to those 3 button properties in xaml or behind.  I am really new to template and styles so I am assuming I am totally missing something.

     

    Here is my RadTabControl in my Xaml (which does show the buttons):

    <telerik:RadTabControl Width="1139"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Center"
                           AllowDragReorder="False"
                           Background="Transparent"
                           IsContentPreserved="True"
                           IsDefaultItemSelected="True"
                           SelectedIndex="{Binding SelectedTabIndex,
                                                   Mode=TwoWay}"
                           Style="{StaticResource RadTabControlButtonTemplate}">
        <telerik:RadTabItem FontSize="12"
                            Header="Profile"
                            IsEnabled="{Binding TabProfileEnabled,
                                                Mode=OneWay}" />
        <telerik:RadTabItem FontSize="12"
                            Header="Contact"
                            IsEnabled="{Binding TabContactEnabled,
                                                Mode=OneWay}" />
        <telerik:RadTabItem FontSize="12"
                            Header="Identification"
                            IsEnabled="{Binding TabIdentificationEnabled,
                                                Mode=OneWay}" />
    </telerik:RadTabControl>

     

    Here is all the related template and style information from my xaml dictionary (my buttons are down around like 614:

    001.<ControlTemplate x:Key="IconButtonNew"
    002.                 TargetType="Button">
    003.    <Grid x:Name="Root">
    004.        <VisualStateManager.VisualStateGroups>
    005.            <VisualStateGroup x:Name="CommonStates">
    006.                <VisualState x:Name="Normal">
    007.                    <Storyboard>
    008.                        <DoubleAnimation Duration="0:0:.25"
    009.                                         Storyboard.TargetName="DropShadow"
    010.                                         Storyboard.TargetProperty="ShadowDepth"
    011.                                         To="0" />
    012.                        <DoubleAnimation Duration="0:0:.25"
    013.                                         Storyboard.TargetName="DropShadow"
    014.                                         Storyboard.TargetProperty="Opacity"
    015.                                         To="0" />
    016.                        <DoubleAnimation Duration="0:0:.25"
    017.                                         Storyboard.TargetName="IconPosition"
    018.                                         Storyboard.TargetProperty="X"
    019.                                         To="0" />
    020.                        <DoubleAnimation Duration="0:0:.25"
    021.                                         Storyboard.TargetName="IconPosition"
    022.                                         Storyboard.TargetProperty="Y"
    023.                                         To="0" />
    024.                    </Storyboard>
    025.                </VisualState>
    026.                <VisualState x:Name="MouseOver">
    027.                    <Storyboard>
    028.                        <DoubleAnimation Duration="0:0:.25"
    029.                                         Storyboard.TargetName="DropShadow"
    030.                                         Storyboard.TargetProperty="ShadowDepth"
    031.                                         To="4" />
    032.                        <DoubleAnimation Duration="0:0:.25"
    033.                                         Storyboard.TargetName="DropShadow"
    034.                                         Storyboard.TargetProperty="Opacity"
    035.                                         To=".5" />
    036.                        <DoubleAnimation Duration="0:0:.25"
    037.                                         Storyboard.TargetName="IconPosition"
    038.                                         Storyboard.TargetProperty="X"
    039.                                         To="-2" />
    040.                        <DoubleAnimation Duration="0:0:.25"
    041.                                         Storyboard.TargetName="IconPosition"
    042.                                         Storyboard.TargetProperty="Y"
    043.                                         To="-2" />
    044.                    </Storyboard>
    045.                </VisualState>
    046.                <VisualState x:Name="Disabled">
    047.                    <Storyboard>
    048.                        <DoubleAnimation Duration="0"
    049.                                         Storyboard.TargetName="Icon"
    050.                                         Storyboard.TargetProperty="Opacity"
    051.                                         To=".50" />
    052.                    </Storyboard>
    053.                </VisualState>
    054.            </VisualStateGroup>
    055.            <VisualStateGroup x:Name="FocusStates">
    056.                <VisualState x:Name="Focused">
    057.                    <Storyboard>
    058.                        <DoubleAnimation Duration="0:0:.25"
    059.                                         Storyboard.TargetName="DropShadow"
    060.                                         Storyboard.TargetProperty="ShadowDepth"
    061.                                         To="4" />
    062.                        <DoubleAnimation Duration="0:0:.25"
    063.                                         Storyboard.TargetName="DropShadow"
    064.                                         Storyboard.TargetProperty="Opacity"
    065.                                         To=".5" />
    066.                        <DoubleAnimation Duration="0:0:.25"
    067.                                         Storyboard.TargetName="IconPosition"
    068.                                         Storyboard.TargetProperty="X"
    069.                                         To="-2" />
    070.                        <DoubleAnimation Duration="0:0:.25"
    071.                                         Storyboard.TargetName="IconPosition"
    072.                                         Storyboard.TargetProperty="Y"
    073.                                         To="-2" />
    074.                    </Storyboard>
    075.                </VisualState>
    076.                <VisualState x:Name="Unfocused">
    077.                    <Storyboard>
    078.                        <DoubleAnimation Duration="0:0:.25"
    079.                                         Storyboard.TargetName="DropShadow"
    080.                                         Storyboard.TargetProperty="ShadowDepth"
    081.                                         To="0" />
    082.                        <DoubleAnimation Duration="0:0:.25"
    083.                                         Storyboard.TargetName="DropShadow"
    084.                                         Storyboard.TargetProperty="Opacity"
    085.                                         To="0" />
    086.                        <DoubleAnimation Duration="0:0:.25"
    087.                                         Storyboard.TargetName="IconPosition"
    088.                                         Storyboard.TargetProperty="X"
    089.                                         To="0" />
    090.                        <DoubleAnimation Duration="0:0:.25"
    091.                                         Storyboard.TargetName="IconPosition"
    092.                                         Storyboard.TargetProperty="Y"
    093.                                         To="0" />
    094.                    </Storyboard>
    095.                </VisualState>
    096.            </VisualStateGroup>
    097.        </VisualStateManager.VisualStateGroups>
    098.        <Grid>
    099.            <Image x:Name="Icon"
    100.                   Width="24"
    101.                   Height="24"
    102.                   Margin="2,0,2,0"
    103.                   Cursor="Hand"
    104.                   Source="{TemplateBinding Content}">
    105.                <Image.Effect>
    106.                    <DropShadowEffect x:Name="DropShadow"
    107.                                      BlurRadius=".5"
    108.                                      Opacity="0"
    109.                                      ShadowDepth="0" />
    110.                </Image.Effect>
    111.                <Image.RenderTransform>
    112.                    <TranslateTransform x:Name="IconPosition" />
    113.                </Image.RenderTransform>
    114.            </Image>
    115.        </Grid>
    116.    </Grid>
    117.</ControlTemplate>
    118.<SolidColorBrush x:Key="TabControl_ContentBorderBrush"
    119.                 Color="#FF848484" />
    120.<SolidColorBrush x:Key="TabControl_ContentBackground"
    121.                 Color="#FFFFFFFF" />
    122.<SolidColorBrush x:Key="TabControl_HeaderBackground"
    123.                 Color="#FFBFBFBF" />
    124.<LinearGradientBrush x:Key="ControlBackground_Normal" StartPoint="0.5,0" EndPoint="0.5,1">
    125.    <GradientStop Offset="0" Color="#FFFFFFFF" />
    126.    <GradientStop Offset="0.50" Color="#FFDCDCDC" />
    127.    <GradientStop Offset="0.50" Color="#FFADADAD" />
    128.    <GradientStop Offset="1" Color="#FFD4D4D4" />
    129.</LinearGradientBrush>
    130.<SolidColorBrush x:Key="ControlOuterBorder_Normal"
    131.                 Color="#FF848484" />
    132.<SolidColorBrush x:Key="ControlInnerBorder_Normal"
    133.                 Color="#FFFFFFFF" />
    134.<SolidColorBrush x:Key="ControlOuterBorder_Checked"
    135.                 Color="#FFFFC92B" />
    136.<LinearGradientBrush x:Key="ControlBackground_Checked" StartPoint="0.5,0" EndPoint="0.5,1">
    137.    <GradientStop Offset="0" Color="#FFFFDCAB" />
    138.    <GradientStop Offset="0.5" Color="#FFFFD18F" />
    139.    <GradientStop Offset="0.5" Color="#FFFE9227" />
    140.    <GradientStop Offset="1" Color="#FFFFD74E" />
    141.</LinearGradientBrush>
    142.<SolidColorBrush x:Key="ControlInnerBorder_Checked"
    143.                 Color="#FFFFFFFF" />
    144.<SolidColorBrush x:Key="ControlElement_Normal"
    145.                 Color="#FF000000" />
    146.<SolidColorBrush x:Key="ControlOuterBorder_MouseOver"
    147.                 Color="#FFFFC92B" />
    148.<LinearGradientBrush x:Key="ControlBackground_MouseOver" StartPoint="0.5,0" EndPoint="0.5,1">
    149.    <GradientStop Offset="0" Color="#FFFFFBDA" />
    150.    <GradientStop Offset="0.50" Color="#FFFEEBAE" />
    151.    <GradientStop Offset="0.50" Color="#FFFFD25A" />
    152.    <GradientStop Offset="1" Color="#FFFFFBA3" />
    153.</LinearGradientBrush>
    154.<SolidColorBrush x:Key="ControlInnerBorder_MouseOver"
    155.                 Color="#FFFFFFFF" />
    156.<LinearGradientBrush x:Key="ControlOuterBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
    157.    <GradientStop Color="#FF282828" />
    158.    <GradientStop Offset="1" Color="#FF5F5F5F" />
    159.</LinearGradientBrush>
    160.<LinearGradientBrush x:Key="ControlBackground_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
    161.    <GradientStop Offset="0" Color="#FFFFDCAB" />
    162.    <GradientStop Offset="0.5" Color="#FFFFD18F" />
    163.    <GradientStop Offset="0.5" Color="#FFFE9227" />
    164.    <GradientStop Offset="0" Color="#FFFFBA74" />
    165.</LinearGradientBrush>
    166.<LinearGradientBrush x:Key="ControlInnerBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
    167.    <GradientStop Color="#FFB69A78" />
    168.    <GradientStop Offset="0.126" Color="#FFFFE17A" />
    169.</LinearGradientBrush>
    170.<Style x:Key="DropDownButtonStyle"
    171.       TargetType="ToggleButton">
    172.    <Setter Property="Background" Value="{StaticResource ControlBackground_Normal}" />
    173.    <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}" />
    174.    <Setter Property="BorderThickness" Value="1" />
    175.    <Setter Property="Margin" Value="2 4 4 2" />
    176.    <Setter Property="Padding" Value="5 0" />
    177.    <Setter Property="MinWidth" Value="18" />
    178.    <Setter Property="Content" Value="" />
    179.    <Setter Property="telerik:RadDockPanel.Dock" Value="Right" />
    180.    <Setter Property="IsTabStop" Value="False" />
    181.    <Setter Property="Template">
    182.        <Setter.Value>
    183.            <ControlTemplate TargetType="ToggleButton">
    184.                <Grid x:Name="root"
    185.                      Background="#01FFFFFF">
    186.                    <VisualStateManager.VisualStateGroups>
    187.                        <VisualStateGroup x:Name="CommonStates">
    188.                            <VisualState x:Name="Normal" />
    189.                            <VisualState x:Name="MouseOver">
    190.                                <Storyboard>
    191.                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0"
    192.                                                                   Storyboard.TargetName="Border"
    193.                                                                   Storyboard.TargetProperty="BorderBrush">
    194.                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
    195.                                                                Value="{StaticResource ControlOuterBorder_MouseOver}" />
    196.                                    </ObjectAnimationUsingKeyFrames>
    197.                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0"
    198.                                                                   Storyboard.TargetName="Border"
    199.                                                                   Storyboard.TargetProperty="Background">
    200.                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
    201.                                                                Value="{StaticResource ControlBackground_MouseOver}" />
    202.                                    </ObjectAnimationUsingKeyFrames>
    203.                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0"
    204.                                                                   Storyboard.TargetName="InnerBorder"
    205.                                                                   Storyboard.TargetProperty="BorderBrush">
    206.                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
    207.                                                                Value="{StaticResource ControlInnerBorder_MouseOver}" />
    208.                                    </ObjectAnimationUsingKeyFrames>
    209.                                </Storyboard>
    210.                            </VisualState>
    211.                            <VisualState x:Name="Pressed">
    212.                                <Storyboard>
    213.                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0"
    214.                                                                   Storyboard.TargetName="Border"
    215.                                                                   Storyboard.TargetProperty="BorderBrush">
    216.                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
    217.                                                                Value="{StaticResource ControlOuterBorder_Pressed}" />
    218.                                    </ObjectAnimationUsingKeyFrames>
    219.                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0"
    220.                                                                   Storyboard.TargetName="Border"
    221.                                                                   Storyboard.TargetProperty="Background">
    222.                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
    223.                                                                Value="{StaticResource ControlBackground_Pressed}" />
    224.                                    </ObjectAnimationUsingKeyFrames>
    225.                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0"
    226.                                                                   Storyboard.TargetName="InnerBorder"
    227.                                                                   Storyboard.TargetProperty="BorderBrush">
    228.                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
    229.                                                                Value="{StaticResource ControlInnerBorder_Pressed}" />
    230.                                    </ObjectAnimationUsingKeyFrames>
    231.                                </Storyboard>
    232.                            </VisualState>
    233.                            <VisualState x:Name="Disabled">
    234.                                <Storyboard>
    235.                                    <DoubleAnimation Duration="0"
    236.                                                     Storyboard.TargetName="root"
    237.                                                     Storyboard.TargetProperty="(UIElement.Opacity)"
    238.                                                     To="0.5" />
    239.                                </Storyboard>
    240.                            </VisualState>
    241.                        </VisualStateGroup>
    242.                        <VisualStateGroup x:Name="CheckStates">
    243.                            <VisualState x:Name="Checked">
    244.                                <Storyboard>
    245.                                    <DoubleAnimation Duration="0"
    246.                                                     Storyboard.TargetName="CheckedVisual"
    247.                                                     Storyboard.TargetProperty="Opacity"
    248.                                                     To="1" />
    249.                                </Storyboard>
    250.                            </VisualState>
    251.                            <VisualState x:Name="Unchecked" />
    252.                        </VisualStateGroup>
    253.                    </VisualStateManager.VisualStateGroups>
    254.                    <Border x:Name="Border"
    255.                            Background="{TemplateBinding Background}"
    256.                            BorderBrush="{TemplateBinding BorderBrush}"
    257.                            BorderThickness="{TemplateBinding BorderThickness}">
    258.                        <Border x:Name="InnerBorder"
    259.                                BorderBrush="{StaticResource ControlInnerBorder_Normal}"
    260.                                BorderThickness="1" />
    261.                    </Border>
    262.                    <Border x:Name="CheckedVisual"
    263.                            Background="{StaticResource ControlBackground_Checked}"
    264.                            BorderBrush="{StaticResource ControlOuterBorder_Checked}"
    265.                            BorderThickness="{TemplateBinding BorderThickness}"
    266.                            Opacity="0">
    267.                        <Border BorderBrush="{StaticResource ControlInnerBorder_Checked}"
    268.                                BorderThickness="1" />
    269.                    </Border>
    270.                    <Grid>
    271.                        <Path Margin="0 1 0 0"
    272.                              HorizontalAlignment="Center"
    273.                              VerticalAlignment="Center"
    274.                              Data="M0,2 L6,2 L3,6 z M0,0 L6,0 L6,1 L0,1 z"
    275.                              Fill="White" />
    276.                        <Path x:Name="arrow"
    277.                              Margin="{TemplateBinding Padding}"
    278.                              HorizontalAlignment="Center"
    279.                              VerticalAlignment="Center"
    280.                              Data="M0,2 L6,2 L3,6 z M0,0 L6,0 L6,1 L0,1 z"
    281.                              Fill="{StaticResource ControlElement_Normal}" />
    282.                    </Grid>
    283.                </Grid>
    284.            </ControlTemplate>
    285.        </Setter.Value>
    286.    </Setter>
    287.</Style>
    288.<SolidColorBrush x:Key="ControlBackground"
    289.                 Color="#FFFFFFFF" />
    290.<SolidColorBrush x:Key="ControlOuterBorder"
    291.                 Color="#FF848484" />
    292.<SolidColorBrush x:Key="TabControl_DropDownHeaderBrush"
    293.                 Color="Transparent" />
    294.<Style x:Key="DropDownMenuStyle"
    295.       TargetType="tabControl:DropDownMenu">
    296.    <Setter Property="Background" Value="{StaticResource ControlBackground}" />
    297.    <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
    298.    <Setter Property="BorderThickness" Value="1" />
    299.    <Setter Property="Padding" Value="2" />
    300.    <Setter Property="VerticalContentAlignment" Value="Center" />
    301.    <Setter Property="MaxHeight" Value="500" />
    302.    <Setter Property="ItemsPanel">
    303.        <Setter.Value>
    304.            <ItemsPanelTemplate>
    305.                <telerik:RadWrapPanel Orientation="Vertical" />
    306.            </ItemsPanelTemplate>
    307.        </Setter.Value>
    308.    </Setter>
    309.    <Setter Property="Template">
    310.        <Setter.Value>
    311.            <ControlTemplate TargetType="tabControl:DropDownMenu">
    312.                <Grid>
    313.                    <Border Margin="0 0 3 3"
    314.                            Background="{TemplateBinding Background}"
    315.                            BorderBrush="{TemplateBinding BorderBrush}"
    316.                            BorderThickness="{TemplateBinding BorderThickness}">
    317.                        <Border.Effect>
    318.                            <DropShadowEffect Opacity="0.3"
    319.                                              ShadowDepth="3"
    320.                                              Color="Black" />
    321.                        </Border.Effect>
    322.                        <ItemsPresenter Margin="{TemplateBinding Padding}"
    323.                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    324.                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    325.                    </Border>
    326.                    <Rectangle x:Name="BorderMaskElement"
    327.                               HorizontalAlignment="Left"
    328.                               VerticalAlignment="Top"
    329.                               Fill="{StaticResource TabControl_DropDownHeaderBrush}" />
    330.                </Grid>
    331.            </ControlTemplate>
    332.        </Setter.Value>
    333.    </Setter>
    334.</Style>
    335.<Style x:Key="ScrollButtonStyle"
    336.       TargetType="RepeatButton">
    337.    <Setter Property="Content" Value="" />
    338.    <Setter Property="MinWidth" Value="18" />
    339.    <Setter Property="Padding" Value="6 0" />
    340.    <Setter Property="telerik:RadDockPanel.Dock" Value="Left" />
    341.    <Setter Property="HorizontalContentAlignment" Value="Center" />
    342.    <Setter Property="VerticalContentAlignment" Value="Center" />
    343.    <Setter Property="IsTabStop" Value="False" />
    344.    <Setter Property="Template">
    345.        <Setter.Value>
    346.            <ControlTemplate TargetType="RepeatButton">
    347.                <Grid x:Name="ButtonBorder"
    348.                      Background="Transparent">
    349.                    <VisualStateManager.VisualStateGroups>
    350.                        <VisualStateGroup x:Name="CommonStates">
    351.                            <VisualState x:Name="Normal" />
    352.                            <VisualState x:Name="MouseOver">
    353.                                <Storyboard>
    354.                                    <ObjectAnimationUsingKeyFrames Duration="0"
    355.                                                                   Storyboard.TargetName="OuterBorder"
    356.                                                                   Storyboard.TargetProperty="BorderBrush">
    357.                                        <DiscreteObjectKeyFrame KeyTime="0"
    358.                                                                Value="{StaticResource ControlOuterBorder_MouseOver}" />
    359.                                    </ObjectAnimationUsingKeyFrames>
    360.                                    <ObjectAnimationUsingKeyFrames Duration="0"
    361.                                                                   Storyboard.TargetName="OuterBorder"
    362.                                                                   Storyboard.TargetProperty="Background">
    363.                                        <DiscreteObjectKeyFrame KeyTime="0"
    364.                                                                Value="{StaticResource ControlBackground_MouseOver}" />
    365.                                    </ObjectAnimationUsingKeyFrames>
    366.                                    <ObjectAnimationUsingKeyFrames Duration="0"
    367.                                                                   Storyboard.TargetName="InnerBorder"
    368.                                                                   Storyboard.TargetProperty="BorderBrush">
    369.                                        <DiscreteObjectKeyFrame KeyTime="0"
    370.                                                                Value="{StaticResource ControlInnerBorder_MouseOver}" />
    371.                                    </ObjectAnimationUsingKeyFrames>
    372.                                </Storyboard>
    373.                            </VisualState>
    374.                            <VisualState x:Name="Pressed">
    375.                                <Storyboard>
    376.                                    <ObjectAnimationUsingKeyFrames Duration="0"
    377.                                                                   Storyboard.TargetName="OuterBorder"
    378.                                                                   Storyboard.TargetProperty="BorderBrush">
    379.                                        <DiscreteObjectKeyFrame KeyTime="0"
    380.                                                                Value="{StaticResource ControlOuterBorder_Pressed}" />
    381.                                    </ObjectAnimationUsingKeyFrames>
    382.                                    <ObjectAnimationUsingKeyFrames Duration="0"
    383.                                                                   Storyboard.TargetName="OuterBorder"
    384.                                                                   Storyboard.TargetProperty="Background">
    385.                                        <DiscreteObjectKeyFrame KeyTime="0"
    386.                                                                Value="{StaticResource ControlBackground_Pressed}" />
    387.                                    </ObjectAnimationUsingKeyFrames>
    388.                                    <ObjectAnimationUsingKeyFrames Duration="0"
    389.                                                                   Storyboard.TargetName="InnerBorder"
    390.                                                                   Storyboard.TargetProperty="BorderBrush">
    391.                                        <DiscreteObjectKeyFrame KeyTime="0"
    392.                                                                Value="{StaticResource ControlInnerBorder_Pressed}" />
    393.                                    </ObjectAnimationUsingKeyFrames>
    394.                                </Storyboard>
    395.                            </VisualState>
    396.                            <VisualState x:Name="Disabled">
    397.                                <Storyboard>
    398.                                    <DoubleAnimation Duration="0"
    399.                                                     Storyboard.TargetName="Path"
    400.                                                     Storyboard.TargetProperty="Opacity"
    401.                                                     To="0.5" />
    402.                                    <DoubleAnimation Duration="0"
    403.                                                     Storyboard.TargetName="OuterBorder"
    404.                                                     Storyboard.TargetProperty="Opacity"
    405.                                                     To="0.5" />
    406.                                </Storyboard>
    407.                            </VisualState>
    408.                        </VisualStateGroup>
    409.                    </VisualStateManager.VisualStateGroups>
    410.                    <Border x:Name="OuterBorder"
    411.                            Background="Transparent"
    412.                            BorderBrush="Transparent"
    413.                            BorderThickness="1"
    414.                            CornerRadius="0">
    415.                        <Border x:Name="InnerBorder"
    416.                                Background="{x:Null}"
    417.                                BorderBrush="{x:Null}"
    418.                                BorderThickness="0"
    419.                                CornerRadius="0" />
    420.                    </Border>
    421.                    <Grid>
    422.                        <Path Margin="0 1 0 0"
    423.                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    424.                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    425.                              Data="M4,0L4,7L0,3.5z"
    426.                              Fill="White" />
    427.                        <Path x:Name="Path"
    428.                              Margin="{TemplateBinding Padding}"
    429.                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    430.                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    431.                              Data="M4,0L4,7L0,3.5z"
    432.                              Fill="{StaticResource ControlElement_Normal}"
    433.                              Stretch="None" />
    434.                    </Grid>
    435.                </Grid>
    436.            </ControlTemplate>
    437.        </Setter.Value>
    438.    </Setter>
    439.</Style>
    440.<Style x:Key="EmptyScrollViewerStyle"
    441.       TargetType="ScrollViewer">
    442.    <Setter Property="BorderThickness" Value="0" />
    443.    <Setter Property="BorderBrush" Value="Transparent" />
    444.    <Setter Property="Padding" Value="0" />
    445.    <Setter Property="HorizontalContentAlignment" Value="Left" />
    446.    <Setter Property="VerticalContentAlignment" Value="Top" />
    447.    <Setter Property="Template">
    448.        <Setter.Value>
    449.            <ControlTemplate TargetType="ScrollViewer">
    450.                <Border BorderBrush="{TemplateBinding BorderBrush}"
    451.                        BorderThickness="{TemplateBinding BorderThickness}"
    452.                        CornerRadius="2">
    453.                    <Grid Background="{TemplateBinding Background}">
    454.                        <Grid.ColumnDefinitions>
    455.                            <ColumnDefinition Width="*" />
    456.                            <ColumnDefinition Width="Auto" />
    457.                        </Grid.ColumnDefinitions>
    458.                        <Grid.RowDefinitions>
    459.                            <RowDefinition Height="*" />
    460.                            <RowDefinition Height="Auto" />
    461.                        </Grid.RowDefinitions>
    462.                        <ScrollContentPresenter x:Name="ScrollContentPresenter"
    463.                                                Margin="{TemplateBinding Padding}"
    464.                                                ContentTemplate="{TemplateBinding ContentTemplate}"
    465.                                                Cursor="{TemplateBinding Cursor}" />
    466.                    </Grid>
    467.                </Border>
    468.            </ControlTemplate>
    469.        </Setter.Value>
    470.    </Setter>
    471.</Style>
    472.<telerik:InvertedBooleanToVisibilityConverter x:Key="InvertBoolToVisConverter" />
    473.<telerik:BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
    474.<ControlTemplate x:Key="TabControlButtonTemplate"
    475.                 TargetType="teleriktest:RadTabControl">
    476.    <Grid>
    477.        <VisualStateManager.VisualStateGroups>
    478.            <VisualStateGroup x:Name="CommonStates">
    479.                <VisualState x:Name="Disabled" />
    480.                <VisualState x:Name="Normal" />
    481.            </VisualStateGroup>
    482.            <VisualStateGroup x:Name="DropDownDisplayStates">
    483.                <VisualState x:Name="DropDownButtonCollapsed" />
    484.                <VisualState x:Name="DropDownButtonVisible">
    485.                    <Storyboard>
    486.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement"
    487.                                                       Storyboard.TargetProperty="Visibility">
    488.                            <DiscreteObjectKeyFrame KeyTime="0">
    489.                                <DiscreteObjectKeyFrame.Value>
    490.                                    <Visibility>Visible</Visibility>
    491.                                </DiscreteObjectKeyFrame.Value>
    492.                            </DiscreteObjectKeyFrame>
    493.                        </ObjectAnimationUsingKeyFrames>
    494.                    </Storyboard>
    495.                </VisualState>
    496.            </VisualStateGroup>
    497.            <VisualStateGroup x:Name="PlacementStates">
    498.                <VisualState x:Name="Left">
    499.                    <Storyboard>
    500.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement"
    501.                                                       Storyboard.TargetProperty="LayoutTransform">
    502.                            <DiscreteObjectKeyFrame KeyTime="0">
    503.                                <DiscreteObjectKeyFrame.Value>
    504.                                    <RotateTransform Angle="-90" />
    505.                                </DiscreteObjectKeyFrame.Value>
    506.                            </DiscreteObjectKeyFrame>
    507.                        </ObjectAnimationUsingKeyFrames>
    508.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewerElement"
    509.                                                       Storyboard.TargetProperty="HorizontalAlignment">
    510.                            <DiscreteObjectKeyFrame KeyTime="0">
    511.                                <DiscreteObjectKeyFrame.Value>
    512.                                    <HorizontalAlignment>Right</HorizontalAlignment>
    513.                                </DiscreteObjectKeyFrame.Value>
    514.                            </DiscreteObjectKeyFrame>
    515.                        </ObjectAnimationUsingKeyFrames>
    516.                    </Storyboard>
    517.                </VisualState>
    518.                <VisualState x:Name="Right">
    519.                    <Storyboard>
    520.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement"
    521.                                                       Storyboard.TargetProperty="LayoutTransform">
    522.                            <DiscreteObjectKeyFrame KeyTime="0">
    523.                                <DiscreteObjectKeyFrame.Value>
    524.                                    <RotateTransform Angle="90" />
    525.                                </DiscreteObjectKeyFrame.Value>
    526.                            </DiscreteObjectKeyFrame>
    527.                        </ObjectAnimationUsingKeyFrames>
    528.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewerElement"
    529.                                                       Storyboard.TargetProperty="HorizontalAlignment">
    530.                            <DiscreteObjectKeyFrame KeyTime="0">
    531.                                <DiscreteObjectKeyFrame.Value>
    532.                                    <HorizontalAlignment>Left</HorizontalAlignment>
    533.                                </DiscreteObjectKeyFrame.Value>
    534.                            </DiscreteObjectKeyFrame>
    535.                        </ObjectAnimationUsingKeyFrames>
    536.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder"
    537.                                                       Storyboard.TargetProperty="BorderThickness">
    538.                            <DiscreteObjectKeyFrame KeyTime="0">
    539.                                <DiscreteObjectKeyFrame.Value>
    540.                                    <Thickness>1 1 0 1</Thickness>
    541.                                </DiscreteObjectKeyFrame.Value>
    542.                            </DiscreteObjectKeyFrame>
    543.                        </ObjectAnimationUsingKeyFrames>
    544.                    </Storyboard>
    545.                </VisualState>
    546.                <VisualState x:Name="Top" />
    547.                <VisualState x:Name="Bottom">
    548.                    <Storyboard>
    549.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder"
    550.                                                       Storyboard.TargetProperty="BorderThickness">
    551.                            <DiscreteObjectKeyFrame KeyTime="0">
    552.                                <DiscreteObjectKeyFrame.Value>
    553.                                    <Thickness>1 1 1 0</Thickness>
    554.                                </DiscreteObjectKeyFrame.Value>
    555.                            </DiscreteObjectKeyFrame>
    556.                        </ObjectAnimationUsingKeyFrames>
    557.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement"
    558.                                                       Storyboard.TargetProperty="LayoutTransform">
    559.                            <DiscreteObjectKeyFrame KeyTime="0">
    560.                                <DiscreteObjectKeyFrame.Value>
    561.                                    <RotateTransform Angle="180" />
    562.                                </DiscreteObjectKeyFrame.Value>
    563.                            </DiscreteObjectKeyFrame>
    564.                        </ObjectAnimationUsingKeyFrames>
    565.                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AdditionalContentTransform"
    566.                                                       Storyboard.TargetProperty="LayoutTransform">
    567.                            <DiscreteObjectKeyFrame KeyTime="0">
    568.                                <DiscreteObjectKeyFrame.Value>
    569.                                    <RotateTransform Angle="180" />
    570.                                </DiscreteObjectKeyFrame.Value>
    571.                            </DiscreteObjectKeyFrame>
    572.                        </ObjectAnimationUsingKeyFrames>
    573.                    </Storyboard>
    574.                </VisualState>
    575.            </VisualStateGroup>
    576.        </VisualStateManager.VisualStateGroups>
    577.        <telerik:RadDockPanel LastChildFill="True">
    578.            <teleriktest:LayoutTransformControl x:Name="HeaderDockedElement"
    579.                                                telerik:RadDockPanel.Dock="Top">
    580.                <Grid UseLayoutRounding="True">
    581.                    <Border x:Name="HeaderBackground"
    582.                            Background="{TemplateBinding HeaderBackground}"
    583.                            Visibility="{TemplateBinding BackgroundVisibility}" />
    584.                    <Border BorderBrush="{StaticResource TabControl_ContentBorderBrush}"
    585.                            BorderThickness="0 0 0 1" />
    586.                    <telerik:RadDockPanel Canvas.ZIndex="10">
    587.                        <teleriktest:LayoutTransformControl x:Name="AdditionalContentTransform"
    588.                                                            Margin="0 4 0 2"
    589.                                                            telerik:RadDockPanel.Dock="Right">
    590.                            <ContentPresenter x:Name="AdditionalContentElement"
    591.                                              Content="{TemplateBinding AdditionalContent}" />
    592.                        </teleriktest:LayoutTransformControl>
    593.                        <StackPanel Margin="2,4,4,2"
    594.                                    Orientation="Horizontal"
    595.                                    telerik:RadDockPanel.Dock="Right">
    596.                            <ToggleButton x:Name="DropDownButtonElement"
    597.                                          ClickMode="Press"
    598.                                          IsChecked="{Binding IsDropDownOpen,
    599.                                                              Mode=TwoWay,
    600.                                                              RelativeSource={RelativeSource TemplatedParent}}"
    601.                                          Style="{TemplateBinding DropDownButtonStyle}"
    602.                                          Visibility="Collapsed"
    603.                                          telerik:RadDockPanel.Dock="Right">
    604.                                <teleriktest:RadContextMenu.ContextMenu>
    605.                                    <tabControl:DropDownMenu x:Name="DropDownMenuElement"
    606.                                                             DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"
    607.                                                             ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"
    608.                                                             ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"
    609.                                                             Placement="Bottom"
    610.                                                             StaysOpen="False"
    611.                                                             Style="{TemplateBinding DropDownStyle}" />
    612.                                </teleriktest:RadContextMenu.ContextMenu>
    613.                            </ToggleButton>
    614.                            <telerik:RadButton x:Name="RefreshButton"
    615.                                               Width="26"
    616.                                               Height="26"
    617.                                               Content="1" />
    618.                            <telerik:RadButton x:Name="BackButton"
    619.                                               Width="26"
    620.                                               Height="26"
    621.                                               Content="2" />
    622.                            <telerik:RadButton x:Name="ForwardButton"
    623.                                               Width="26"
    624.                                               Height="26"
    625.                                               Content="3" />
    626.                        </StackPanel>
    627.                        <RepeatButton x:Name="LeftScrollButtonElement"
    628.                                      Margin="4 4 2 2"
    629.                                      Style="{StaticResource ScrollButtonStyle}" />
    630.                        <RepeatButton x:Name="RightScrollButtonElement"
    631.                                      Margin="2 4 0 2"
    632.                                      RenderTransformOrigin="0.5 0.5"
    633.                                      Style="{StaticResource ScrollButtonStyle}"
    634.                                      telerik:RadDockPanel.Dock="Right">
    635.                            <RepeatButton.RenderTransform>
    636.                                <ScaleTransform ScaleX="-1" />
    637.                            </RepeatButton.RenderTransform>
    638.                        </RepeatButton>
    639.                        <ScrollViewer x:Name="ScrollViewerElement"
    640.                                      Margin="2 4 2 0"
    641.                                      BorderThickness="0"
    642.                                      HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility),
    643.                                                                              RelativeSource={RelativeSource TemplatedParent}}"
    644.                                      IsTabStop="False"
    645.                                      Style="{StaticResource EmptyScrollViewerStyle}"
    646.                                      VerticalScrollBarVisibility="Disabled">
    647.                            <ItemsPresenter />
    648.                        </ScrollViewer>
    649.                    </telerik:RadDockPanel>
    650.                </Grid>
    651.            </teleriktest:LayoutTransformControl>
    652.            <Border x:Name="ContentBorder"
    653.                    Background="{TemplateBinding Background}"
    654.                    BorderBrush="{TemplateBinding BorderBrush}"
    655.                    BorderThickness="{Binding BorderThickness,
    656.                                              Mode=TwoWay,
    657.                                              RelativeSource={RelativeSource TemplatedParent}}"
    658.                    Padding="{TemplateBinding Padding}">
    659.                <Grid>
    660.                    <ContentPresenter x:Name="ContentElement"
    661.                                      ContentTemplate="{TemplateBinding SelectedContentTemplate}"
    662.                                      Visibility="{Binding IsContentPreserved,
    663.                                                           Converter={StaticResource InvertBoolToVisConverter},
    664.                                                           RelativeSource={RelativeSource TemplatedParent}}" />
    665.                    <Grid x:Name="ContentElementsPanel"
    666.                          Visibility="{Binding IsContentPreserved,
    667.                                               Converter={StaticResource BoolToVisConverter},
    668.                                               RelativeSource={RelativeSource TemplatedParent}}" />
    669.                </Grid>
    670.            </Border>
    671.        </telerik:RadDockPanel>
    672.    </Grid>
    673.</ControlTemplate>
    674.<Style x:Key="RadTabControlButtonTemplate"
    675.       TargetType="teleriktest:RadTabControl">
    676.    <Setter Property="TextOptions.TextRenderingMode" Value="ClearType" />
    677.    <Setter Property="BorderBrush" Value="{StaticResource TabControl_ContentBorderBrush}" />
    678.    <Setter Property="BorderThickness" Value="1 0 1 1" />
    679.    <Setter Property="Background" Value="{StaticResource TabControl_ContentBackground}" />
    680.    <Setter Property="MinWidth" Value="5" />
    681.    <Setter Property="MinHeight" Value="26" />
    682.    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    683.    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    684.    <Setter Property="IsTabStop" Value="False" />
    685.    <Setter Property="HeaderBackground" Value="{StaticResource TabControl_HeaderBackground}" />
    686.    <Setter Property="ItemsPanel">
    687.        <Setter.Value>
    688.            <ItemsPanelTemplate>
    689.                <primitives:TabWrapPanel />
    690.            </ItemsPanelTemplate>
    691.        </Setter.Value>
    692.    </Setter>
    693.    <Setter Property="DropDownButtonStyle" Value="{StaticResource DropDownButtonStyle}" />
    694.    <Setter Property="DropDownStyle" Value="{StaticResource DropDownMenuStyle}" />
    695.    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    696.    <Setter Property="Template" Value="{StaticResource TabControlButtonTemplate}" />
    697.</Style>

  2. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 29 Jun 2015 in reply to Stephen Link to this post

    One other thing I was trying to figure out was getting the template to be based off the Office Blue theme.  So, if you are able to also help on that part of my task, that would be awesom... but the working right side buttons is the big thing I need...
  3. DevCraft banner
  4. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 29 Jun 2015 in reply to Stephen Link to this post

    I figured out the office blue theming part of this second post.  So, I just need to get the right side button part.
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 01 Jul 2015 Link to this post

    Hello Stephen,

    There is no need to do such complex retemplate to achieve the desired requirement. In fact RadTabControl supports additional content that can be placed right after the DropDown button. I attached a sample solution demonstrating the AdditionalContent property of the Tab with your buttons added. As you will see they are fully functional - no need to add Blend Behaviors or attached behaviors to wire to the Button's Click event.
    You might take a look at the attachment and let me know how it works for you. 

    P.S. The project attached is made with implicit styles theming mechanism and the theme used is our latest -  VisualStudio2013. Feel free to modify this per your own scenario needs.

    Regards,
    Evgenia
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 01 Jul 2015 Link to this post

    Thank you very much, not sure how I completely missed the AdditionalContent portion of the control.
Back to Top
DevCraft banner