ネストされたコンテンツを持つボタン:
<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>
使用法は、次のように動的にすることができます。
<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>
VisualBrush
スタイルに2 ContentControl
/を持たないa を使用し、ContentPresenter
1 つを a にレンダリングしBrush
て長方形を塗りつぶし、効果を得ます。
テンプレートを使用してビジュアル ツリーを複製する
そもそもUserControl
これをするようにしてください。Button
スタイルでビジュアル ツリーを複製する場合は、テンプレートを使用する必要があります。
<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>
と使用法:
<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>