在 WPF 按钮中显示相同的内容两次

Question

我们希望设置 wpf 按钮的样式，以便按钮中设置的内容显示两次。这样做的原因是我们要实现按钮内容的投影效果。当时的想法是在 Button 样式中有两个 ContentControl，如下所示：

<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" />

所以，一个 ContentControl 用于显示真实的内容，一个 ContentControl 用于显示相同的内容并留有一点边距，这样它就可以产生投影效果。问题是它没有在两个内容控件中显示内容。其中只有一个显示内容。如何在两个内容控件中成功显示内容？

此外，阴影效果也不是一个选项，因为按钮的内容变得模糊。

感谢您的帮助！

Answer 1

带有嵌套内容的按钮：

<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 / ContentPresenter，只是将一个渲染到 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>

Answer 2

我在一个小的虚拟应用程序中尝试了这个，它工作得很好。看看这是不是你想要的。

     <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>