Display same content twice in WPF Button - wpf

Question

We want to style a wpf button so that the content set in the button is displayed twice. The reason for this is that we want to achieve a drop shadow effect of the button's content. Out thought was to have two ContentControls in the Button style like below:
<ContentControl x:Name="ContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="White" Margin="0,1,0,0" />
So, one ContentControl is for displaying the real content and one ContentControl is for displaying the same content with a little margin so that it gives the effect of being the drop shadow. The problem is that it doesn't show content in both content controls. Only one of them shows content. How can I successfully show content in both content controls?
Also, the dropshadow effect is not an option since the button's content becomes blurry.
Thanks for help!

Answer 1

Buttons with Nested Content:
<Style x:Key="ShadowButton"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Width="{Binding ActualWidth,
ElementName=presenter}"
Height="{Binding ActualHeight,
ElementName=presenter}">
<Rectangle.Fill>
<VisualBrush AlignmentX="Left"
Stretch="None"
Visual="{Binding ElementName=presenter}" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TranslateTransform X="3"
Y="3" />
</Rectangle.RenderTransform>
</Rectangle>
<!-- You can replace the following line to a ContentControl if you absolutely have to -->
<ContentPresenter x:Name="presenter"
ContentSource="Content" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage can then be dynamic like:
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="36"
Style="{StaticResource ShadowButton}">
<StackPanel>
<Button Margin="2"
Content="A" />
<Button Margin="2"
Content="B" />
<TextBox Margin="2"
Text="Blah" />
</StackPanel>
</Button>
By using a VisualBrush your not having 2 ContentControl / ContentPresenter in your Style and are just rendering one into a Brush to fill a rectangle and get your effect.
Duplicating Visual Tree with a Template
Try to have a UserControl do this than a Button in the first place. You need to use a Template if you want to duplicate the Visual Tree in your style.
<Style x:Key="ShadowButton"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<ContentControl x:Name="shadow"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="SpringGreen">
<ContentControl.RenderTransform>
<TranslateTransform X="50"
Y="50" />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl x:Name="presenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="SlateBlue" />
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="presenter"
Property="IsMouseOver"
Value="True">
<Setter TargetName="shadow"
Property="Foreground"
Value="Teal" />
<Setter TargetName="presenter"
Property="Foreground"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and usage:
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource ShadowButton}">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel>
<Button Margin="2"
Content="A"
Foreground="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ContentControl}},
Path=Foreground}" />
<TextBox Margin="2"
Foreground="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ContentControl}},
Path=Foreground}"
Text="Blah" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>

Answer 2

I tried this in a small dummy application and it works just fine. See if this is what you want.
<Window.Resources>
<Style x:Key="test" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<ContentControl Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
<ContentControl Foreground="DarkGray"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}">
<ContentControl.RenderTransform>
<TranslateTransform Y="2" X="2"/>
</ContentControl.RenderTransform>
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource test}">
Test
</Button>
</Grid>