Template the content control for multiple types - radio button and tabitem

437 Views Asked by At

So, what I set out to do is template my radio buttons and tab items to look the same so that they look the same but can act differently. SoIi created a Control template and targeted it to the Content Control type and used it as a static resource to template the two types.

Everything works except i cant figure out how to set the header to display as the label. The 'Content' Property picks up the radio button label text, but when I try binding to the 'Header' property I fail at getting the label text.

Here is the content control Control Template Xaml:

 <!-- Tab Selector Style -->
<ControlTemplate x:Key="TabSelectorStyle" TargetType="ContentControl">
    <Grid x:Name="Root" HorizontalAlignment="Stretch">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates" >
                <VisualState x:Name="Normal" >
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Box" Storyboard.TargetProperty="Fill">
                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                    <DiscreteObjectKeyFrame.Value>
                                        <SolidColorBrush Color="#FF323232"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetName="Box" Storyboard.TargetProperty="StrokeThickness" To="1" Duration="0:0:0.1" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Box" Storyboard.TargetProperty="Fill">
                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                    <DiscreteObjectKeyFrame.Value>
                                        <SolidColorBrush Color="#FF326699"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetName="Box" Storyboard.TargetProperty="StrokeThickness" To="1.5" Duration="0:0:0.3" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates" >
                <VisualState x:Name="Selected" >
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Check" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unselected" >
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Check" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="{Binding Path=Margin}">
            <Grid  Margin="5,2,5,2" HorizontalAlignment="Center">
                <Rectangle x:Name="Box"
                          Width="10" Height="10"
                          Fill="#FF323232" Stroke="#FFFFFFFF" StrokeThickness="1"
                          VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <Rectangle x:Name="Check"
                         Width="8" Height="8"
                         Fill="#FFFFFFFF" Opacity="0"
                         VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
            <TextBlock x:Name="RadioButtionTitle" Foreground="#FFFFFFFF" Text="{TemplateBinding Content}" HorizontalAlignment="Stretch" Width="Auto" Margin="5,2,5,2"/>

            <!-- F I X E D   H E R E -->
            <TextBlock x:Name="TabitemTitle" Foreground="#FFFFFFFF" Text="{Binding Header, RelativeSource={RelativeSource FindAncestor, AncestorType=presentcontrols:TabItem}}" HorizontalAlignment="Stretch" Width="Auto" Margin="5,2,5,2"/>
            <!-- =================== -->
        </StackPanel>
    </Grid>
</ControlTemplate>
0

There are 0 best solutions below